© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles

CSS-2 © 2007, D. J. Foreman Purpose  Consistency of formatting  Modify tags  Ease of formatting  "Layers" within a document

CSS-3 © 2007, D. J. Foreman 3 types of styles  In-line ■ Specific to each tag-use  Embedded or Global ■ Applies to whole file  Linked or External ■ Rules saved in a separate file ■ Can apply to multiple files

CSS-4 © 2007, D. J. Foreman Syntax rules  TAG {attributes} ■ Attribute : value ; ■ ; not needed after last attribute  values may be merged ■ Separated by blanks  values may contain choices ■ Separated by commas

CSS-5 © 2007, D. J. Foreman Example of an Inline Style   Changes only this one tag  Note use of : ; ■ style used as an attribute in the TAG, so quotes required here ■ No { } for inline styles

CSS-6 © 2007, D. J. Foreman Example of an Embedded Style H1, H2 {color: blue; font-family: Arial, Sans-serif }note comma for choices B {color: red; font-size:120%} LI B {color: gold; font-size:120%}  NOTE: no quotes inside { }

CSS-7 © 2007, D. J. Foreman this bold text will be red & 110% Example of External Style H1, B {color: red; font-size: 110%} Note: no tags required here The Web Page file The Style file "mystyle.css" Type= specifies the language used for the styles

CSS-8 © 2007, D. J. Foreman Generic Font-family Names  Serif  Sans-serif  Monospace  Cursive  Fantasy

CSS-9 © 2007, D. J. Foreman Specific Font-family Names  Arial  Times Roman  Courier New  Gigi  Lucida Calligraphy  Comic Sans MS Example: H1 {font-family: times roman, arial, serif}

CSS-10 © 2007, D. J. Foreman Font-size  Length0.5in, 20px, 36pt  Keywordxx-small, x-small,  Percent105%  Relative2em, 5ex Example: H1 {font-size: xx-large}

CSS-11 © 2007, D. J. Foreman Inheritance  BODY {color: blue}  H1, H2 {font-size: 115%}  B {color: red} ■ tags will override body color value Note: tags needed if this is an embedded style

CSS-12 © 2007, D. J. Foreman Font Attributes  Font-family  serif  Font-size  3em medium larger*  Font-style  italic normal oblique  Font-weight  bold example H1 {Font: 2em italic bold arial, courier} ■ Note merging of values, followed by choices

CSS-13 © 2007, D. J. Foreman Anchor-tag Attributes  A:visited {styles}  A:link {styles}  A:active {styles}  A:hover {styles}

CSS-14 © 2007, D. J. Foreman Some Misc. Attributes  Text-indent: 10% 3em  Vertical-align: 10% -10% 3mm  Letter-spacing:.3em  Word-spacing:.4em  Line-height: 2 5mm 120% ("2" means 2*ratio of line-height/font-size)  Text-decoration:none underline

CSS-15 © 2007, D. J. Foreman Lists UL {list-style-type: circle} UL UL {list-style-type: disk} UL UL UL {list-style-type: square} list-style-position: inside or outside inside is like a hanging-indent

CSS-16 © 2007, D. J. Foreman Style Classes Classes allow re-use of a style Two steps: 1. Define a style class 2. Use the class in the HTML

CSS-17 © 2007, D. J. Foreman Classes (2 types)  Bound Syntax:tag.classname {styles} Style definition:H1.myheader {color:red} Usage: text  Unbound Syntax:.classname {styles} Style definition:.myreds {color:red;} Usage: text text

CSS-18 © 2007, D. J. Foreman DIV & SPAN assigns a NAME to an enclosed block:,,,,,, Designed for single-use for non-block elements:, etc

CSS-19 © 2007, D. J. Foreman Layer Definitions #layer1 {position:absolute; top:400px; left:10px; } #layer2 { etc. } (note: "#" for an ID vs a period for a class)

CSS-20 © 2007, D. J. Foreman Layer Usage note: no # here but it IS on the definition

CSS-21 © 2007, D. J. Foreman Examples.grn {color: green; font-size: 20px;} #lyr {position: 10px} green text a layer green layer Note: cannot use these 2 div's in same page (2 different texts, same layername)