Download Introduction to Cascading Style Sheets

Introduction to
Cascading
Style Sheets
<style type="text/css" media="screen">
<!-body { font-family: Arial, Geneva, sans-serif; background-color: white; color: black}
p { width: 550px; }
h1 { text-align: left; }
h3 { font-size: 1em; display: run-in; }
h2 { text-align: center; background-color: #FFF8E1; color: #800000;
font-size: 1em; margin-bottom: .18em; }
ul { list-style: square; width: 520px; }
em { font-weight: bold; background-color: #FFFFFF; color: #800000; font-style: normal; }
.smalltext { font-size: 40% }
.bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;}
a:link { color: #000080; background-color: #ffffff; }
a:visited { color: #404040; background-color: #ffffff; }
a:active { color: #ff0000; background-color: #ffffff; }
a.bar:link { color: #000080; background-color: #ffcc00; }
a.bar:active { color: #ff0000; background-color: #ffcc00; }
a.bar:visited { color: #404040; background-color: #ffcc00; }
-->
</style>
WVU OIT Technical Support Services
293-4444
(Help Desk)
oit.wvu.edu/training/classmat/css/
Instructor: Kathy Fletcher
Table of Contents
Table of Contents ............................................................................................................ ii
What are style sheets? .................................................................................................... 1
How CSS Works .......................................................................................................... 1
Why use style sheets? ................................................................................................. 1
How to add style sheet rules to your web page ............................................................... 2
Linked or External Style Sheet .................................................................................... 2
Activity 1: Apply a variety of external style sheets to the sample html file ................ 2
Inline or Local Style Sheet ........................................................................................... 2
Activity 2: Add an inline style .................................................................................... 3
Embedded or Global Style Sheet................................................................................. 3
Activity 3: Create a simple embedded style sheet .................................................... 3
Text Properties ................................................................................................................ 4
Activity 4: Add style rules to control text appearance ............................................... 4
Margins, Indent, Alignment.............................................................................................. 5
Borders............................................................................................................................ 5
Shorthand properties ....................................................................................................... 5
Activity 5: Margins, Alignment, Indent ...................................................................... 6
Activity 6: Borders .................................................................................................... 6
Class ............................................................................................................................... 6
Pseudo-class for links ..................................................................................................... 6
Activity 7: Class and Pseudo-class for Links ............................................................ 7
Validation ........................................................................................................................ 7
Create different style sheets for print and screen ............................................................ 7
Using Style Sheets in Dreamweaver ............................................................................... 8
References ...................................................................................................................... 9
ii
Intro to CSS
What are style sheets?
A Style Sheet is a set of rules that allow you to control how your web document will
appear in the web browser.
How CSS Works
CSS overrides the browser's default settings for interpreting how tags should be
displayed, letting you use any HTML element indicated by an opening and closing tag
(including the <p> tag) to apply style attributes defined either locally or in a style sheet.
Structure of a Rule
Style sheets contain rules. A rule has several component parts.
The first part of the Rule (<p> <H1>) is called the Selector. This tells the browser which
element on the page to work with.
The curly bracket pair contains the Declaration, which is comprised of a Property
(color) and a Value (#333333). Here's the basic syntax of a rule defined:
Selector { property: value }
Examples:
P {font-family: Times, 'Times New Roman', serif; font-size: 80%; color: red; }
You can specify several properties on one rule:
H1 { font-family: Times, serif; color: black; font-size: 2em; }
You can group tags in the selector portion:
H1, H2, H3 { font-family: Times, 'Times New Roman', serif; }
You can also be very specific by using a contextual selector. In the example below, the
rule will only be applied to emphasized text inside of a Heading1 tag.
In the Document:
<h1>Heading <em>One</em></h1>
The Rule:
H1 EM { color: maroon; font-style: italic; }
The Results:
Heading One
Why use style sheets?
‰
‰
‰
‰
‰
‰
create a set of web pages with consistent appearance
easier maintenance – make changes in one place
separate page structure from page appearance
ADA compliance
reduce web page file size
reduce your reliance on non-standard tags such as <center> and <font>
1
How to add style sheet rules to your web page
There are different ways to apply style sheets to an HTML document.
Linked or External Style Sheet
Use a single style sheet (in a separate file, saved with the .css suffix) to define multiple
pages. A typical .css file is a text file containing only style rules (No javascript
comments, no HTML or anything else, only CSS), as here:
P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
To apply a linked .css style sheet ("stylesheetname.css" in the example below) to an
HTML page, a <link> tag is added to the page header:
<link rel="stylesheet" href="/pathname/stylesheetname.css" type="text/css">
Creating a linked style sheet allows you to define your CSS rules in one place. Linked
style sheets ease web page maintenance, reduce file size, and increase accessibility.
Activity 1: Apply a variety of external style sheets to the sample html file
1. Open the file vita.html in Notepad and in Internet Explorer 1 . The files you will use
in today's workshop are in the CSS folder in C:\OIT_Workshops\.
2. Enter or copy the link statement into the HEAD section, after the title statement.
<link rel="STYLESHEET" type="text/css" href="style.css">
3. Save the file and refresh your web browser.
4. Edit the link statement to refer to style2.css. Save the file and refresh the
browser to see how a different style sheet can change page appearance.
5. Repeat for style3.css
Inline or Local Style Sheet
This means you specify a CSS style at this specific point for this specific tag in this
specific document, like this:
<p style="color: #FF6600;">paragraph in orange text.</p>
1
To open any html file in IE in this training lab:
1. Go to C:\OIT_Workshops\CSS\ double-click the vita.html file.
2. Or: open IE and make it fit on only part of the screen.
3. Open My Computer from the desktop. Open the C:\OIT_Workshops\CSS\ folder.
4. Drag the vita.html file on top of the open browser window.
2
Intro to CSS
Activity 2: Add an inline style
1. Open the file.html in your editor and browser.
2. Change the heading & document contents, and add a second heading.
3. Make the heading blue with a pink background by adding the below inline style to
the H1 tag.
<h1 style="color: blue; background-color: pink;">
4. Type your name and email address at the bottom.
5. Save your changes and refresh your web browser.
Embedded or Global Style Sheet
This style sheet must go in the <head> </head> section of your document and defined
within the <style> and </style> tags. This style sheet applies to the entire document.
Use when a single document has a unique style.
<style type="text/css">
<!-h1 { font-family: Arial, sans-serif; color: red; background-color: white; }
p {color: #000088;}
-->
</style>
Note: The HTML comment tags <!-- and --> are used to prevent style sheet content
from displaying in old browsers that don't support style sheets.
This will be the technique we will use for the rest of the workshop.
Activity 3: Create a simple embedded style sheet
Set body text and body background colors in file.html.
<style type="text/css">
<!-body { color: #000080; background-color: #ffffcc; }
-->
</style>
Note on precedence: In cases where inline, embedded, and linked style definitions
conflict, the most specific style sheet will generally take precedence: inline overrides
embedded, embedded overrides linked. Inline style attributes overrides all.
3
Text Properties
font-family:
‰
‰
‰
‰
‰
Arial, Helvetica, Verdana, Geneva, Tahoma, sans-serif
Times, 'Times New Roman', serif
Courier, "Courier New", monospaced
'Lucida Handwriting', 'Comic Sans MS', Technical, 'Zapf Chancery', cursive
'Curlz MT', Jokerman, Keypunch, Klingon, fantasy
font-size:
‰
‰
‰
‰
percentage of default font size: e.g. 200% | 40%
pt: points – e.g. 36pt | 14pt | 18pt (potential problem for macintosh browsers)
em: the size of the letter m in that font – e.g. 2em | 1.75em | .5em
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller
font-weight:
‰
‰
‰
normal | bold
bolder | lighter
100 | 200 … 700 | 800 | 900
font-style:
‰
normal | italic | oblique
text-decoration:
‰
none | underline | line-through
line-height:
controls the "leading" or white space between lines
‰ pt
‰ em
‰ percentage
‰ normal
p { font-family: Arial, Helvetica, sans-serif; font-size: 1em;
color: navy; background-color: white; line-height: 2em;}
h1 { background-color: yellow; font-size: 1.75em; }
em { font-family: Times, serif; font-size: larger;
font-weight: bolder; font-style: italic; color: yellow;
background-color: transparent; }
Activity 4: Add style rules to control text appearance
1. Change the appearance of your paragraphs, your list item text, your headings.
2. Use the line-height property on your paragraph for extra white space between lines.
4
Intro to CSS
Margins, Indent, Alignment
•
•
•
•
margin-top
margin-right
margin-bottom
margin-left
Can specify as length in pixels, em, as a percentage, or as "auto".
p { margin-top: 0.25em; margin-right: 1em;
margin-bottom: 0.25em; margin-left: 1em;}
text-indent: length (in pixels, points, inches, or em) or as a percentage; default is 0
p { text-indent: 3em; }
p { text-indent: -4em; padding-left: 4em; }
text-align: left | right | center
h1 { text-align: center; }
Borders
•
•
•
border-style: none | dotted | dashed | solid | double | groove | ridge
border-width: thin | medium | thick
border-color: specify a color as for text and background
p { border-style: solid; border-width: medium; border-color: #ffcc00; }
h1 {border-style: solid none none none; }
•
border-top, border-right, border-bottom, border-left
Specify the width, style, and color – order doesn't matter here.
h1 { border-top: thick solid silver; border-right: 0.25em dotted black ;
border-bottom: 10px double gray; border-left: 3px dashed red; }
Shorthand properties
p { margin: 0.25em 1em 0.25em 1em; }
.25em top 1em right .25em bottom 1 em left (just think of the word "TRouBLe")
p { margin: 0.25em 1em; }
same as above; use if you want top & bottom the same & left/right the same
em { font: italic bold 2em Helvetica, sans-serif; }
font: list font-style | font-weight | font-size | font-family
order is important!
font-size and font-family are required
p { border: thick silver solid; }
5
Activity 5: Margins, Alignment, Indent
1. Using margin properties, set margins for your paragraph and for your list items.
2. Center your heading using the text-align property.
3. Indent your paragraph.
Activity 6: Borders
1. Add a box around your paragraph.
2. Add a line above your heading or your list.
Class
Create a custom rule that you can use in multiple locations.
Note the period in front of the class name.
.warning { color: red; background-color: transparent; font-weight: bold; }
Type some text here <SPAN class="warning">warning goes here</SPAN> more text
here.
.bar { background-color: #ffcc00; color: #000080;
font-size: x-small; width: auto;}
<p class="bar"><a href="http://www.wvu.edu/~cir/" class="bar" >OIT</a> &gt;
<a href="../../../index.html" class="bar">Support Services</a></p>
Pseudo-class for links
•
•
•
•
a:link -this is a link that has not been clicked, nor is a mouse pointer hovering over it
a:visited -this is a link that has been clicked before, but has no mouse on it
a:active -this is a link that is in the process of being clicked
a:hover -this is a link currently has a mouse pointer hovering over it/on it
a:link { color: blue; background-color: transparent; text-decoration: none; }
a:visited { color: orange; background-color: transparent; text-decoration: none; }
a:active { color: red; background-color: lime; text-decoration: underline; }
a:hover { color: #DC143C; background-color: #F0F8FF; text-decoration: underline; }
a.bar:link { color: #000080; background-color: #ffcc00; }
a.bar:active { color: #ff0000; background-color: #ffcc00; }
a.bar:visited { color: #404040; background-color: #ffcc00; }
6
Intro to CSS
Activity 7: Class and Pseudo-class for Links
1. Create your own Class declaration and use it on your page.
2. Modify your links' appearance using the a:link, a:hover, etc. rules and test them
in your document.
Validation
"You can save a lot of time and effort simply by running your CSS through a validity
checker." 2
• W3C CSS Validator: jigsaw.w3.org/css-validator/
• WDG CSScheck: www.htmlhelp.com/tools/csscheck/
Create different style sheets for print and screen
<style type="text/css" media="print">
<!-P, li {font-size: 12pt; font-family: Times, serif; }
h1 { font-size: 18pt; font-family: Times, serif; font-weight: bold; color: black;
background-color: white; }
h2 { font-size: 14pt; font-family: Times, serif; font-weight: bold; color: black;
background-color: white; }
h3 { font-size: 12pt; font-family: Times, serif; font-weight: bold; color: black;
background-color: white; }
ul { list-style: square; page-break-inside: avoid;}
em { background-color: white; color: black; font-style: italic; font-weight: bold; }
.bar {display: none;}
.break {page-break-after: always;}
.smalltext { font-size: 75% }
-->
</style>
<style type="text/css" media="screen">
<!-body { font-family: Arial, Geneva, sans-serif; background-color: white; color: black}
p { width: 550px; }
h1 { text-align: left; }
h3 { font-size: 1em; display: run-in; }
h2 { text-align: center; background-color: #FFF8E1; color: #800000;
font-size: 1em; margin-bottom: .18em; }
ul { list-style: square; width: 520px; }
em { font-weight: bold; background-color: #FFFFFF; color: #800000; font-style: normal; }
.smalltext { font-size: 40% }
.bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;}
a:link { color: #000080; background-color: #ffffff; }
a:visited { color: #404040; background-color: #ffffff; }
a:active { color: #ff0000; background-color: #ffffff; }
a.bar:link { color: #000080; background-color: #ffcc00; }
a.bar:active { color: #ff0000; background-color: #ffcc00; }
a.bar:visited { color: #404040; background-color: #ffcc00; }
-->
</style>
Refer to: www.geocities.com/kfletche.geo/css/etdlist3.htm for how these styles work.
2
Cascading Style Sheets, Eric A. Meyer, page 396
7
Using Style Sheets in Dreamweaver
When you are editing a file in Dreamweaver, if you have a stylesheet in the Templates folder,
you can add a link statement in the <head> section of your web page:
<link href="Templates/bw.css" rel="stylesheet" type="text/css" media="screen">
If the file is saved in a deeper folder in your web site, the href portion will have a longer path name:
<link href="../../../Templates/bw.css" rel="stylesheet" type="text/css" media="screen">
If you are editing a new file, you will have to save it before the style sheet will be accessible.
Click on the CSS Styles tab in the Design palette if it is not already on top.
Expand the list of styles if you need to by clicking on the + sign next to the file name.
Select the text you wish to apply the style to. If there is a style
associated with an HTML tag, you just have to assign that paragraph
format to the text. For instance, I could click once on my heading
paragraph, then go to the Format select box in the Properties template
and select Heading 1. The characteristics of that HTML tag would be
applied to the text.
You can also click on the html listed on the tag selector area of the
status bar to select the text. For instance to select my first paragraph, I
could click on the <p> on the status bar
Right click on the selected text and click on CSS
Styles from the shortcut menu. Then select the
style you wish to apply. What you see on your list
will vary depending on what customized classes
were created in the style sheet.
An alternative technique is to select the text, right
click on the style name in the CSS Styles palette,
and choose Apply from the shortcut menu.
8
Intro to CSS
References
CSS: The Definitive Guide, Third Edition, Eric A. Meyer, O'Reilly, 2006; ISBN: 0-596-52733-0
www.oreilly.com/catalog/csstdg3/
Eric Meyer on CSS: Mastering the Language of Web Design, 2002;
ISBN: 978-0-7357-1245-4
www.ericmeyeroncss.com
More Eric Meyer on CSS, 2004; ISBN: 978-0-7357-1425-0
more.ericmeyeroncss.com
So You Want Cascading Style Sheets, Huh?, Joe Burns, HTML Goodies
www.htmlgoodies.com/tutors/ie_style.html
Cascading Style Sheets Tutorials, John Pollock, The Web Design Resource
www.pageresource.com/dhtml/indexcss.htm
(warning – there will be one persistent pop-up ad box – just close it when you’re done).
Cascading Style Sheets Home Page
links to tutorials, supported browsers, authoring tools, specifications, and news about CSS:
www.w3.org/Style/CSS/
Web Design Group CSScheck:
www.htmlhelp.com/tools/csscheck/
CSS Usenet Group:
www.faqs.org/faqs/www/stylesheets/authoring-faq/
HTML Writers Guild: CSS FAQ
www.hwg.org/resources/faqs/cssFAQ.html
Kathy Fletcher's CSS eClass assignments:
www.geocities.com/kfletche.geo/css/
9