1. CSS Cascading Style Sheets By Garrett Garman

2. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility

3. CSS What are styles or tags? Styles are formatting characteristics that are assigned to a document. About styles : Proposed in 1994 (before Netscape) XSL for XML and XHTML Versions of CCS1, CSS2, (CSS3 …coming soon ) Why are they call Cascading Style Sheets Multiple styles are called sheets Cascading refers to inheritance of properties

4. CSS CSS is not fully supported by all browsers check compatibility http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ test code in multiple browsers Validate your CSS and HTML W3C CSS and HTML validators at http://www.w3.org/http://www.w3.org/ Web Design Groups CSS and HTML validators at http://www.htmlhelp.com/tools/

5. CSS Three types of Style Sheets 1.Inline styles 2.Embedded styles 3.Imported & Linked styles

6. Inline styles Inline style example This code produces Inline style example How do I know what attributes I can use? http://www.w3.org/TR/html4/index/attributes.html

7. Embedded styles tag { property : value ;... ; }

8. Embedded styles body { color: black; background: gray; font-family: Arial, sans-serif; } h1 { color: #FC0000; background: #306000; font-family: Times, Helvetica } h2 { color: yellow; background: blue; border-width: 5px; border-color: yellow; border-style: solid; } H1 tag text H2 tag text Body text

9. Importing styles @import url(sample.css);

10. Importing styles /* style sheets file */ /* text file saved as.css */ tag { property : value ;... ; } tag, tag { property : value ;... ; }

11. Linking styles

12. Linking styles File same as importing What’s the difference between importing and linking. Importing must occur between or in a.css file Linking you can use multiple links with the same title and create on large style sheet

13. Media attribute tag { property : value ;... ; } screen (the default value), for presentation on non-paged computer screens print, for output to a printer projection, for projected presentations etc...

14. Contextual selectors tag tag... { property : value ;... ; } for all links inside a paragraph will be formatted as follows p a { font-size: 8pt; color: red; } This tag allows you to format for specific situations This is different from group which there are commas between the tags

15. ID attribute ID is used to define a unique style for an element Is appropriate for style that are applied once #name { property : value;... } ID example

16. Class attribute Can be used multiple times and used to format similar or dissimilar elements.name { property : value ;... ; } tag.name { property : value ;... ; } Class example

17. Class attribute.punk { font-weight : bold ; } p.cool { font-family : Times ; font-size: 10pt; } Class example Some text

18. Inheritance Inheritance means that a tag inside other tag inherit the properties of the outer tag The order of inheritance 1.Inline styles 2.Embedded styles 3.Import styles 4.Link styles

19. CSS Any Questions?