CS125 Spring 2014 Interim
Style sheetsStyle sheets have been used for years in desktop publishing to apply typographical styles and
spacing to printed media. Cascading Style Sheets (CSS) are a flexible, cross-platform,
standards-based language developed by the W3C to provide the functionality of style sheets
(and much more) for web developers. For example, you will use CSS to configure text,
colors and general page layout.
CSS versus HTML:• HTML is a markup language to specify the content/structure of web documents (e.g.,
this part of the document is a header)
• CSS is a language to specify the presentation (look and feel) of web documents
(e.g., in this document, headers are displayed with a bold font on a red background)
Advantages of using CSS:• 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
3-1
CS125 Spring 2014 Interim
CSS SyntaxEach style sheet contains a sequence of rules.
Each rule contains a selector and a declaration block.
Each selector identifies which part of the document will be affected by the style rule, for
example, all the <h1> headers, or a subset of the paragraphs, or even a single sentence.
Each declaration block contains one or more declarations.
Each declaration is a CSS property:value pair followed by a semi-colon.
Example:
h1 { color: white; background-color: black; }
p { margin-left: 100px; margin-right: 20px; }
a:link { color: red; } /* unvisited link */
a:visited { color: green; } /* visited link */
a:hover { color: purple; } /* mouse over link */
a:active { color: blue; } /* selected link */
3-2
CS125 Spring 2014 Interim
CSS types
The location where the CSS rules are stored defines the type of style sheet that you are
using:
• Inline styles: Configured in the body of the web page using the style attribute of an
HTML tag and thus applies only to that specific element
• Embedded styles: Configured in the header section of a Web page using the HTML
<style> element and thus applies to the entire web page
• External styles: Configured in a separate text file with the .css file extension and
using the HTML <link> element in the header section of a web page
• Imported styles: Similar to external styles but not discussed in this course
3-3
CS125 Spring 2014 Interim
Embedded styles
In this case, the CSS rules are inside the <style> element within the header.<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<title>Embedded CSS example</title>
<style>
h1 { color: white; background: black; }
p { margin-left: 15px; margin-right: 200px; }
a:link { color: red; } /* unvisited link */
a:visited { color: green; } /* visited link */
a:hover { color: purple; } /* mouse over link */
</style></head>
<body>
<h1>First Section</h1>
<p>This is a paragraph used to demonstrate the use of margin
properties as well as the colors of links:</p>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./clients/index.html">Clients</a></li>
<li><a href="./contact/index.html">Contact us</a></li>
</ul>
<h1>Second Section</h1> blah blah blah
<h1>Third Section</h1>
</body></html>
Rendering:
3-4
CS125 Spring 2014 Interim
Specifying colors
Computer monitors display color as a combination of red, green, and blue light
intensities with values from 0 to 255. Often, hexadecimal numbers (base 16) are
used instead of decimal numbers (base 10). For each color component in the RGB colorscheme, its value can range from 00 to FF. In the hexadecimal system, the digits are
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F (or 0 to 15). Larger numbers are constructed as follows:
10,11,12,. . . ,19,1A,1B,1C,1D,1E,1F,20,21,. . . ,2F,30,31,. . . ,F9,FA,FB,FC,FD,FE,FF.
HTML uses RGB colors represented in hexadecimal indicated by an initial # and followed
by three numbers between 00 and FF, one each for Red, Green, and Blue in this order.
A table of so-called “web safe colors” can be found at: [of historical interest]
http://webdevfoundations.net/color/
3-5
CS125 Spring 2014 Interim
Accessibility and colors
Not everyone is able to see or distinguish among colors. In fact, according to
http://www.vischeck.com/vischeck, 1 out of 20 people experience some type of
color deficiency. Therefore, it is important to choose your colors carefully. Here are some
guidelines:
Do not rely on color only to convey information.
Avoid using red, green, brown, gray, or purple next to each other.
White, black, and shades of blue and yellow are easier to differentiate.
See the simulation at:
http://www.vischeck.com/vischeck/vischeckURL.php
3-6
CS125 Spring 2014 Interim
How to choose a color scheme?
• Monochromatic
http://meyerweb.com/eric/tools/color-blend
• Choose from a photograph or other image
http://www.colr.org
• Other helpful sites:
http://colorsontheweb.com/colorwizard.asp
http://kuler.adobe.com
http://colorschemedesigner.com/
3-7
CS125 Spring 2014 Interim
Specifying colors with CSS
As before, you can do so with an embedded style. But you can also use inline styles with
the ’style’ attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Specifying colors in CSS</title>
<style>
h1 { color: #FFFFFF; background-color: #000000; }
</style>
</head>
<body style="background-color: #9999FF;">
<h1>First Section</h1>
<p>blah blah blah</p>
<h1 style="color: #00FFFF;">Second Section</h1>
<p>blah blah blah</p>
<h1>Third Section</h1>
<p style="color: #FF0000;">This is a paragraph used
to demonstrate the use of foreground colors.</p>
</body>
</html>
Rendering:
3-8
CS125 Spring 2014 Interim
Configuring text with CSS
CSS properties for configuring text:
• font-family
– Configures the font typeface of the text
• font-size
– Configures the size of the text
• font-style
– Configures the style of the text, e.g., set to italic style
• font-weight
– Configures the level of boldness of text
3-9
CS125 Spring 2014 Interim
Specifying font sizes
3-10
CS125 Spring 2014 Interim
Guidelines for text styles
Text is extremely tricky to configure since not everyone has the same fonts installed on
their computer.
• It is crucial to test your web pages on a variety of client platforms, including different
browsers and monitor resolutions.
• Pick so-called web-safe fonts (see
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html)
• Sans-serif fonts are easier to read.
• For size, do not use the (absolute) pixel (px) and point (pt) unit.
• Use the em and percentage font sizes: these are relative to the font size of the parent
element and they can be easily enlarged in all browsers by users. The em unit is the
height of the letter M in the current font.
• When specifying a font family, provide an ordered list ending with a generic family
name, as a backup. Example:
p { font-family: Arial,Verdana,sans-serif; }
3-11
CS125 Spring 2014 Interim
Font families
The five generic font families and some sample typefaces:
3-12
CS125 Spring 2014 Interim
The <div> and <span> elements
These elements group together contents that share the same presentation. The main
difference between these elements is that <div> is block-level while <span> is inline-level.
Note that the following example also illustrates the text-align property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>span versus div</title>
</head>
<body>
<div style="text-align: right;">
<div style="font-family: serif;">
Serif:
<span style="font-size: xx-small;">xx-small</span> MMM
<span style="font-size: x-small;">x-small</span> MMM
<span style="font-size: small;">small</span> MMM
<span style="font-size: medium;">medium</span> MMM
<span style="font-size: x-large;">x-large</span> MMM
<span style="font-size: xx-large;">xx-large</span>
</div>
3-13
CS125 Spring 2014 Interim
<div style="font-family: sans-serif;">
Sans-serif:
<span style="font-size: xx-small;">xx-small</span> MMM
<span style="font-size: x-small;">x-small</span> MMM
<span style="font-size: small;">small</span> MMM
<span style="font-size: medium;">medium</span> MMM
<span style="font-size: x-large;">x-large</span> MMM
<span style="font-size: xx-large;">xx-large</span>
</div>
</div>
</body>
</html>
Rendering:
3-14
CS125 Spring 2014 Interim
Class selectorsSo far, all of our embedded CSS rules have used HTML element names, e.g., <h1> or <p>,
as selectors. What is the down side of these selectors?
If you would like a common style for a variety of HTML elements, you could use an inline
style for each one of them. However, it is much better to declare an embedded rule with a
class selector, that is a selector starting with a period, as follows:
.myclass { color: #FF0000; } // ALL elements in myclass will be red
or even:
p.myclass { color: #FF0000; } // all PARAGRAPH elements in myclass will be red
Now, to add any HTML element to myclass, use the ’class’ attribute, as follows:
<div class="myclass"> ... </div> // this div element is in myclass
<span class="myclass"> ... </div> // this span element is in myclass
<div> ... </div> // this div element is NOT in myclass
3-15
CS125 Spring 2014 Interim
Class selector example<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class selector example</title>
<style>
.important { font-weight: bold; }
.very_important { color: #FF0000; }
</style>
</head>
<body>
<p>
This is a normal paragraph containing <span class="important">an
important phrase</span> and then more innocuous stuff.
</p>
<p class="important">
However, this whole paragraph is <span style="font-weight: normal;">very</span>, very,
<span class="very_important">very</span> important.
</p>
<ol>
<li class="important">The first item is more important</li>
3-16
CS125 Spring 2014 Interim
<li>than the second or</li>
<li>the last items</li>
</ol>
</body>
</html>
Rendering:
3-17
CS125 Spring 2014 Interim
Multiple class selector example<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple class selector example</title>
<style>
.important { font-weight: bold; }
.urgent { text-decoration: underline; }
.warning { color: #FF0000; }
.corrected { text-decoration: line-through; }
</style>
</head>
<body>
<p>blah blah blah</p>
<p class="important urgent">
This is an important paragraph that contains
time-sensitive information.</p>
<p>blah blah blah</p>
<p class="important urgent warning">This is an
important and urgent warning.</p>
<p>blah blah blah</p>
<p><span class="corrected urgent warning">This is an urgent
warning</span> that is not in effect any longer.</p>
</body></html>
Rendering:
3-18
CS125 Spring 2014 Interim
Id selectors
Any HTML element may be assigned an id using the attribute by the same name. No twoelements in a document may have the same id.
So, if you have a style that applies to a single area of your document, you may identify
this element with a unique id attribute and then define a CSS rule as follows:
...
<style>
...
#footer { font-style: italic; } /* note the # sign instead of the period */
...
</style>
...
<body>
...
<p id="footer">...</p>
</body>
Could we use an inline style for the last paragraph instead of an id selector?
3-19
CS125 Spring 2014 Interim
External style sheets
What are the two types of styles that we have studied so far?
Recall (slide 3-3) that there is a third way to take advantage of CSS, namely to store style
rules in a separate file and then to reference this file within your HTML document.
What would be the advantage(s) of doing so?
An external style sheet must:
• Be stored in a text file whose name ends with the extension .css
• Contain ONLY style rules: no HTML allowed!• Be referenced in an HTML document using the <link> element, as follows:
<link rel="stylesheet" href="common_style.css">
3-20
CS125 Spring 2014 Interim
External style sheets: Example (1/3)
Contents of file mystyle.css:
body { background-color: #6699FF; }
#nav { text-align: center; }
#footer { font-style: italic; }
CSS validator at: http://jigsaw.w3.org/css-validator/
3-21
CS125 Spring 2014 Interim
External style sheets: Example (2/3)
Directory structure for a multi-page web site:
web_site____________________
______/ / \ \_______ \
/ / \ \ \
index.html CV.html personal.html contact.html mystyle.css
Contents of file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My web site - Home</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<p id="nav"><a href="index.html">Home</a> | <a href="CV.html">CV</a> |
<a href="personal.html">Personal</a> | <a href="contact.html">Contact Info</a>
</p>
<hr>
3-22
CS125 Spring 2014 Interim
This is my home page.
<br>
<br>
<br>
<br>
<br>
<p id="footer">© John Doe</p>
</body>
</html>
Screenshot of the first three pages:
3-23