Cascading Style Sheets CS3505

What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order of priority- local, author style sheet, user style sheet, user browser New tag Ref: Deitel chapter 6, Greenlaw tutorial.html

CSS Types Inline Imbedded External User global definition for tags in this document applies here … global definition for tags in this document

Inline Styles Html tag’s can have style attributes Format style applies here Example: This text has the font- size and color styles applied to it, making it 20pt. and blue. Inline Page Example

Embedded Style Sheets Requires style rules in to add styles to html tags appearing in Format: tag {property: value;…property: value} … tag tag {property: value;…property: value}.classname {property: value;…property: value} #IdName {property: value;…property: value}

Definition in application in tag {property: value;…property: value} … tag1 tag2 {property: value;…property: value}.classname {property: value;…property: value} tag style applies here nested applies here doesn’t class definition applies here

Embedded Style Sheets Example Example a.nodec { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc }.special { color: green} li em { color: red; font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } Shopping list for Monday : Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Pizza with mushrooms Go to the Grocery store

Style Rules Comments a.nodec defines a class applied to tags only a:hover syntax for styles applied to hover pseudo-class.special defines a class li em applies rule to nested tag occurrences (see Monday vs with mushrooms) Li,emcomma applies rule to both tags

Pseudo Classes and Elements Anchor Pseudo-classes –a:link{color:#ff0000} –a:visited{color:#00ff00} –a:hover{color:#0000ff} –a:active{color:#00ffff} Pseudo Elements –p:first-letter {font-size: 24pt} –p:first-line {color: #00ffff}

and *often used in Front page to organize HTML Span is an inline element like or Format … applies here Div is a block element and applies to a region of html which may contain and tags Format … …applies to HTML blocks and paragraphs here

and ID divisions Identify a specific DIV or SPAN segment by using the ID mechanism (see more_embedded.html) Define #IDname { Attributes} Use … applies here Example #svp94O { color: red; font-weight: bold}… Text using ID to identify this Red bold H4 line

External style sheets Define rules in one file and link them into one or many files Maintains a consistent style over complex webs that are easy to maintain and reuse. Example of external reference: Style definition file Html fileStyle definition file Html file

User Style Sheet Define styles you want the browser to use locally Tell your browser to use a local style sheet click tools->internet options->accessibility enter user style sheet path name Allows a local user to define colors, fonts, and sizes more easily readable

Style Properties How to find a list of properties which can be modified and the values associated with them Defining document –Cascading Style Sheets, level 1 W3C Recommendation 17 Dec 1996 – –Table of contents has a good list –A Good site for properties definitions

Sample Properties List 4 Formatting model 4.1 Block-level elements Vertical formatting Horizontal formatting List-item elements Floating elements 4.2 Inline elements 4.3 Replaced elements 4.4 The height of lines 4.5 The canvas 4.6 'BR' elements 5 CSS1 properties 5.1 Notation for property values 5.2 Font properties Font matching 'font-family' 'font-style' 'font-variant' 'font-weight' 'font-size' 'font' 5.3 Color and background properties 'color' 'background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position' 'background' 5.4 Text properties 'word-spacing' 'letter-spacing' 'text-decoration' 'vertical-align' 'text-transform' 'text-align' 'text-indent' 'line-height' 5.5 Box properties 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 'margin' 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'padding' 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' 'border-width' 'border-color' 'border-style' 'border-top' 'border-right' 'border-bottom' 'border-left' 'border' 'width' 'height' 'float' 'clear' 5.6 Classification properties 'display' 'white-space' 'list-style-type' 'list-style-image' 'list-style-position' 'list-style'