Cascading Style Sheets Objective: Create an external style sheet, embedded style sheet, and an inline style to change the look and feel of a web site.
What is CSS? A way to manage the look and feel (or style) of the web site separate from the HTML structure
What Does Cascading Mean? The term cascade is used to describe the levels of styles that can be applied to the web site. –External style file using the.css extension applied to the.htm file using the tag in the head section –Embedded style using the tag in the head section of the HTML file which overrides the external styles –Inline style used for an individual HTML tag which overrides both the external and embedded styles, ex:
What Does A Style Look Like? A style rule is composed of two parts –The selector, sometimes this is the HTML tag and sometimes it is a defined Class or ID known as the Custom Style Name –The declaration, this is like the attribute used with HTML tags but written using a property and a value separated by a colon instead of an equal sign, the property and value are enclosed with curly braces Style Example: p {color: blue} Class Example:.altstyle {color: red}
How Do I Learn The Style Rules? Style rules are like the attributes used with tags but the syntax is different so you need to consult an online CSS guide, ieClass, or the CSS classroom reference books HTML Tag Example <body bgcolor=“#DCDCDC” text=“#336699”> Style Rule Example body {background-color: #DCDCDC; color: #336699} Notice the word bgcolor is now background-color and the word text is now color
What Is The Best Thing About CSS? Say goodbye to the FONT tag Font attributes are applied to the selector in a style rule (the HTML tag or Class/ID) Example: h3 {font-family: Arial, Helvetica, sans- serif; font-size: 12pt; background-color: #006666; color: #DCDCDC}
What Are The Units of Measure Used For Text Size? There are two categories –Absolute –Relative
What Are The Units of Measure? Absolute values are fixed –pt, points have 72 per inch –pc, picas have 6 per inch –in, inches –cm, centimeters –mm, millimeters Relative values are based on an established value –px, pixels are between 72 and 90 per inch –em, emspace is the width and height of the letter M of the current font –xs, x space –%, percentage
Are There Other Measurements? Sometimes a keyword is used to specify the measurement For the property: border-width there are three possible keywords –Thin –Medium –Thick Example: Table {border-width: medium}
Assignment Complete Questions for Lesson 1 – Cascading Style Sheets in ieClass Do CSS Lab1 and Lab 2