Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.
12
Cascading Style Cascading Style Sheets Sheets Chris Vollmer Chris Vollmer IT 5610 IT 5610 Chatfield Senior High Chatfield Senior High School School
-
Upload
marshall-martin -
Category
Documents
-
view
212 -
download
0
description
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets are stored in CSS files Multiple style definitions will cascade into one
Transcript of Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.
Cascading Style Cascading Style SheetsSheets
Chris VollmerChris VollmerIT 5610IT 5610
Chatfield Senior High SchoolChatfield Senior High School
Table of Contents• What is CSS• Using Cascading
Style Sheets• Why Cascading
Style Sheets• Types of CSS
•External•Internal•Inline•Class•Try Some•Helpful Links
What is CSS?• CSS stands for Cascading Style Sheets • Styles define how to display HTML
elements • Styles are normally stored in Style
Sheets • External Style Sheets are stored in CSS
files • Multiple style definitions will cascade
into one http://www.w3schools.com/css/css_intro.asp
Using Cascading Style Sheets• Cascading Style Sheets are mainly used
to separate the presentation aspects of a web page from the content aspects.
• CSS are used for presentation, HTML is used for structure.
• Things to keep in mind…–Human disabilities (508 compliant)–Version of browser–Text based browsers–Handheld internet devices
Why Cascading Style Sheets?Multiple style definitions will
cascade into oneo Browser default o External Style Sheet o Internal Style Sheet (inside the <head> tag) o Inline Style (inside HTML element)
• Allow you to accomplish morefixed background images
Types of CSS• ExternalExternal – ideal when same style
is applied to several pages• InternalInternal – style is applied to a
single document• InlineInline – Single occurrence within a
page (ie. Single word, cell of table)• ClassClass – custom style
External Style Sheet• Separate from .html file• Tag placed in .html to link .html to
.css (external style sheet file)
<head><link rel=“stylesheet” type=“text/css” href=“filename.css”></head>example
Internal Style Sheet• Created within the .html file between
<head><style type=“text/css”>Styles defined
</head>• Format includes 3 parts:
selector {property: value}body {color: black or #ffffff}
Inline Style Sheets•Use this sparingly, mixes
content with presentation•Tag placed around text or
image that you are applying the attribute<p style="color: sienna; margin-left: 20px"> Text goes here</p>
Class (Custom)• Define different styles for same html tag
#1 <p class=“right”> align right#2 <p class=“center”> align center<head> p.right{text-align: right} p.center{text-align:center}</head>
• You can omit the html tag and create your own class
.alpha a:link, .alpha a:visited{font- size: 12px;}
Helpful LinksW3Schools, CSS2 Reference Page,
http://www.w3schools.com/css/css_reference.asp- Comprehensive list of css2 tagsCSS Zen Garden, homepage,
http://www.csszengarden.com/- Great examples of how CSS is used for presentationSection 508, homepage,
http://www.section508.gov/index.cfm?FuseAction=Content&ID=3
- Government site describing Rehabilitation Act section 508 that deals with access to information on the internet
Try Some1. Background color and heading
tags, http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color
2. Text color, alignment, backgroundhttp://www.w3schools.com/css/css_text.asp
3. You choosehttp://www.w3schools.com/css/css_background.asp
