Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets

Similar presentations


Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

1 Cascading Style Sheets
© 2004 D. J. Foreman

2 Purpose Consistency of formatting Modify tags Ease of formatting
"Layers" within a document © 2004, D. J. Foreman

3 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

4 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

5 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

6 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

7 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

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

9 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

10 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

11 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

12 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

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

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

15 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

16 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

17 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

18 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

19 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

20 Layer Usage <DIV ID="layer1"> • note: no # here • but it IS on the definition </DIV> © 2004, D. J. Foreman

21 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


Download ppt "Cascading Style Sheets"

Similar presentations


Ads by Google