Lecture_3 - Announcements
Download
Report
Transcript Lecture_3 - Announcements
HTML - Quiz #2
Attendance CODE: 803655
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
Today’s Agenda
Quiz
Announcements
CSS Introduction
Software
Web Design:
Basic to Advanced Techniques
Announcements
Mini Project 1 due this morning at 12AM
Mini Project 2
Web Design:
Basic to Advanced Techniques
Web Design:
Basic to Advanced Techniques
Spring 2010
Tuesdays 7-8pm
200 Sutardja-Dai Hall
CSS Introduction
Web Design:
Basic to Advanced Techniques
What is CSS?
Takes our plain-Jane HTML doc
and turns it into this…
What is CSS? …continued
Cascading Style Sheets
Works by associating styles with HTML elements
Allows us to separate display code from our structural code (HTML)
Allows us to format documents beyond what HTML would allow on
its own
Avoids repetition of code
Smaller files
Less bugs
Consistent look
Standardized by WC3 (W3.org)
Online validator
CSS Syntax
CSS rules go into a file with
.css extension
Rule
selector
property
value
body { font-weight: bold; }
Every declaration
Terminated by ;
Style.css
CSS Selectors
We need a way to label the HTML elements we want to
style so we can refer to them in our separate CSS code
<p id=“myEle”></p>
Style.css
#myEle {
font-weight: bold;
font-size: 20px;
}
Element Selector
We can select HTML elements by their element type
HTML Document
<h1>Image Page</h1>
CSS Style Sheet
img {
<img src=“image.gif” />
<p>Here’s a description of the
image you see above</p>
border: 1px solid #333;
}
p{
font-color: #333;
}
Class / ID Selector
We can tag HTML elements by giving them an #id or .class
HTML Document
CSS Style Sheet
<p id=“description”>Here’s a
description of the image you
see above</p>
#description {
<p class=“extraInfo”>Here’s the
photo equipment I used</p>
}
font-color: red;
.extraInfo {
<p class=“extraInfo”>Here’s
where I took the photo</p>
font-color: blue;
}
Class / ID Selector ..continued
<p id=“myUniqueElement”></p>
ID
Used to identify ONE particular HTML element
Must be unique for entire document
<p class=“groupOfElements”></p>
Class
Used to identify ONE or MORE HTML elements
Universal Selector
We can select all HTML elements
HTML Document
<h1>Image Page</h1>
CSS Style Sheet
*{
<img src=“image.gif” />
font-family: verdana, arial,
helvetica, sans-serif;
<p id=“description”>Here’s a
description of the image you
see above</p>
<p class=“extraInfo”>Here’s the
photo equipment I used</p>
<p class=“extraInfo”>Here’s where
I took the photo</p>
color: #000;
}
Pseudo Class Selector
<a href=“URL”>Link</a>
:visited
After a link has been
clicked
:hover
When your mouse cursor is
over the HTML object
:active
While a link is being
clicked
a:visited {
color: red;
}
a:hover {
font-weight: bold;
}
a:active {
color: blue;
}
Combining Selectors
Descendant (nested)
Selects by nested structure
p span { color: red; }
.description a { color: blue; }
<p class=“description”>
<p class=“description”>
<p
<aclass=“description”>
href=“#”>a link</a>
<a href=“#”>a link</a>
<span>a
<a href=“#”>a
span</span>
link</a>
<span>a span</span>
</p> <span>a span</span>
</p>
</p>
Combined
Selects between elements of same class
p.info { color: red; }
<p class=“info”>para</p>
<p class=“info”>para</p>
<a
<p
class=“info”
class=“info”>para</p>
href=“#”>link
a.info { color: #FFF; }
<a class=“info” href=“#”>link
Grouped
Applies style to list
a, p, span { color: red; }
</a>
<a class=“info” href=“#”>link
</a>
</a>
<p>a para</p>
<p>a para</p>
<a href=“#”>a link</a>
<a href=“#”>a link</a>
<span>a span</span>
<span>a span</span>
Specificity
<p class=“para” id=“myPara”>Text</p>
p { color: red; }
.para { color: blue; }
#myPara { color: green; }
• What color is the text?
GREEN
Specificity …continued
#id > .class > element
p { color: red; }
.para { color: blue; }
#myPara { color: green; }
TEXT
Attaching CSS Styles
After we write our CSS rules we need to link our rules to
our HTML document
External Style Sheets
Inline Styling
Embedded Style Sheets
HTML
CSS
HTML & CSS
External Style Sheets
<head>
<link href=”/style.css”
rel="stylesheet" type="text/css" />
</head>
•Most common way to link CSS to HTML
•CSS and HTML in separate files
•Same CSS rules throughout site
•Best practice!
Inline Styling
<p style=“color: red;”>red text</p>
Useful for single cases
Poor practice to use this extensively throughout site
If applying same style to multiple elements, consider
using class instead
Embedded Style Sheets
<head>
<style type="text/css”>
p { color: red; }
</style>
</head>
Like inline styling, only use this for exceptions
If elements in this page are styled differently than the rest
of the site
Try to avoid ever using this
Better option is to link to another .CSS file
Multiple Style Sources
HTML documents can include multiple sources of CSS
styles
A HTML document may link to any number of external style
sheets
In addition to those style sheets, the documents may use
inline styling and embedded style sheets
SomeHTMLDoc.html
<head>
<link href=”/style.css” rel="stylesheet" type="text/css" />
<link href=”/style2.css” rel="stylesheet" type="text/css" />
<link href=”/style3.css” rel="stylesheet" type="text/css" />
</head>
Cascade Order
Proximity: Inline > Embedded > External
Last style wins
Rules in last style sheet overwrite previous rules
Style.css
p { color: red;
font-weight: bold}
Style2.css
p { color: green; }
Style3.css
p { color: blue; }
<p
style=“color: orange;”>
<p>
<p>
<p>
some
text
some
text
some
text
some
text
</p>
</p>
</p>
</p>
Software
Dreamweaver’s tools
Firebug for Firefox
Lets you modify CSS in realtime
http://getfirebug.com/
Useful CSS
All Objects
color: #FFF / #FFFFFF / white;
font-size: 12px;
font-weight: bold / normal;
text-decoration: none / underline;
background-color: #FFF / #FFFFFF / white;
Block Objects
margin: 10px 20px;
padding: 10px 20px;
background-image: url(‘/images/background.gif’);
background-repeat: no-repeat / repeat-x / repeat-y / repeat;
background-position: 10px 0px;
border: 1px solid #000;
text-align: left / center / right;