Lecture Web technologies and programming – Lecture 12: Introduction to Cascading Style-sheets (CSS) - TRƯỜNG CÁN BỘ QUẢN LÝ GIÁO DỤC THÀNH PHỐ HỒ CHÍ MINH

style sheet language that describes the presentation style of an HTML Page. • It describes how HTML elements must[r]

2

• New attributes to existing form elements

• The required attribute

• The placeholder attribute

• The pattern attribute ( Writing Regular Expression)

• The disabled attribute

• The read only attribute

• The autocomplete attribute

• New form elements in HTML5

• New form elements in HTML5

• The datalist element

• Email element

• Date element

• Number element

• Color element

• XHTML is the strict form of HTML

• Understand the basics of CSS

(Cascading Style Sheets)

• Understand the differences among

inline, internal and external style sheets

• Understand the difference between ids and classes.

• Understand how to declare a style.

6

• CSS is a stylesheet language that describes the presentation of an HTML

• CSS describes how elements must be

other media.

• Created by Hakon Lie of MIT in 1994

• Has become the W3C standard for

pages

• Cascading style-sheets are powerful

document

• Enforce standards and uniformity

• Create dynamic effects

• Works by allowing you to specify rules8

• All web pages can be broken down

into bucketed content areas

• We can change the presentation styles

of these areas.

• We can update these areas by

changing the code on every page

-• We can use cascading style sheets!

• CSS ( Cascading Style Sheets ) is a

style sheet language that describes

• It describes how HTML elements must

be rendered/displayed on screen

10

• CSS 1 - Released in 1996

– Spotty Netscape 4.x support

• Netscape pushed their own style sheet language

– IE 4.x was fully CSS1 compliant

– Result: if you have users using Netscape 4.x then use CSSes with care!

• Always test with both browsers!

– Limitations of CSS1

• Has almost no support for tables

• Makes no provision for downloadable fonts

11

• CSS 2

– Released in 1998

– Extends CSS1

– IE 5.x+ supports most, but not all CSS2

features

– Netscape 6.x claims “unsurpassed support”

for CSS1 and CSS2

– Mozilla 1.x is generally considered to have

the best CSS support

12

• CSS 3

2012.

CSS1.

modules.

some old CSS tags has been removed in this version.

like Google Chrome, Internet Explorer 11

13

• Separation of document from

presentation.

• Saves time.

• Consistency

• Easy to change.

• Keep consistency.

• Rich Design and Layout

• Give you more control over layout.

• Accessibility.

• Use styles with JavaScript.

• Make it easy to create a common format for all the Web pages.

14

• The only disadvantage that can be

assigned to CSS is non-compatibility

with all internet browsers

• Surveys says that today 85% of users are able to see pages that use CSS,

while the others are not

• The general syntax is:

– selector {property: value}

– or

– selector, , selector {

property: value;

.

property: value

}

• where

selector is case-sensitive if and only if the document language is

case-sensitive)

appearance of that tag

optional

after the last pair is optional

quotes around the value

16

• CSS syntax is very simple it’s just a file containing a list of selectors (to choose tags) and descriptors (to tell what to do with them):

– Example: h1 {color: green; font-family: Verdana}

says that everything included in h1 (HTML heading level 1) tags should be in the Verdana font and colored green

selector/descriptor pairs

– Selectors may be simple HTML tags or XML tags, but CSS also defines some ways

to combine tags

– Descriptors are defined in CSS itself, and

17

• /* This is a comment */

• h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */

• p, table, li, address { /* apply to all these tags */

font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */

}

• p, li, th, td {font-size: 80%;} /* 80% of size in containing element */

• th {background-color:#FAEBD7} /* colors can be specified in hex */

• body { background-color: #ffffff;}

• h1,h2,h3,hr {color:brown;} /* adds to what we said before */

• a:link {color:darkred} /* an unvisited link */

• a:visited {color:darkred} /* a link that has been visited */

• a:active {color:red} /* a link now being visited */

• a:hover {color:red} /* when the mouse hovers over it */18

• In-line styles

• Embedded/internal styles

• External style sheet

• Inline styles

– Add styles to each tag within the

HTML file

– Use it when you need to format just

– <h1 style=“color:red; font-family: