Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
© 2007 D. J. Foreman
2
Purpose Consistency of formatting Modify tags Ease of formatting
"Layers" within a document © 2007, 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 © 2007, 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 © 2007, D. J. Foreman
5
Example of an Inline Style
<p 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 © 2007, 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 p {color: red; font-size:120%} li p {color: gold; font-size:120%} </style> NOTE: no quotes inside { } © 2007, D. J. Foreman
7
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"> <body> <p>this bold text will be red & 110%</p> </body> The Web Page file Type= specifies the language used for the styles © 2007, D. J. Foreman
8
Generic Font-family Names
Serif Sans-serif Monospace Cursive Fantasy © 2007, 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} © 2007, 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} © 2007, D. J. Foreman
11
Inheritance body {color: blue} h1, h2 {font-size: 115%}
li {color: red} <B> tags will override body color value Note: <style> tags needed if this is an embedded style © 2007, D. J. Foreman
12
Font Attributes Font-family serif Font-size 3em medium larger*
Font-style italic normal oblique Font-weight bold example h3 {Font: 2em italic bold arial, courier} Note merging of values, followed by choices © 2007, D. J. Foreman
13
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 © 2007, D. J. Foreman
14
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 © 2007, D. J. Foreman
15
Style Classes Classes allow re-use of a style Two steps:
Define a style class Use the class in the HTML © 2007, D. J. Foreman
16
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> <li class='myreds'>text</li> © 2007, D. J. Foreman
17
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: <li>, etc © 2007, D. J. Foreman
18
Layer Definitions <style>
#layer1 {position:absolute; top:400px; left:10px; } #layer2 { etc. } </style> (note: "#" for an ID vs a period for a class) © 2007, D. J. Foreman
19
Layer Usage <div id="layer1"> • note: no # here • but it IS on the definition </div> © 2007, D. J. Foreman
20
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 layername) © 2007, D. J. Foreman
Similar presentations
