Cascading Style Sheets
Purpose Consistency of formatting Modify tag actions Within a page Across a site Modify tag actions Ease of formatting "Layers" within a document © 2012 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 © 2012 D. J. Foreman
Syntax rules TAG {attributes} Values of an may be merged Attribute : value ; ; not needed after last attribute Values of an may be merged Separated by blanks Values may contain choices Separated by commas © 2012 D. J. Foreman
Example of an Inline Style <li 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 Note © 2012 D. J. Foreman
Example of an Embedded Style <style type='text/css'> H1, H2 {color: blue; font-family: Arial, Gigi } li {color: red; font-size:120%} LI p {color: gold; font-size:120%} </style> NOTES: the tag is “style” no quotes inside { } comma for browser choices © 2012 D. J. Foreman
Additional style/tag info <style type='text/css'> H1, H2 {color: blue; font-family: Arial, Gigi } li {color: red; font-size:120%} LI p {color: gold; font-size:120%} </style> NOTES: Comma means apply to BOTH tags Blank means apply to the 2nd when inside the 1st © 2012 D. J. Foreman
Example of External Style h1, li {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"> <ol> <li>this list-item will be red & 110%</li> </ol> The Web Page file Type= specifies the language used for the styles © 2012 D. J. Foreman
Generic Font-family Names Serif Sans-serif Monospace Cursive Fantasy © 2012 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} © 2012 D. J. Foreman
Font-size Length 0.5in, 20px, 36pt Keyword xx-small, x-small, Percent 105% Relative 2em, 5ex Example of usage: H1 {font-size: xx-large} © 2012 D. J. Foreman
Inheritance BODY {color: blue} H1, H2 {font-size: 115%} LI {color: red} <LI> tags will override default value Notes: <style> tags needed if this is an embedded style Note the “,” in H1, H2 © 2012 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 © 2012 D. J. Foreman
Anchor-tag Attributes A:visited {styles} A:link {styles} A:active {styles} A:hover {styles} © 2012 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 © 2012 D. J. Foreman
Lists UL {list-style-type: circle} UL UL {list-style-type: disk} UL UL UL {list-style-type: square} Note: no commas between UL’s list-style-position: inside or outside This is an example of “outside. Text lines up under the 1st character above. This is the default. This is an example of “inside”. Text now lines up under the bullet above. Bullet is “inside” paragraph bounds. © 2012 D. J. Foreman
Style Classes Classes allow re-use of a style Two steps: Define a style class Use the class in the HTML © 2012 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> © 2012 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> ID is designed for single-use tags (can’t have the same ID in 2 places) <SPAN ID='name' or CLASS='name'> for non-block elements: <B>, etc © 2012 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) © 2012 D. J. Foreman
Layer Usage <DIV ID="layer1"> • note: no # here • but it IS on the definition </DIV> © 2012 D. J. Foreman
Examples .grn {color: green; font-size: 20px;} #lyr {position: 10px} <body> <span class='grn'> green text </span> <div id='lyr'>a layer</div> <div id='lyr' class='grn'>green layer</div> </body> Note: cannot use these 2 div's in same page (2 different texts, same ID) © 2012 D. J. Foreman
Examples-2 .grn {color: green; font-size: 20px;} #lyr1 {position: 10px} #lyr2 {position: 40px} <body> <span class='grn'> green text </span> <div id='lyr1'>a layer</div> <div id='lyr2' class='grn'>green layer</div> </body> Note: lyr1 & lyr2 can be in same page © 2012 D. J. Foreman