Bài giảng Web technologies and e-Services - Bài 3: CSS - Trường Đại học Bách khoa Hà Nội

CSS

1

Content

Basic CSS

Advanced CSS

Basic CSS

3

Content vs. Presentation

• Most HTML tags define content type, independent

of presentation.

• exceptions? (e.g. <b> …… </b> for bold text and <i>

….. </i> for italicized text)

• Style sheets associate presentation formats with

HTML elements.

• CSS1: developed in 1996 by W3C

• CSS2: released in 1998, but still not fully supported by

all browsers

• CSS3: specification still under development by the W3C,

“completely backwards compatible with CSS2”

(according to the W3C)

• The trend has been towards an increasing

separation of the content of webpages from the

presentation of them.

Content vs. Presentation (cont.)

• Style sheets can be used to specify how tables should be rendered, how lists

should be presented, what colors should be used on the webpage, what fonts

should be used and how big/small they are, etc.

• HTML style sheets are known as Cascading Style Sheets, since can be defined

at three different levels

1. inline style sheets apply to the content of a single HTML element

2. document style sheets apply to the whole BODY of a document

3. external style sheets can be linked and applied to numerous documents, might also specify how things

should be presented on screen or in print lower-level style sheets can override higher-level style sheets

• User-defined style sheets can also be used to override the specifications of the

webpage designer. These might be used, say, to make text larger (e.g. for

visually-impaired users).

5

Inline Style Sheets

•Using the style attribute, you can specify

presentation style for a single HTML element

<html>

<!–- CS443 page17.html 17.10.14 -->

• within tag, list sequence of property:value pairs

separated by semi-colons

<head>

<title>Inline Style Sheets</title>

</head>

font-family:Courier,monospace

font-style:italic

<body>

<p style="font-family:Arial,sans-serif;

text-align:right">This is a

right-justified paragraph in a sans serif

font (preferably Arial), with some

<span style="color:green">green text</span>.

</p>

font-weight:bold

font-size:12pt font-size:large font-size:larger

color:red color:#000080

background-color:white

<p>And <a style="color:red;

text-decoration:none;

font-size:larger;"

href="page01.html">here</a>

is a formatted link.

</p>

text-decoration:underline

text-decoration:none

text-align:left

text-align:center

text-align:justify

text-align:right

vertical-align:top vertical-align:middle

vertical-align:bottom

</body>

</html>

view page

text-indent:5em text-indent:0.2in

Inline Style Sheets (cont.)

<html>

<!–- CS443 page18.html 17.09.09 -->

•more style properties &

values

<head>

<title>Inline Style Sheets</title>

</head>

margin-left:0.1in

margin:3em

margin-right:5%

<body>

<p>Here is an image

<img src="VictoriaBldg.jpeg"

alt="image of Victoria Building"

style="margin-left:0.3in;

margin-right:0.3in;

vertical-align:middle;

border-style:double;

border-color:blue" />

embedded in text.

padding-top:0.1in

padding:3em

padding-bottom:5%

border-width:thin

border-width:5

border-color:red

border-width:thick

</p>

border-style:dashed border-style:dotted

border-style:double border-style:none

<li> one thing</li>

<li> or another</li>

<ul style="list-style-type:square;

whitespace:pre">

whitespace:pre

<li> or

</ul>

</ol>

that</li>

list-style-type:square

list-style-type:decimal

list-style-type:lower-alpha

list-style-type:upper-roman

</body>

</html>

view page

Inline Style Sheets (cont.)

<html>

<!–- CS443 page19.html 17.10.14 -->

<head>

<title> Inline Style Sheets </title>

</head>

•style sheets can be

applied to tables for

interesting effects

<body>

<caption style="color:red;

font-style:italic;

text-decoration:underline">

Student data. </caption>

</tr>

<tr>

<td> Chris Smith </td> <td> 19 </td>

</tr>

<tr>

<td> Pat Jones </td> <td> 20 </td>

</tr>

<tr>

<td> Doogie Howser </td> <td> 9 </td>

</tr>

</table>

</body>

</html>

view page

Document Style Sheets

• Inline style sheets apply to individual elements in the page.

• using inline style directives can lead to inconsistencies, as similar elements are

formatted differently

• e.g., we might like for all <h1> elements to be centered

• inline definitions mix content & presentation

violates the general philosophy of HTML

• As a general rule, inline style sheet directives should be used as sparingly as

posible

• Alternatively, document style sheets allow for a cleaner separation of content and

presentation.

• style definitions are placed in the <head> of the page (within STYLE tags)

• can apply to all elements, or a subclass of elements, throughout the page.

Document Style Sheets

<html>

•document style sheets ensure that similar

elements are formatted similarly

• can even define subclasses of elements and

specify formatting

<!–- CS443 page20.html 17.10.14 -->

<head>

<title>Document Style Sheets</title>

h1 {color:blue;

text-align:center}

p.indented {text-indent:0.2in}

</style>

</head>

p.indented defines subclass of paragraphs

• inherits all defaults of <p>

<body>

<h1> Centered Title </h1>

• adds new features

<p class="indented">This paragraph will have

the first line indented, but subsequent lines

will be flush. </p>

to specify this newly defined class, place

class="ID" attribute in tag

<p>This paragraph will not be indented.

</p>

</body>

</html>

•note how "clean" the <body> element is

view page

Document Style Sheets (cont.)

<html>

•document style sheets are especially

<!–- CS443 page21.html 17.10.14 -->

useful in formatting tables

<head>

<title> Inline Style Sheets </title>

table {font-family:Arial,sans-serif}

caption {color:red;

font-style:italic;

text-decoration:underline}

th {background-color:red}

</style>

•effectively separates content from

presentation

• what if you wanted to right-justify the

</head>

column of numbers?

<body>

<table>

• what if you changed your mind?

<caption> Student data. </caption>

<tr><td> Chris Smith </td>

<tr><td> Pat Jones </td>

<tr><td> Doogie Howser </td> <td> 9 </td></tr>

</table>

</body>

</html>

view page

Pseudo-Class

<html>

•Pseudo-class is used to define a special state of

<!–- CS443 page23.html 17.10.14 -->

an element.

<head>

<title>Title for Page</title>

a {color : red;

•Style an element when users mouses over it

•Style visited and unvisited links differently

•Style an element when it gets focus

text-decoration : none;

font-size : larger}

a:visited {color : black}

a:active {color : orange}

a:hover {color : blue}

p::first-letter {font-size : large;

color : white;

background-color : darkblue}

</style>

</head>

<body>

<p> Welcome to my Web page. I am so

happy you are here.

</p>

<p> Be sure to visit

for late-breaking news.

</p>

</body>

</html>

view page

Pseudo-Element

<html>

<!–- CS443 page23.html 17.10.14 -->

• Pseudo-element is used to

style specified parts of an

element.

<head>

<title>Title for Page</title>

a {color : red;

text-decoration : none;

font-size : larger}

a:visited {color : black}

a:active {color : orange}

a:hover {color : blue}

p::first-letter {font-size : large;

color : white;

• Style the first letter, or line, of

an element

• Insert content before, or after,

the content of an element

background-color : darkblue}

</style>

</head>

<body>

<p> Welcome to my Web page. I am so

happy you are here.

</p>

<p> Be sure to visit

for late-breaking news.

</p>

</body>

</html>

view page

External Style Sheets

• modularity is key to the development and reuse of software

• design/implement/test useful routines and classes

• package and make available for reuse

• saves in development cost & time

• central libraries make it possible to make a single change and propagate

the changes

• external style sheets place the style definitions in separate files

• multiple pages can link to the same style sheet, consistent look across a

site

• possible to make a single change and propagate automatically

• represents the ultimate in content/representation separation

Modularity & Style Sheets

<html>

/* myStyle.css CS443 02.09.05 */

<!–- CS443 page26.html 17.10.14 -->

h1 {color : blue; text-align : center}

p.indented {text-indent:0.2in}

<head>

<title>Title for Page</title>

type="text/css"

href="myStyle.css"

title="myStyle“ />

</head>

•Ideally, the developer(s) of a Web

site would place all formatting

options in an external style sheet.

<body>

<h1>Centered Title</h1>

•All Web pages link to that same

style sheet for a uniform look.

<p class="indented">This paragraph will

have the first line indented, but subsequent

lines will be flush.</p>

<p>This paragraph will not be indented.

</p>

• simplifies Web pages since only need to

specify structure/content tags

</body>

</html>

• Note: no <style> tags are used in the

external style sheet

view page

<div> and <span> Tags

• Problem: font properties apply to whole elements, which are often too large

• Solution: a new tag to define an element in the content of a larger element - <span>

• The default meaning of <span> is to leave the content as it is (i.e. unchanged)

▪ Use <span> to apply a document style sheet definition to its content

.bigred {font-size: 24pt;

font-family: Ariel; color: red}

</style>

▪ The <span> tag is

similar to other HTML tags,

they can be nested and

they have id and class

attributes

... ...

best time </span> ever!

</p>

view page

▪ Another tag that is useful for style specifications: <div>

Used to create document sections (or divisions) for which style can be specified

e.g., a section of five paragraphs for which you want some particular style

Advaned CSS

17

Rounded Corners

• With the CSS border-radius property, you can give any element “rounded corners”.

Ø Rounded corners for an element with a specified background color:

#rcorners1 {

border-radius: 25px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

18

Rounded Corners

• With the CSS border-radius property, you can give any element “rounded corners”.

Ø Rounded corners for an element with a border:

#rcorners2 {

border-radius: 25px;

border: 2px solid #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

19

Rounded Corners

• With the CSS border-radius property, you can give any element “rounded corners”.

Ø Rounded corners for an element with a background image:

#rcorners3 {

border-radius: 25px;

background: url(paper.gif);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

20