1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets

2 Objectives What is CSS? What is CSS? CSS Selectors CSS Selectors Box Model and Visual Model Box Model and Visual Model

3 What is CSS? Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents The separation of structure from presentation  simplifies maintaining and modifying the page The separation of structure from presentation  simplifies maintaining and modifying the page

4 Inline Styles Inline styles can be declared within an individual element’s format using attribute style. Inline styles can be declared within an individual element’s format using attribute style. CSS CSS This text does not have any style This text does not have any style This text has any style This text has any style

5 Embedded Style Sheets Can be embedded in the head section Can be embedded in the head section CSS CSS p { p { font-size: 20px; font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif; color: #8080ff; color: #8080ff; } /* This is CSS comment */ /* This is CSS comment */.highlighted {.highlighted { background-color: #FFFFAA; background-color: #FFFFAA; } This text does have its style This text does have its style Lorem Ipsum is simply dummy text of the printing and typesetting industry... Lorem Ipsum is simply dummy text of the printing and typesetting industry...

6 External Style Sheets With external style sheets, you can provide a uniform look and feel to an entire website With external style sheets, you can provide a uniform look and feel to an entire website Different pages can use the same style sheets Different pages can use the same style sheets Changes in the css file will be reflected to any page that linked Changes in the css file will be reflected to any page that linked

7 External Style Sheets How to define: How to define: CSS CSS This text does have its style This text does have its style Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

8 Characters and Case All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO characters U+00A1 and higher, the characters [a-zA-Z0-9] and ISO characters U+00A1 and higher, plus the hyphen (-) plus the hyphen (-) the underscore (_) the underscore (_) they cannot start with a digit, or a hyphen followed by a digit they cannot start with a digit, or a hyphen followed by a digit

9 Declaration & Properties The following rules: The following rules: h1 { font-weight: bold } h1 { font-weight: bold } h1 { font-size: 12px } h1 { font-size: 12px } h1 { line-height: 14px } h1 { line-height: 14px } are equivalent to: are equivalent to: h1 { h1 { font-weight: bold; font-weight: bold; font-size: 12px; font-size: 12px; line-height: 14px; line-height: 14px; }

10 Relative Units Relative units are: Relative units are: em: the 'font-size' of the relevant font em: the 'font-size' of the relevant font ex: the 'x-height' of the relevant font ex: the 'x-height' of the relevant font px: pixels, relative to the viewing device px: pixels, relative to the viewing device h1 { margin: 0.5em } /* em */ h1 { margin: 0.5em } /* em */ h1 { margin: 1ex } /* ex */ h1 { margin: 1ex } /* ex */ p { font-size: 12px } /* px */ p { font-size: 12px } /* px */

11 Color Model The RGB color model is used in numerical color specifications. These examples all specify the same color: The RGB color model is used in numerical color specifications. These examples all specify the same color: em { color: #f00 } /* #rgb */ em { color: #f00 } /* #rgb */ em { color: #ff0000 } /* #rrggbb */ em { color: #ff0000 } /* #rrggbb */ em { color: rgb(255,0,0) } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } em { color: rgb(100%, 0%, 0%) }

12 Type Selectors A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. The following rule matches all H1 elements in the document tree: The following rule matches all H1 elements in the document tree: h1 { font-family: sans-serif } h1 { font-family: sans-serif } The following rule matches all p elements in the document tree: The following rule matches all p elements in the document tree: p { font-size: 12px } p { font-size: 12px }

13 Class Selectors Class Class.highlighted {.highlighted { background-color: #FFFFAA; background-color: #FFFFAA; } Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

14 Class Selectors Combining Classes Combining Classes.highlighted {.highlighted { background-color: #FFFFAA; background-color: #FFFFAA; }.highlighted.blue {.highlighted.blue { background-color: #AAAAFF; background-color: #AAAAFF; } Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

15 id Selectors id id #heading { #heading { font-size: 20px; font-size: 20px; color: #ff0000; color: #ff0000; } This is my heading This is my heading

16 Grouping Selectors When several selectors share the same declarations, they may be grouped into a comma-separated list. When several selectors share the same declarations, they may be grouped into a comma-separated list. h1 { font-family: sans-serif } h1 { font-family: sans-serif } h2 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h3 { font-family: sans-serif } is equivalent to: is equivalent to: h1, h2, h3 { font-family: sans-serif } h1, h2, h3 { font-family: sans-serif }

17 Descendant Selectors A descendant selector is made up of two or more selectors separated by white space. A descendant selector is made up of two or more selectors separated by white space. Consider the following rules: Consider the following rules: h1 { color: red } h1 { color: red } em { color: red } em { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: This headline is very important This headline is very important To address it, use the following syntax: To address it, use the following syntax: h1 em { color: blue } h1 em { color: blue }

18 Child Selectors A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". The following rule sets the style of all P elements that are children of BODY: The following rule sets the style of all P elements that are children of BODY: body > P { line-height: 1.5em } body > P { line-height: 1.5em }

19 Pseudo Class Selectors a:link { color: red } /* unvisited links */ a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ a:active { color: lime } /* active links */ Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

20 Media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly rule specifies the target media types (separated by commas) of a set of statements (delimited by curly print { body { font-size: 10pt print { body { font-size: 10pt screen { body { font-size: 13px screen { body { font-size: 13px screen, print { body { line-height: 1.2 screen, print { body { line-height: 1.2 }}

21 Box Model Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas The size of each area is specified by its properties The size of each area is specified by its properties

22 Box Model Example: Example: UL { UL { background: yellow; background: yellow; margin: 12px 12px 12px 12px; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; padding: 3px 3px 3px 3px; /* No borders set */ /* No borders set */ } LI { LI { color: white; /* text color is white */ color: white; /* text color is white */ background: blue; /* Content, padding will be blue */ background: blue; /* Content, padding will be blue */ margin: 12px 12px 12px 12px; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ list-style: none /* no glyphs before a list item */ /* No borders set */ /* No borders set */ }

23 Margin Properties If there are four values, they apply to the top, right, bottom, and left, respectively. If there are four values, they apply to the top, right, bottom, and left, respectively. body { margin: 2em } /* all margins set to 2em */ body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ The last rule of the example above is equivalent to the example below: The last rule of the example above is equivalent to the example below: body { body { margin-top: 1em; margin-top: 1em; margin-right: 2em; margin-right: 2em; margin-bottom: 3em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ margin-left: 2em; /* copied from opposite side (right) */ }

24 Padding Properties Similar to Margin, if there are four values, they apply to the top, right, bottom, and left, respectively. Similar to Margin, if there are four values, they apply to the top, right, bottom, and left, respectively. h1 { h1 { background: white; background: white; padding: 1em 2em; padding: 1em 2em; } The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use. The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.

25 Border Border can be defined like this: Border can be defined like this:.title {.title { border: 1px solid #AAAAFF; border: 1px solid #AAAAFF; } 1px : border width 1px : border width solid : border style Others such as dotted, thin and many others solid : border style Others such as dotted, thin and many others

26 Visual Model Consider the following examples: Consider the following examples: p { display: block } p { display: block } Another text Another text Some text Some text More text More text What happens if we set to display: inline? What happens if we set to display: inline?

27 Positioning Schemes A box may be laid out according to three positioning schemes: A box may be laid out according to three positioning schemes: Normal flow Normal flow Floats: a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. Floats: a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. Absolute positioning: In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block. Absolute positioning: In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

28 Position Value: Value: static, absolute, relative, or fixed static, absolute, relative, or fixed Box offsets: Box offsets: top, right, bottom, or left top, right, bottom, or left.title {.title { position: absolute; position: absolute; left: 600px; left: 600px; top: 40px; top: 40px; padding: 10px; padding: 10px; border: 1px solid #AAAAFF; border: 1px solid #AAAAFF; }