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 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 © 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 an attribute 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
Generic Font-family Names
Serif Sans-serif Monospace Cursive Fantasy © D. J. Foreman
10
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
11
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
12
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 © D. J. Foreman
13
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 © D. J. Foreman
14
Anchor-tag Attributes
A:visited {styles} A:link {styles} A:active {styles} A:hover {styles} © D. J. Foreman
15
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 © 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
