1. Cascading Style Sheets
CNIT 131
Cascading Style Sheets

2. Introducing Cascading Style Sheets
Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets, or CSS, is a style sheet language used on the Web.
CSS specifications are maintained by the World Wide Web Consortium (W3C)
Three versions of CSS exist: CSS1, CSS2, and CSS3

3. Cascading Style Sheets
CSS1 introduced styles for the following document features:
Fonts
Text
Color
Backgrounds
Block-level Elements

4. Cascading Style Sheets
CSS2 introduced styles for the following document features:
Positioning
Visual Formatting
Media Types
Interfaces

5. Cascading Style Sheets
CSS3 will introduce styles for the following document features:
User Interfaces
Accessibility
Columnar layout
International Features
Mobile Devices
Scalable Vector Graphics

6. CSS Statements and Comments
selector { property: value; }
p, h2 { color: red; }
CSS Comment:
/* css comments */

7. CSS1 – font properties Font properties:
font-family: arial, verdana, 'times new roman';
font-style: normal (default)/italic;
font-weight: normal/bold/bolder/light/lighter/ ;
(100 increment with 400 as normal)
font-size: xx-small/x-small/small/medium/large/x-large/xx-large/150%/2pt/2in/6mm/2cm/3pc/em/ex;
(pt=point=1/72 inches; pc=picas=12 pt; px=pixel)
(em=horizontal size of normal m)
(ex=vertical size of normal x)

8. CSS1 – text properties Text properties:
background-color: rgb(255,0,0)/#ff0000/red;
color: rgb()/#/red;
text-decoration: none/underline/overline/line-through;
text-align: left/right/center/justify;

9. Applying a Style Sheet
Three ways to apply a style to an HTML document:
Inline Styles
Embedded Styles
External Styles

10. Using Inline Styles
Inline styles are easy to use and interpret because they are applied directly to the elements they affect.
<element style=“style1: value1; style2:
value2; style3: value3;…”>
<p style="background-color: blue;
color: white;">Paragraph 1</p>

11. Using Embedded Styles
You can embed style definitions in a document head using the following form:
<style>
style declarations
</style>
Where style declarations are the declarations of the different styles to be applied to the document.
<style type="text/css">
p { background-color: blue;
color: white; }

12. Using an External Style Sheet
Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site.
An external style sheet is a text file that contains style declarations.
It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

13. Using an External Style Sheet
Use the link element to link a Web page to an external style sheet.
<link rel="stylesheet" type="text/css" href="dir/css_external.css">
You can import the content of one style sheet into another.
<style type="text/css">
@import url(dir/css_external.css);
</style>

14. Understanding Cascading Order
You can link a single style sheet to multiple documents in your Web site by using the link element or element.
You can also link a single document to several style sheets.

15. Applying a Single Style Sheet to Multiple Documents

16. Applying Multiple Sheets to a Single Document

17. Style Precedence Inline styles (highest precedence) Embedded styles
External style sheet

18. Style Inheritance
If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance.

19. Using IDs and Classes
Use an id to distinguish something, like a paragraph, from the others in a document.
For example, to define an id called “head”:
#head { text-align: center; }
to identify a paragraph as “head”, use the code: <p id=“head”>Center Align</p>
HTML requires each id be unique– therefore an id value can only be used once in a document.

20. Classes
You can mark a group of elements with a common identifier using the class attribute.
.title { color: blue; font-style: italic; }
<h1 class="title">Header 1</h1>
<h2 class="title">Header 2</h2>

21. Applying a style to a class

22. Applying a style to a class and element

23. Hiding Elements Two different styles that allow you to hide elements:
Display style
display: inline(default)/block/none;
Visibility style
visibility: visible(default)/hidden;

24. Comparing the visibility and display styles
Visibility hidden
Object is hidden but still is part of the page flow
Display: none
Object is hidden and is removed from the page flow