Cascading Style Sheets © 2004 D. J. Foreman
Purpose Consistency of formatting Modify tags Ease of formatting "Layers" within a document © 2004, D. J. Foreman
3 types of styles In-line Embedded or Global Linked or External 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 © 2004, D. J. Foreman
Syntax rules TAG {attributes} values may be merged Attribute : value ; ; not needed after last attribute values may be merged Separated by blanks values may contain choices Separated by commas © 2004, D. J. Foreman
Example of an Inline Style <B style="color: red; font-size:120%"> Changes only this one tag Note use of : ; style used as an attribute in the TAG, so quotes required here No { } for inline styles © 2004, D. J. Foreman
Example of an Embedded Style <style type='text/css'> 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%} </style> NOTE: no quotes inside { } © 2004, D. J. Foreman
Example of External Style H1, B {color: red; font-size: 110%} Note: no <STYLE> tags required here The Style file "mystyle.css" <link href="mystyle.css" rel="stylesheet" type="text/css"> <body> <b>this bold text will be red & 110%</b> </body> The Web Page file Type= specifies the language used for the styles © 2004, D. J. Foreman
Generic Font-family Names Serif Sans-serif Monospace Cursive Fantasy © 2004, 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} © 2004, D. J. Foreman
Font-size Length 0.5in, 20px, 36pt Keyword xx-small, x-small, Percent 105% Relative 2em, 5ex Example: H1 {font-size: xx-large} © 2004, D. J. Foreman
Inheritance BODY {color: blue} H1, H2 {font-size: 115%} B {color: red} <B> tags will override body color value Note: <style> tags needed if this is an embedded style © 2004, 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 © 2004, D. J. Foreman
Anchor-tag Attributes A:visited {styles} A:link {styles} A:active {styles} A:hover {styles} © 2004, 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 © 2004, 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 © 2004, D. J. Foreman
Style Classes Classes allow re-use of a style Two steps: Define a style class Use the class in the HTML © 2004, D. J. Foreman
Classes (2 types) Bound Syntax: tag.classname {styles} Style definition: H1.myheader {color:red} Usage: <H1 class='myheader'> text</H1> Unbound Syntax: .classname {styles} Style definition: .myreds {color:red;} Usage: <H1 class='myreds'>text</H1> <B class='myreds'>text</B> © 2004, D. J. Foreman
DIV & SPAN <DIV ID='name' or CLASS='name'> assigns a NAME to an enclosed block: <P>, <BLOCKQUOTE>, <Hn>, <OL>, <UL>, <BODY>, <IMG> </DIV> Designed for single-use <SPAN ID='name' or CLASS='name'> for non-block elements: <B>, etc © 2004, D. J. Foreman
Layer Definitions <STYLE> #layer1 {position:absolute; top:400px; left:10px; } #layer2 { etc. } </STYLE> (note: "#" for an ID vs a period for a class) © 2004, D. J. Foreman
Layer Usage <DIV ID="layer1"> • note: no # here • but it IS on the definition </DIV> © 2004, D. J. Foreman
Examples .grn {color: green; font-size: 20px;} #lyr {position: 10px} <body> <span class='grn'> green text </span> <span id='lyr'>a layer</span> <span class='grn' id='lyr'>green layer</span> </body> Note: cannot use #'s 2 and 3 in same page (ID's are for 1-time use per page) © 2004, D. J. Foreman