1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

1

Pengantar Pengantar Teknologi Teknologi InternetInternet

W03:W03:CSSCSS

Cascading Style SheetsCascading Style Sheets

2

ObjectivesObjectives

What is CSS?What is CSS? CSS SelectorsCSS Selectors Box Model and Visual ModelBox Model and Visual Model

3

What is CSS?What is CSS?

Cascading Style Sheets (CSS) is a Cascading Style Sheets (CSS) is a simple mechanism for adding style simple mechanism for adding style (e.g. fonts, colors, spacing) to Web (e.g. fonts, colors, spacing) to Web documentsdocuments

The separation of structure from The separation of structure from presentation presentation simplifies simplifies maintaining and modifying the pagemaintaining and modifying the page

4

Inline StylesInline Styles Inline styles can be declared within an Inline styles can be declared within an

individual element’s format using attribute individual element’s format using attribute stylestyle..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">

<html><html><head><head>

<meta http-equiv="Content-Type" content="text/html; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">charset=iso-8859-1">

<title>CSS</title><title>CSS</title></head></head><body><body>

<p>This text does not have any style</p><p>This text does not have any style</p><p <p style="font-size: 36px; color: #ff8040;"style="font-size: 36px; color: #ff8040;">This text has >This text has

any style</p>any style</p></body></body>

</html></html>

5

Embedded Style SheetsEmbedded Style Sheets Can be embedded in the head sectionCan be embedded in the head section



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>CSS</title><title>CSS</title><style type="text/css"><style type="text/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;}}

</style></style></head></head><body><body>

<p>This text does have its style</p><p>This text does have its style</p><p class="highlighted"><p class="highlighted">

Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting industry. ..industry. ..

</p></p></body></body></html></html>

6

External Style SheetsExternal Style Sheets With external style sheets, you With external style sheets, you

can provide a uniform look can provide a uniform look and feel to an entire websiteand feel to an entire website

Different pages can use the Different pages can use the same style sheetssame style sheets

Changes in the css file will be Changes in the css file will be reflected to any page that reflected to any page that linkedlinked

7

External Style SheetsExternal Style Sheets How to define:How to define:



<meta http-equiv="Content-Type" content="text/html; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">charset=iso-8859-1">

<title>CSS</title><title>CSS</title><link rel="stylesheet" type="text/css" href="external.css"/><link rel="stylesheet" type="text/css" href="external.css"/>

</head></head><body><body>

<p><p>This text does have its styleThis text does have its style

</p></p><p class="highlighted"><p class="highlighted">

Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and typesetting industry. typesetting industry.

</p></p></body></body>

</html></html>

8

Characters and CaseCharacters and Case

All CSS syntax is case-insensitive within the All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under equivalent), except for parts that are not under the control of CSS.the control of CSS.

In CSS, identifiers (including element names, In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters the characters [a-zA-Z0-9] and ISO 10646 characters

U+00A1 and higher, U+00A1 and higher, plus the hyphen (-)plus the hyphen (-) the underscore (_)the underscore (_) they cannot start with a digit, or a hyphen followed they cannot start with a digit, or a hyphen followed

by a digitby a digit

9

Declaration & PropertiesDeclaration & 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 UnitsRelative Units Relative units are:Relative units are:

em: the 'font-size' of the relevant fontem: the 'font-size' of the relevant font ex: the 'x-height' of the relevant fontex: the 'x-height' of the relevant font px: pixels, relative to the viewing devicepx: 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 ModelColor Model

The RGB color model is used in The RGB color model is used in numerical color specifications. These numerical color specifications. These examples all specify the same color: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 SelectorsType Selectors A type selector matches the name of a A type selector matches the name of a

document language element type. A type document language element type. A type selector matches every instance of the selector matches every instance of the element type in the document tree.element type in the document tree.

The following rule matches all H1 elements The following rule matches all H1 elements in the document tree:in the document tree:

h1 { font-family: sans-serif }h1 { font-family: sans-serif }

The following rule matches all p elements The following rule matches all p elements in the document tree:in the document tree:

p { font-size: 12px }p { font-size: 12px }

13

Class SelectorsClass SelectorsClassClass

.highlighted.highlighted { {background-color: #FFFFAA;background-color: #FFFFAA;

}}

<p class="highlighted"><p class="highlighted">Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text

of the printing and typesetting industry. of the printing and typesetting industry. </p></p>

14

Class SelectorsClass SelectorsCombining ClassesCombining Classes

.highlighted.highlighted { {background-color: #FFFFAA;background-color: #FFFFAA;

}}

.highlighted.blue.highlighted.blue { {background-color: #AAAAFF;background-color: #AAAAFF;

}}

<p class="highlighted blue"><p class="highlighted blue">Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of

the printing and typesetting industry. the printing and typesetting industry. </p></p>

15

id Selectorsid Selectorsidid

#heading#heading { {font-size: 20px;font-size: 20px;color: #ff0000;color: #ff0000;

}}

<p id=“heading"><p id=“heading">This is my headingThis is my heading

</p></p>

16

Grouping SelectorsGrouping Selectors When several selectors share the same When several selectors share the same

declarations, they may be grouped into a declarations, they may be grouped into a comma-separated list.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 SelectorsDescendant Selectors A descendant selector is made up of two or more A descendant selector is made up of two or more

selectors separated by white space. 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 Although the intention of these rules is to add emphasis to text by changing its color, the effect emphasis to text by changing its color, the effect will be lost in a case such as:will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1><H1>This headline is <EM>very</EM> important</H1>

To address it, use the following syntax:To address it, use the following syntax:h1 em { color: blue }h1 em { color: blue }

18

Child SelectorsChild Selectors

A child selector matches when an A child selector matches when an element is the child of some element. element is the child of some element. A child selector is made up of two or A child selector is made up of two or more selectors separated by ">".more selectors separated by ">".

The following rule sets the style of all The following rule sets the style of all P elements that are children of BODY:P elements that are children of BODY:

body > P { line-height: 1.5em }body > P { line-height: 1.5em }

19

Pseudo Class SelectorsPseudo Class Selectorsa: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 Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of cascading rules will hide the 'color' property of the A:hover rule. the A:hover rule.

Similarly, because A:active is placed after Similarly, because A:active is placed after A:hover, the active color (lime) will apply when A:hover, the active color (lime) will apply when the user both activates and hovers over the A the user both activates and hovers over the A element. element.

20

Media RuleMedia Rule

@media rule specifies the target media @media rule specifies the target media types (separated by commas) of a set of types (separated by commas) of a set of statements (delimited by curly braces)statements (delimited by curly braces)

<LINK REL="stylesheet" TYPE="text/css" MEDIA= <LINK REL="stylesheet" TYPE="text/css" MEDIA= "screen, print" HREF="foo.css">"screen, print" HREF="foo.css">

@media print { body { font-size: 10pt }}@media print { body { font-size: 10pt }}

@media screen { body { font-size: 13px }}@media screen { body { font-size: 13px }}

@media screen, print { body { line-height: 1.2 }}@media screen, print { body { line-height: 1.2 }}

21

Box ModelBox Model

Each box has a content area (e.g., Each box has a content area (e.g., text, an image, etc.) and optional text, an image, etc.) and optional surrounding padding, border, and surrounding padding, border, and margin areasmargin areas

The size of each area is specified by The size of each area is specified by its propertiesits properties

22

Box ModelBox 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 PropertiesMargin Properties If there are four values, they apply to the top, right, If there are four values, they apply to the top, right,

bottom, and left, respectively.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 = body { margin: 1em 2em } /* top & bottom = 1em, right & left =

2em */2em */body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em,

left=2em */left=2em */

The last rule of the example above is equivalent to the The last rule of the example above is equivalent to the example below: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 PropertiesPadding Properties Similar to Margin, if there are four values, they Similar to Margin, if there are four values, they

apply to the top, right, bottom, and left, apply to the top, right, bottom, and left, respectively.respectively.

h1 { h1 { background: white; background: white; padding: 1em 2em;padding: 1em 2em;} }

The example above specifies a '1em' vertical The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the the element's font size: '1em' is equal to the size of the font in use. size of the font in use.

25

BorderBorder

Border can be defined like this:Border can be defined like this:.title .title {{

borderborder:: 1px solid #AAAAFF 1px solid #AAAAFF;;

}}

1px : border width1px : border width solid : border style solid : border style

Others such as dotted, thin and Others such as dotted, thin and many othersmany others

26

Visual ModelVisual Model

Consider the following examples:Consider the following examples:

p { display: p { display: blockblock } }

<p>Another text</p><p>Another text</p>

<div><div>

Some textSome text

<p>More text</p><p>More text</p>

</div> </div>

What happens if we set to display: What happens if we set to display: inline?inline?

27

Positioning SchemesPositioning Schemes

A box may be laid out according to three A box may be laid out according to three positioning schemes:positioning schemes: NormalNormal flow flow FloatsFloats: a box is first laid out according to the : a box is first laid out according to the

normal flow, then taken out of the flow and normal flow, then taken out of the flow and shifted to the left or right as far as possible. shifted to the left or right as far as possible. Content may flow along the side of a float.Content may flow along the side of a float.

AbsoluteAbsolute positioning: In the absolute positioning: In the absolute positioning model, a box is removed from the positioning model, a box is removed from the normal flow entirely (it has no impact on later normal flow entirely (it has no impact on later siblings) and assigned a position with respect to siblings) and assigned a position with respect to a containing block.a containing block.

28

PositionPosition Value:Value:

static, absolute, relative, or fixedstatic, absolute, relative, or fixed Box offsets: Box offsets:

top, right, bottom, or lefttop, 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;

}}

1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

Documents

Transcript of 1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.