Download
1 / 15
150 likes | 300 Views
Today's Overview. Learn Cascading Style SheetsWeb design discussion. Cascading Style Sheet (CSS). Introduced by the W3C to counter a problemPage design was getting in the way of content design in webpagesCSS is an attempt in separating the twoStyle pages can be applied across multiple pagesCSS
E N D
1. INLS102 Week9: Cascading style sheets Discussion on your designs Date: 10/25/05
Instructor: Leo Cao
2. Todays Overview Learn Cascading Style Sheets
Web design discussion
3. Cascading Style Sheet (CSS) Introduced by the W3C to counter a problem
Page design was getting in the way of content design in webpages
CSS is an attempt in separating the two
Style pages can be applied across multiple pages
CSS allows a great deal of customization by the web designer than ever before
4. Cascading Style Sheet basics Why is it called cascading?
1) Browser default
2) External Style Sheet
3) Internal Style Sheet (inside the <head> tag)
4) Inline Style (inside HTML element)
4 > 3 > 2 > 1
<style> tag inside html elements will overwrite the <style> tag in the html headers, and both will overwrite the external stylesheet and browser defaults
CSS demo http://www.w3schools.com/css/demo_default.htm
5. CSS basics contd 4). Inline Style (inside HTML element)
<p style="font-family: verdana; font-size: 80%; color: green">This is a paragraph </p>
3). Internal Style Sheet (inside the <head> tag)
<head>
<style type="text/css"> p {font-size: 100%; text-align: center} </style>
</head>
2). External Style Sheet
<head>
<link rel="stylesheet" type="text/css href="mystyle.css />
</head>
i.e., in mystyle.css ( p {font-size: 200%; color: blue} )
1). Browser default
6. CSS syntax basics selector {property: value}
body {color: black}
p {text-align: center; color: red}
p {
text-align: center;
color: black;
font-family: arial
}
p {font: italic small-caps 900 12px arial}
h1,h2,h3,h4,h5,h6
{color: green}
7. Reference list for CSS Generally speaking (not absolute)
selector= html tag type
property= attribute type
value= value type
CSS reference tag/list
http://www.w3schools.com/css/css_reference.asp
8. CSS: Customized class selector.classname {property: value}
Use it by <selector class=classname></selector>
If you dont specify a selector, the class can be applied to any selector
Examples:
Tag dependent classes
p.right {text-align: right}
<p class="right"> This paragraph will be right-aligned. </p>
p.1 {text-align: center; color: green}
<p class=1>this is a new paragraph</p>
Tag independent
.test {text-align: right; color: gold}
<h2 class=test>gold to the right</h2>
Only apply customized tags as as internal style tags, <style> css syntax </style>
9. CSS notes Can be written in any editor, save as .css
Use quotes when multiple words are involved, or when in doubt, just use it
Use ; to separate multiple properties within a line
p {font-size: 100%; text-align: center}
Dont leave spaces between alphanumerical values, 12px, not 12 px.
10. Group CSS exercise Create an external style sheet, try out any 2 selectors
Save the file as mystyle.css
Edit an html page, link to mystyle.css in the header, save it
See if it works
11. CSS contd Copy and paste the code from mystyle.css inside your head tag, enclose in <style> </style>
This is the internal style sheet
Try some inline style codes
12. Intermission
13. What makes a website good?
14. Group exercise Give feedback on each others website designs
15. For next week Website assignment due
Optional, if youre interested in building a css menu, heres the instructions, http://www.projectseven.com/tutorials/css/uberlinks/
Alternatively, you could try copying the code off the course page and practice with it
