Bài giảng Web technologies and e-Services - Bài 6: CSS

Web Development

Chapter 6. CSS

1

Before and after using CSS

2

1

login.html

u …

u <link rel="stylesheet" type="text/css" href=“style.css">

u …

u <table class="forumline" width="280" border="0"

cellspacing="1" cellpadding="2">

u <tr class="formstyle"><td>

style.css

….

body

{

font-family: Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;

font-size: 12px; …

}

.formstyle

{

background-color: #D7E5F5;

font-family: Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;

font-size: 12px;

}

.forumline

{

background-color: …

} …

3

Content

1. Introduction to CSS

2. Specifying and applying style rules

3. Style class

4. Some useful properties

5. CSS box model

4

2

1. Introduction to CSS

u Cascading Style Sheet

u Created by Hakon Wium Lie of MIT in

1994

u Has become the W3C standard for

controlling visual presentation of web

pages

5

1.1. Benefits of CSS

u Simple syntax: easy to learn

u Powerful and flexible way to specify the

formatting of HTML elements

– Can define font, size, background color,

background image, margins, etc

u Separates presentation (design elements)

from content (structural logic)

– HTML contains content and structure of a web

page.

– CSS defines a style of a web page – how the

content is displayed

6

3

1.1. Benefits of CSS (2)

u Share style sheets across multiple

documents or entire Web site

– Easy to maintain consistent pages

– Can update a common style à Reflected in all

pages that use it

u Cost Savings

– Reduced Bandwidth Costs

u One style sheet called and cached

u CSS require less code

– Higher Search Engine Rankings

u Cleaner code is easier for search engines to index

u Greater density of indexable content

7

1.2. CSS Basics

u CSS defines the way that HTML

elements should be presented:

–Positioning (e.g. left, right or centered)

–Font (size and family)

–Text decoration (e.g. underlined)

–Borders (solid, dashed, invisible)

–Image usage (e.g. for backgrounds and

bullets)

8

4

1.3. CSS Does Not…

u Re-order HTML

– E.g. won’t sort a table

u Perform calculations

– Won’t sum a shopping basket

u Filter

– Won’t decide what to show

– Though JavaScript can set display or visibility

of elements in order to achieve this

u These can all be done on the server

– Or using XSLT or JavaScript on the client

9

1.4. Types of CSS Styles

u (Browser default)

u External styles

– written in a separate document and then attached to

various Web documents

– External style sheets can affect any document they are

attached to

u Internal styles (embedded styles)

– embedded in the head of the document.

– embedded styles affect only the tags on the page they

are embedded in

u Inline Style

– written directly in the tag on the document

10

5

Content

1. Introduction to CSS

2. Specifying and applying style rules

3. Style class

4. Some useful properties

5. CSS box model

11

2.1. Specifying Style Rules

u General form of rule

selector { property: value }

Or

selector { property1: value1;

property2: value2;

...

propertyN: valueN }

u Example

H1 { text-align: center;

color: blue }

12

6

2.1. Specifying Style Rules (2)

u The selector is the link between the HTML

document and the style. It specifies what

elements are affected by the declaration.

u The declaration is that part of the rule that

sets forth what the effect will be

13

2.1. Specifying Style Rules (3)

u Grouping selectors and rules

H1 { font-weight: bold }

H2 { font-weight: bold }

H3 { font-weight: bold }

àH1, H2, H3 { font-weight: bold }

àWhat is different?

b i{background-color:yellow;}

b,i{color:blue;}

u A selector may have more than one

declaration

H1 { color: green }

H1 { text-align: center }

14

7

2.2. Applying styles to the

document

u Inline style

– Apply a style sheet to an individual element

using the style attribute

u Embedded style

– Apply the basic, document-wide style sheet for

the document by using the style element

u External style

– Link an external style sheet to the document

using the link element or

– Import a style sheet using the CSS @import

notation.

15

2.2.1. Inline style

u Using Style attribute

u For individual elements

A large purple Heading

</H1>

16

8

2.2.2. Embedded style

u Using Style element

u Putting the style sheet inside a style element at

the top of your document

<HTML>

<STYLE> H1, H2 { color: green } </STYLE>

</HEAD>

<BODY>

<P>Johann Sebastian Bach was a prolific composer. Among his

works are: <UL> <LI>the Goldberg Variations

<LI>the Brandenburg Concertos

<LI>the Christmas Oratorio </UL>

<H2>Historical perspective</H2>

<P>Bach composed in what has been referred to as the Baroque

period.

</BODY>

</HTML>

17

2.2.2. Embedded style (2)

<!––

H1, H2 { color: green }

-->

</STYLE>

18

9

Tree structures and inheritance

u Just as children inherit from their parents,

HTML elements inherit stylistic properties.

u CSS property values set on one element

will be transferred down the tree to its

descendants

BODY { color: green }

</STYLE>

19

Overriding inheritance

u Sometimes children don't look like

their parents.

u E.g.

BODY { color: green }

H1 { color: navy }

</STYLE>

20

10

2.2.3. External style

u Using Link element

u This is true “separation” of style and content.

u Keeping all your styles in an external document is simpler

<HEAD>

</HEAD>

/* mystyles.css - a simple style sheet */

body {

margin-left: 10%;

margin-right: 10%;

color: black;

background: white;

}

21

Content

1. Introduction to CSS

2. Specifying and applying style rules

3. Style class

4. Some useful properties

5. CSS box model

22

11

3.1. Element Style Classes

u Proceed the HTML element by a period and a class

name

// Define an "abstract" paragraph type

P.abstract { margin-left: 0.5in;

margin-right: 0.5in;

font-style: italic }

u To use, supply the name of the style class in the

CLASS attribute of the HTML element

<H1>New Advances in Physics</H1>

This paper gives the solution to three previously

unsolved problems: turning lead into gold,

antigravity, and a practical perpetual motion machine.

23

3.2. Global Style Classes

u omit the element name

// Style available to all elements

.blue { color: blue; font-weight: bold }

u To use, simple specify the style class in

the CLASS attribute of the HTML element

<H2 CLASS="blue">A Blue Heading</H2>

This text is in the default color, but

24

12

3.3. Styles through User-Defined IDs

u An ID is like a class but can be applied

only once in a document

<HEAD>

<!--

#foo { color: red }

-->

</STYLE>

</HEAD>

<BODY>

...

...

25

</BODY>

25

Content

1. Introduction to CSS

2. Specifying and applying style rules

3. Style class

4. Some useful properties

5. CSS box model

26

13

4.1. Useful Font Properties

u font-weight

– Relative weight (boldness) of font

– normal | lighter | bold | bolder | 100 | 200 | ... | 900

H1 { font-weight : 200 }

H2 { font-weight : bolder }

u font-style

– Font face type within a family

– normal | italic | oblique

P { font-style : normal }

TH { font-sytle : italic }

27

4.1. Useful Font Properties (2)

u font-size

– Either relative or absolute size of font

– pt, pc, in, cm, mm | em, ex, px, % | xx-large | x-large |

larger

STRONG { font-size: 150% }

P { font-size: 14pt }

P { font-size: xx-large }

u font-family

– Typeface family for the font

H1 { font-family: Arial }

28

14

4.2. Useful Text Properties

u text-decoration

– Describes text additions or “decorations” that are added to the

text of an element

– none | underline | overline | line-through | blink

– E.g. P { text-decoration: underline }

u vertical-align

– Determines how elements are positioned vertically

text-bottom | %

u text-align

– Determines how paragraphs are positioned horizontally

– left | right | center | justify

29

4.2. Useful Text Properties (2)

u text-indent

– Specifies the indentation of the first line of the

paragraph

– +/– pt, pc, in, cm, mm | +/– em, ex, px, %

– E.g. P { text-indent: -25px } /* Hanging indent */

u line-height

– Specifies the distance between two

consecutive baselines in a paragraph

– normal | number | pt, pc, in, cm, mm | em, ex, px, %

.double { line-height: 200% }

.triple { line-height: 3 } /* 3x the font size */

DIV { line-height: 1.5em }

30

15

4.3. Useful Foreground and

Background Properties

u color

– Color of the text or foreground color

– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) |

rgb(rrr%, ggg%, bbb%)

P { color : blue }

H1 { color : #00AABB }

H3 { color : rgb(255, 0, 0 ) } /* red */

u background-image

– Specifies an image to use as the background of region

– none | url(filename)

H2 { background-image: url(Bluedrop.gif);}

31

4.3. Useful Foreground and

Background Properties (2)

u background-repeat

– Specifies how to tile the image in the region

– repeat | repeat-x | repeat-y | norepeat

BODY {

background-image: url(Bluedot.gif);

background-repeat: repeat-x;

}

u background

– Lets you combine properties in a single entry

P { background: url(wallpaper.jpg) repeat-x }

32

16

Content

1. Introduction to CSS

2. Specifying and applying style rules

3. Style class

4. Some useful properties

5. CSS box model

33

5. CSS Box Model

u Each HTML element have the rectangular “box”

u Each box has a content area and optional

surrounding padding, border and margin area

Top

Margin

Border

Padding

Right

Content (Text/Image)

Left

Bottom

34

17

CSS Box Model - example

div#boxtest {

background-color: red; color: white;

padding: 1em;

border: 1em solid green;

Top

margin: 1em;

Margin

Border

}

Padding

Right

Content (Text/Image)

Left

Bottom

35

CSS Box Model - color

u Padding - same as the element’s

background-color

u Border - may have its own color (border-

color property)

u Margin - always transparent

(same as its ancestor's background-color)

Margin

Border

Padding

Content (Text/Image)

36

18

CSS Box Model - edge sizes

u Inner edge (Black line): Content itself or CSS width

and height property may define the size

u Padding edge (Pink): IE + padding width

u Border edge (Brown): PE + border width

u Outer (margin) edge (Dotted): BE + margin width

37

CSS Box Model – width (1)

u margin, padding, border-width

– Define the width for all directions at once

u margin-top, padding-top, border-top-width

– Define the width for each specific direction

– top, right, left, bottom

Top

Margin

Border

Padding

Content

(Text/Image)

Right

Left

Bottom

38

19

CSS Box Model – width (2)

u Effective values for box width

u <length> - e.g. 10pt, 3px, 1.2em

– Effective for border, padding, margin

u <percentage> - e.g. 10%

– Effective only for padding, margin

– Calculated with respect to the width of the

generated box’s containing block

u Thin, medium, thick

– Effective only for border

39

Border properties

u border-width or border-top-width (top, right, left,

bottom)

– Specify the line width

u border-color or border-top-color (top, right, left,

bottom)

– Specify the line color by the color name or RGB values

u border-style or border-top-style (top, right, left,

bottom)

– Specify the line style of box’s border

– Values: solid, dotted, dashed, double, groove, ridge, inset,

outset, hidden

– Special value “none” means width 0

u border or border-top (top, right, left, bottom)

– shorthand property for setting the width, style, and color

– e.g. “border: 1em solid black;”

40

20

Bài giảng Web technologies and e-Services - Bài 6: CSS - Nguyễn Bình Minh