CS125 Spring 2014 Interim Style sheets · CS125 Spring 2014 Interim CSS Syntax Each style sheet...

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


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


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


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


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


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


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


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>


<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


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


Specifying font sizes

3-10


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


Font families

The five generic font families and some sample typefaces:

3-12


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>


<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


<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


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


Class selector example<!DOCTYPE html>

<html lang="en">

<head>


<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


<li>than the second or</li>

<li>the last items</li>

</ol>

</body>

</html>

Rendering:

3-17


Multiple class selector example<!DOCTYPE html>

<html lang="en">

<head>


<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 class="important urgent">

This is an important paragraph that contains

time-sensitive information.</p>


<p class="important urgent warning">This is an

important and urgent warning.</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


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


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


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


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>


<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


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

CS125 Spring 2014 Interim Style sheets · CS125 Spring 2014 Interim CSS Syntax Each style sheet...

Documents

Transcript of CS125 Spring 2014 Interim Style sheets · CS125 Spring 2014 Interim CSS Syntax Each style sheet...