CSS Cascading Style Sheets By Garrett Garman

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

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

CSS CSS is not fully supported by all browsers check compatibility test code in multiple browsers Validate your CSS and HTML W3C CSS and HTML validators at Web Design Groups CSS and HTML validators at

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

Inline styles Inline style example This code produces Inline style example How do I know what attributes I can use?

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

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

Importing url(sample.css);

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

Linking styles

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

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...

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

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

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

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

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

CSS Any Questions?