css cascading style sheets. css advantages greater typography and page layout control style is...
TRANSCRIPT
CSSCascading Style Sheets
CSS Advantages
• Greater typography and page layout control
• Style is separate from structure
• Styles can be stored in a separate document and linked to from the web page
• Potentially smaller documents
• Easier site maintenance
2
CSS Syntax SampleConfigure a Web page to display blue text and yellow
background.
body { color: blue; background-color: yellow; }
This could also be written using hexadecimal color values as shown below.
body { color: #0000FF; background-color: #FFFF00; }
3
Web Color Palette
A collection of 216 colors
Display the most similar on the Mac and PCplatforms
Hex values: 00, 33, 66, 99, CC, FF
Color Chart http://webdevfoundations.net/color
4
The font-family Property
• Not everyone has the same fonts installed in their computer
• Configure a list of fonts and include a generic family name
p {font-family: Arial,Verdana, sans-serif;}
External Style Sheets - 1
• CSS style rules are contained in a text file separate from the XHTML documents.
• The External Style Sheet text file: – extension ".css" – contains only style rules– does not contain any XHTML tags
6
body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }
body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }
External Style Sheets - 2
– Multiple web pages can associate with the same external style sheet file.
7
site.css
index.htmindex.htm
clients.htmclients.htm
about.htmabout.htm
Etc…
The <link /> Element
• A self-contained tag
• Placed in the header section
• Purpose: associates the external style sheet file with the web page.
• Example:
8
<link rel="stylesheet" href="color.css" type="text/css" />
Embedded Styles Example
<style type="text/css">body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans-serif; }h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; }h2 { background-color: #AEAED4; color: #191970; font-family: Georgia, "Times New Roman", serif; }p {font-size: .90em; }ul {font-weight: bold; }</style>
Using CSS with “class”• class Selector
– Apply a CSSrule to a certain"class" of elementson a Web page
– Does not associate the style to a particular XHTML element
• Configure with .classname• The sample creates a class called “new” with red italic
text.
• To use the class, code the following XHTML:<p class=“new”>This is text is red and in italics</p>
10
<style type="text/css">.new { color: #FF0000; font-style: italic; }</style>
Using CSS with “id”• id Selector
– Apply a CSSrule to ONE element on a Web page.
• Configure with #idname
• The sample creates an id called “new” with red, large, italic text.
• To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
11
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>
Using CSS with “id”• id Selector
– Apply a CSSrule to ONE element on a Web page.
• Configure with #idname
• The sample creates an id called “new” with red, large, italic text.
• To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
12
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>
Centering Page Content with CSS#container { margin-left: auto;
margin-right: auto;
width:80%; }
<body> <div id="container"> <h1> Trillium Media
Design</h1>…<p id="footer">Copyright © 2011 Your
Name Here</p> </div> </body> </html>
The CSS padding Property• Configures empty space between the content of
the XHTML element and the border
• Set to 0px by default
h2 { border: 2px solid #ff0000;
padding: 5px; }
No padding configured:
XHTML Image ElementConfigures graphics on a Web page
src Attribute◦ File name of the graphic
alt Attribute◦ Configures alternate text content (description)
height Attribute◦ Height of the graphic in pixels
width Attribute◦ Width of the graphic in pixels
16
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />
Image LinksTo create an image link use an anchor element to
contain an image element
Browsers automatically add a border to image links.
Configure CSS to eliminate the border img {border:0 }
17
Home
<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home" /></a>
CSS background-image Property• Configures a background-image • By default, background images tile (repeat)
body { background-image: url(background1.gif); }
Thumbnail Image
• A small image configured to link to a larger version of that image.
19
Favorites Icon - favicon• A square image
associated with a Web page
• Usually named: favicon.ico
• May display in the browser address bar, tab, or favorites/bookmarks list
• Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon" />