Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
2
Purpose Consistency of formatting Modify tag actions
Within a page Across a site Modify tag actions Ease of formatting "Layers" within a document © 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 © D. J. Foreman
4
Syntax rules Inline styles Embedded or linked styles
<tag style="property-list"> Embedded or linked styles TAG {property-list} Property : value ; ; not needed after last property Values of a property may be merged Separated by blanks {font:15px arial} Values may contain choices Separated by commas {font: Georgia, serif} © D. J. Foreman
5
Example of an Inline Style
<li style="color: red; font-size:120%"> Changes only this one tag Note use of : ; style used as a property in the TAG, so quotes required here No { } for inline styles Note © D. J. Foreman
6
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 © D. J. Foreman
7
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 © D. J. Foreman
8
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 © D. J. Foreman
9
The font property-group
Font-style normal, italic, oblique Font-family "times new roman", georgia Font-weight bold, normal, 900 Font-size 125%, larger, smaller Font-variant small-caps © D. J. Foreman
10
Generic Font-family Names
Serif Sans-serif Monospace Cursive Fantasy © D. J. Foreman
11
Specific Font-family Names
Arial Times Roman Courier New Gigi Lucida Calligraphy Comic Sans MS Example: h1 {font-family: times roman, arial, serif} © D. J. Foreman
12
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} © D. J. Foreman
13
Inheritance body {color: blue} h1, h2 {font-size: 115%}
li {color: red} These styles will override default value Notes: <style> tags needed if this is an embedded style Note the “,” in H1, H2 © D. J. Foreman
14
More Font Examples li {color: red; font: arial bold}
h1 {font: 2em italic bold arial, courier} Note merging of values, with choices li {color: red; font: arial bold} © D. J. Foreman
15
Some Misc. Properties Text-indent: 10% 3em
Vertical-align: 10% -10% 3mm Letter-spacing: .3em Word-spacing: .4em Line-height: 5mm 120% 2 ("2" means 2*ratio of line-height/font-size) Text-decoration: none underline © D. J. Foreman
16
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. © D. J. Foreman
17
Style Classes Classes allow re-use of a style Two steps:
Define a style class Use the class in the HTML © D. J. Foreman
18
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> © D. J. Foreman
19
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 © D. J. Foreman
20
Layer Definitions <STYLE>
#layer1 {position:absolute; top:400px; left:10px; } #layer2 { etc. } </STYLE> (note: "#" for an ID vs a period for a class) © D. J. Foreman
21
Layer Usage <DIV ID="layer1"> • note: no # here • but it IS on the definition </DIV> © D. J. Foreman
22
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) © D. J. Foreman
23
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 © D. J. Foreman
Similar presentations
