Download presentation
Presentation is loading. Please wait.
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
Similar presentations
