04 – CSS Informatics Department Parahyangan Catholic University.

Pemrograman Berbasis Web04 – CSS

Informatics DepartmentParahyangan Catholic University

Introducti0n

CSS allows us to create rules that specify how the content of an element should appear.

For example, we can specify that: The background of the page is cream All paragraphs should appear in gray using

the Arial typeface All level one headings should be in a blue,

italic, Times typeface Etc.

Thinking Inside The Box

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.

CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.

How does CSS work?

CSS works by associating rules with HTML elements.

These rules govern how the content of specified elements should be displayed.

A CSS rule contains two parts: a selector and a declaration.

How does CSS work? Selectors indicate which element the rule

applies to. To apply the same rule to more than one element, separate the element names with commas.

Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value),and are separated by a colon.

How does CSS work?

Example:

This rule indicates that all <p> elements should be shown in the Arial typeface.

How does CSS work?

Example:

This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.

Using CSS

There are some ways to use CSS to your web page: External CSS Internal CSS Inline CSS

Using CSS When building a site with more than one

page, you should use an external CSS file.

This: Allows all pages to use the same style rules

(rather than repeating them in each page). Keeps the content separate from how the page

looks. Means you can change the styles used across

all pages by altering just one file (rather than each individual page).

External CSS

The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.

It is an empty element. It lives inside the <head> element.

External CSS It should use three attributes:

hrefThis specifies the path to the CSS file (which is often placed in a folder called css or styles).

typeThis attribute specifies the type of document being linked to. The value should be text/css.

relThis specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when linking to a CSS file.

External CSS An HTML page can use more than one CSS file To do this it could have a <link> element for

every CSS file it uses. For example, some authors use one CSS file to

control the presentation (such as fonts and colors) and a second to control the layout.

<head><title> Using External CSS</title>

<link href="css/styles.css" type="text/css" rel="stylesheet" /><link href="css/layout.css" type="text/css" rel="stylesheet" />

</head>

Internal CSS You can also include CSS rules within an HTML

page by placing them inside a <style> element (which usually sits inside the <head> element of the page).

<head><style>body { background-color: linen;}

h1 { color: maroon; margin-left: 40px;} </style></head>

Example:

Inline CSS

An inline style may be used to apply a unique style for a single element.

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!

Inline CSS

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.

Example:<h1 style="color:blue;margin-left:30px;">This is a heading.

</h1>

Cascading order When there is more than one style specified for an

HTML, we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules (where number three has the highest priority):1. Browser default2. External and internal style sheets (in the head section)3. Inline style (inside an HTML element)

If the link to the external style sheet is placed below the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Cascading order LAST RULEIf the two selectors are identical, the latter of the two will take precedence.

SPECIFICITYIf one selector is more specific than the others, the more specific rule will take precedence over more general ones. Example: h1 is more specific than * p b is more specific than p p#intro is more specific than p

Cascading order IMPORTANTYou can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element.

Understanding how CSS rules cascade means you can write simpler style sheets because you can create generic rules that apply to most elements and then override the properties on individual elements that need to appear differently.

Selector

There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document.

CSS selectors are case sensitive, so they must match element names and attribute values exactly.

SelectorSelector

sMeaning Example

Universal Selector

Applies to all elements in the document

* {}Targets all elements on the page.

Type Selector

Matches element names

h1, h2, h3 {}Targets the <h1>, <h2> and <h3> elements

Class Selector

Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol.

.note {}Targets any element whose classattribute has a value of notep.note {}Targets only <p> elementswhose class attribute has a value of note.

SelectorSelector

sMeaning Example

ID Selector

Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol.

#introduction {}Targets the element whose id attribute has a value of introduction.

Child Selector

Matches an element that is a direct child of another.

li>a {}Targets any <a> elements that are children of an <li> element (but not other <a> elements in the page)

Descendant Selector

Matches an element that is adescendent of another specifiedelement (not just a direct child ofthat element)

p a {}Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them.

Selector

Selectors Meaning ExampleAdjacent SiblingSelector

Matches an element that is the next sibling of another.

h1+p {}Targets the first <p> element after any <h1> element (but not other <p> elements)

General Sibli ngSelector

Matches an element that is a sibling of another, although it does not have to be the directly preceding element.

h1~p {}If you had two <p> elements that are siblings of an <h1> element, this rule would apply to both

Selector: HTML id and class attribute

Every HTML element can carry the id attribute.

It is used to uniquely identify that element from other elements on the page.

Its value should start with a letter or an underscore (not a number or any other character).

Selector: HTML id and class attribute

Giving an element a unique identity allows us to style it differently than any other instance of the same element on the page.

For example: we want to assign one paragraph within

the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs.

Selector: HTML id and class attribute Every HTML element can also carry a

class attribute. Sometimes, rather than uniquely

identifying one element within a document, we want a way to identify several elements as being different from the other elements on the page.

Selector: HTML id and class attribute For example:

we have some paragraphs of text that contain information that is more important than others and want to distinguish these elements

we want to differentiate between links that point to other pages on our own site and links that point to external sites.

HTML <div> Element The <div> element is a block-level

element that is often used as a container for other HTML elements.

The <div> element has no required attributes, but style and class are common.

When used together with CSS, the <div> element can be used to style blocks of content:

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

HTML <span> Element

The <span> element is an inline element that is often used as a container for some text.

The <span> element has no required attributes, but style and class are common.

When used together with CSS, the <span> element can be used to style parts of the text:

<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Layout

The <div> element is often used as a layout tool, because it can easily be positioned with CSS.

HTML Layout

Example:<div id="header">...</div>

<div id="nav">...</div>

<div id="section">...</div>

<div id="footer">...</div> The CSS ?

See http://www.w3schools.com/html/html_layout.asp

HTML Layout Using HTML 5 HTML5 offers new semantic elements that

define different parts of a web page: header: Defines a header for a document or a

section nav: Defines a container for navigation links section: Defines a section in a document article: Defines an independent self-contained

article aside: Defines content aside from the content

(like a sidebar) footer: Defines a footer for a document or a

section details: Defines additional details summary: Defines a heading for the details

element

HTML Layout Using HTML 5

<div id="header"><h1>City Gallery</h1></div>

#header { background-color:black; color:white; text-align:center; padding:5px;}

HTML

CSS

<header><h1>City Gallery</h1></header>

header { background-color:black; color:white; text-align:center; padding:5px; }

HTML

CSS

BEFORE HTML 5 AFTER HTML 5

CSS Box Model

All HTML elements can be considered as boxes.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. Content - The content of the box,

where text and images appear Padding - Clears an area around

the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

CSS Box Model

Important: The width and height properties set through CSS is for the content area. To calculate the full size of an element, we must also add padding, borders and margins.

div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }

320px340px

350px350px

Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

CSS3 Box-Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

.div1 { width: 300px; height: 100px; border: 1px solid blue; }

.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red;}

CSS3 Box-Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

.div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; }.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; }

Responsive Web Design (RWD) RWD can deliver web pages in

variable sizes

Example see: http://www.w3schools.com/html/tryrwd_simple.htm

CSS float attribute

Example:<style>.city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black;} </style>

RWD - Viewport

The viewport is the user's visible area of a web page.

When browsing on a mobile device, fixed sized web page might be too large to fit the viewport. To fix this, the browser on that devices scale down the entire web page to fit the screen.

RWD - Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

RWD - Viewport

Before After

RWD Images

If the width property is set to 100%, the image will be responsive and scale up and down:

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

img { width: 100%; height: auto;}

img { max-width: 100%; height: auto;}

RWD Background Images If the background-size property is set to "contain", the

background image will scale, and try to fit the content area. However, the image will keep its aspect ratio

div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red;}

RWD Background Images If the background-size property is set to

"100% 100%", the background image will stretch to cover the entire content area:

div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red;}

RWD Background Images If the background-size property is set to

"cover", the background image will scale to cover the entire content area. The "cover" value keeps the aspect ratio, and some part of the background image may be clipped

div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red;}

RWD Background Images We can load a totally different images for

different viewport sizes/* For width smaller than 400px: */body { background-image: url('img_smallflower.jpg'); }

/* For width 400px and larger: */@media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); }}

RWD Background Images use min-device-width instead of min-

width to check the device’s width instead of the browser’s width

/* For width smaller than 400px: */body { background-image: url('img_smallflower.jpg'); }

/* For width 400px and larger: */@media only screen and (min-device-width: 400px) { body { background-image: url('img_flowers.jpg'); }}

HTML5 <picture> Element HTML5 introduced the <picture> element,

which lets us define more than one image. The first source that fits the preferences is the one being used.<picture>

<source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"></picture>

The srcset attribute is required, and defines the source of the image.The media attribute is optional.The <img> element should be defined for browsers that do not support the <picture> element.

04 – CSS Informatics Department Parahyangan Catholic University.

Documents

Transcript of 04 – CSS Informatics Department Parahyangan Catholic University.