1 CSS – Cascading Style Sheets
Mar 31, 2015
1
CSS – Cascading Style Sheets
2
CSS - intro
Introduced in late 1996 Provides a way to separate presentation from structure HTML
Originally not intended to deliver graphic content and multimedia
Designed to allow authors to define structure of document
CSS Allows greater control of Web page design Works with existing HTML and XHTML tags to tell
them how to behave
3
CSS – intro con’t
Initially not well supported Now recommended by W3C – many design related
HTML tags were slated to be made obsolete in favor of CSS (these tags are said to be deprecated)
There exist other types of style sheets: JavaScript Style Sheets XSL – Extensible Style Sheets
CSS is primary one used on the Web
4
CSS - what it can do
Text formatting and colors: Choose specific fonts and font sizes Set bolds, italics, underlines, text shadows Change text color and background color Change link colors or remove underlining Indent text, center text Transform sections of text to upper-, lower-, or
mixed case Other special effects
5
CSS – what it can do
Graphical appearance and layout Set a background graphic and control its location,
tiling, and scrolling Draw borders and outlines around sections of a
page Set vertical and horizontal margins on all elements
as well as margins for the page itself Flow text around images as well as other text Redefine how HTML tables and lists are presented
6
CSS – what it can do
Dynamic actions Mouseover effects on links Dynamically inserted content before or after HTML
tags Automatic numbering of page elements
Example:http://pubpages.unh.edu/~ehepp/CSS/MarkTwain.html
(without formatting)http://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.html
(with formatting)Style sheet:
http://pubpages.unh.edu/~ehepp/CSS/mark8.html
7
CSS - definitions
Style sheetFile consisting of a number of CSS rules
CascadeHow style preferences are combined together when they
appear to conflict Rule
Defines what the HTML should look like and how it should behave in the window
Example: All <h1> tags should be presented with a green background and blue text
8
CSS – parts of a CSS rule
selector {property: value;}
Example: p {color: blue;}
selector – 3 types of CSS selectors:1) XHTML selector – indicates a specific mark-up element like
<h2> or <p>2) Class selector – can be applied to any XHTML tag as you wish;
eg. <p class = “bluecolor”>3) ID selector – like class selectors, but usually applied once on the
page to a particular XHTML tag for use with a JavaScript function; eg. <div id = “topofpage”>
declaration – {property: value;} property – attribute to be defined value – defines property
9
CSS – where to put the rules
In an external document: These are called external or linked Used to affect a complete Web presentation Style changes only need to be made in one place, rather than
in each individual document Produces a presentation with a consistent look and feel Create separate file with .css extension
Use basic text editor like Notepad or Wordpad (Windows environment), SimpleText or TextEdit (Mac environment), or pico (UNIX environment) OR
Use style sheet editor or some XHTML editors include support for CSS File needs to be located within public_html Good idea to place all style sheets in sub-directory of public_html called
either CSS or STYLES Change permissions on .css file to be world readable; change
permissions on style sheet sub-directory to be world executable
10
CSS – where to put rules (con’t)
Example:Basic style sheet:/* mystyles.css */
/* created for CS403-10 */
body { font-family: Arial;
color: black;
background-color: red; }
h1 { color: green; }
Linking the style sheet to XHTML page:<head><title>...</title>
<link type = “text/css” rel = “stylesheet” href = “CSS/mystyles.css”>
</head>
11
CSS – where to put the rules (con’t)
In the head of the XHTML document: These are called embedded or internal Rules are in the same file as HTML so editing is easier at first – good for
development purposes (plan to migrate rules to separate files later) Good for for rules that apply only to a specific page (this helps keep size of
global style sheet relatively small) Use the <style> tag in the head of the document Example:
<head><title>...</title><style type = “text/css”><! - -h2 { color: red; }address { font-family: Verdana, sans-serif;
font-size: smaller; } - -></style></head><body>
12
CSS – where to put the rules (con’t)
In an XHTML tag: These are called inline Inline CSS is very similar to using XHTML presentation
attributes – it only affects that single instance of the element Easier to add to your page as you go along; harder to
maintain since they are scattered throughout your source code
Style attribute can be set on nearly any XHTML tag that is displayed by the browser
Use when you want to over-ride embedded or linked style sheets
Does not contain selector – tag itself serves as selector Example:
<table style = “font-family: Arial; font-size: large;”>
13
CSS – composing rules
Combining rulesIf rules share same selector you can combine them:
p { color: blue; }
p { font-size: large; }
can be combined as:
p { color: blue;
font-size: large; }
or:
p { color: blue; font-size: large; }
14
CSS – composing rules
Combining rulesIf rules share same declaration, you can combine
them:
p { color: blue; }
address { color: blue; }
can be combined as:
p, address { color: blue; }
15
CSS – representing colors in CSS
Straightforward hex notation:body { color: #CC66FF; }
Short hex:body { color: #C6F; }
rgb function: Provide a decimal triplet of rgb numbers (0 – 255)
separated by commas:body { color: rgb(204,102,255); } OR
Provide percentages:body { color rgb(80%, 40%, 100%); }
16
CSS – representing colors in CSS (con’t)
Color names – there are 16 color names supported by browsers:
aqua navy
black olive
blue purple
fuchsia red
gray silver
green teal
lime white
maroon yellow
17
CSS – classes and ids
In addition to setting styles based on HTML elements, you can also have rules based on 2 optional HTML attributes: class and id
Class Used to define a related group of HTML elements on a page Elements within a class can be of any type To create it, just name it:
<p class = “abc”> ... </p> Once you have defined a class in your HTML you can use it as a
class selector in CSS; class selectors are indicated by a . before the name:
.abc {color: blue; } You can combine an element selector with a class selector; then
only those elements that are members of the class are selected:p.abc { font-family: Arial; }
18
CSS – classes and ids (con’t)
id Similar to the class attribute but more restricted Must be unique – only one tag on a page can have a
given id Id’s attribute value must begin with a letter: Example:
<a href = “next.html” id = “next”>Next Page</a>
In CSS rule:
#next { font-size: large }
19
CSS – using class selectors
Combine class selectors with <div> tags to designate specific sections of a page that should receive special styling:
...<body>
<div class = “headofpage”>
<h1>Great Places to Eat in Portsmouth</h1>...
</div>...
<div class = “footofpage”>
<hr />
© Ellen Hepp, 2004. ...
</div></body></html>
20
CSS – using class selectors - <div> and <span> (con’t) <div> tag
Divides your document into separate, distinct, sections Can be used strictly as organizational tool without
formatting but becomes more effective if you add class attribute to label the division
<span> tag Delimits a portion of xhtml content Allows you to change a portion of text Browsers treat span as another physical (content-based)
style tag but default is to leave it alone E.g., <span style = “font-size: larger;”>Hello!</span>
(O’Reilly)
21
CSS – using class selectors (con’t)
In CSS file:/* Top Heading of Page /*
.headofpage { color: white;
background-color: maroon;
font-family: Verdana, sans-serif; }
/* Bottom of Page */
.footofpage { color: green;
background-color: white;
font-family: “Times New Roman”, serif; }
22
CSS – pseudo-classes and elements
Pseudo-class selector is based on a set of predefined qualities that an HTML element can have:
:active:hover:link:visited
Can stand alone but is usually used with a type selector
a:link {color: red; }
23
CSS – pseudo-classes and elements (con’t)
Example: Typical body tag in HTML<body bgcolor = “#FFFFCC” background = “mybg.jpg” text = “#000066”
link = “#FF0000” vlink = ‘#999999” alink = “#FFCC99”>
To accomplish same thing using CSS (XHTML) body { background-color: #FFFFCC;
background-image: url(mybg.jpg);
color: #000066; }
a:link { color: #FF0000; }
a:visited { color: #999999; }
a:active { color: #FFCC99; }
24
CSS – simple CSS properties for text formatting
Color – sets the foreground color of the element:h1 {color: blue; }
Background-color – sets the background colorbody { background-color: purple; }
Font-size – (easy method – think tee-shirt sizes) give value relative to the user’s default text size Default text size has value of “normal” Larger sizes go up in increments of about 20%xx-small * x-small * small * normal * large * x-large * xx-large Can use relative values larger and smaller Examples:
dl { font-size: larger; }em { font-size: xx-large; }
25
CSS - simple CSS properties for text formatting
Font-family – can specify specific font (Arial) and/or generic font family (sans-serif)
If a font is specified that is not installed on user’s machine, browser will use default font if other options are not listed
Examples:body {font-family: Arial, sans-serif; }h1 { font-family: “Courier New”, monospace; }h2 { font-family: “Times New Roman”, serif; }
5 generic font families in CSS are:serif * sans-serif * cursive * fantasy * monospace
26
CSS - simple CSS properties for text formatting
Other font properties: font-weight (makes text bolder or lighter)
Specify values 100 to 900 (normal is 400) in increments of 100 Specify bold (700), bolder (+100), lighter (-100)
font-variant (creates “small caps” effect) Specify normal, small-caps
font-style (creates italic or slanted effect) Specify italic, normal, oblique
line-height (sets the height of the line but not text size) Specify normal, measurement, multiplier, percentage
27
CSS - simple CSS properties for text formatting
font shorthand property Shorthand property has 2 effects: sets properties to
default values and assigns specified values to designated properties
Shorthand for: font-family, font-size, font-weight, font-variant, font-style, and line-height
Format:selector { font: style variant weight size family }
note: values for weight, size, and family must be in that order!
Example:body { font: oblique small-caps small Verdana }
28
CSS - simple CSS properties for text formatting
Special text effects:
selector { text-decoration: blinkline-throughoverlineunderlinenone }
Removing underlines on hyperlinks:
a:link, a:visited { text-decoration: none; }a:hover { text-decoration: underline; }
29
CSS – backgrounds and background colors
background-color property: Similar to bgcolor attribute in html Gives you more flexibility than bgcolor because it lets you
change the background for specific parts of the page Values the background-color can take:
Color names, rgb codes, triplets of numbers, or triplets of percentages
transparent (default) – whatever background already exists will be shown
inherit – setting a value equal to that of the containing block’s value
30
CSS – backgrounds and background colors (con’t)
background-image property Similar to background attribute in <body> tag Values for the background-image property:
Image address url url will be calculated relative to wherever the rule appears Example:
Selector { background-image: url(bg.gif); }
Or
Selector { background-image: url(‘bg.gif’); }
Or
Selector { background-image: url(“bg.gif”); }
31
CSS – backgrounds and background colors (con’t)
background-repeat property Specifies whether or not the background image
tiles across the screen Values for the background-repeat property:
repeat (default) repeat-x repeat-y no-repeat inherit
32
CSS – backgrounds and background colors (con’t)
background-position property Use to change the location of the initial image Consists of two size values or percentages (one for
horizontal and one for vertical) OR if only one value is given, it sets the horizontal position
Values: A number and a unit (10px or 2em)
In CSS 1em is defined as the total height of the current font in use
px stands for pixel A percentage (50% 75%) Word values: top, bottom, left, right, center
33
CSS – backgrounds and background colors (con’t)
background-attachment property Images normally scroll with rest of the page but you
can modify so that image does not move Values:
scroll (default) fixed – image does not move relative to the original
position of the page inherit – value does not inherit from containing
block unless value is explicitly set to inherit
34
CSS – backgrounds and background colors (con’t)
background shorthand property Allows you to set several properties at once List the values you want (in any order) as the value for
background (values you do not set will be set to their default values)
Example:
body { color: white;
background: url(“bg.gif”) repeat-y fixed
top left red; }
35
CSS – alignment and spacing
text-align property – defines the way in which text lines up with the left or right margins
Values: center (centers the content) justify (justifies text on both sides) left (aligns content on the left) right (aligns content on the right)
Example:h1 { font-family: Verdana, sans-serif;
text-align: center; }
36
CSS – alignment and spacing (con’t)
text-indent property - indents the first line of an element by adding blank space (usually seen with <p> tags)
Example:p {text-indent: 3em }
Values: measurement (eg., 5em or 15px) negative measurement (sets a hanging indent) Percentage (value based on size of containing box)
37
CSS – alignment and spacing (con’t)
vertical-align property – most useful for creating superscripts or subscripts
Used only for inline elements OR table cells Values: baseline, bottom, middle, sub, super, text-
top, text-bottom, top, or some measurement (+ or -) or percentage (+ or -)
Example:.power { vertical-align: super;
font-size: smaller; }
Use in html by setting class attribute:
x<span class = “power”>2</span> = 64
38
CSS – alignment and spacing (con’t)
white-space property – allows control of whitespace condensation and word wrapping
Values: normal (normal word wrapping and whitespace condensation) nowrap (condenses whitespace but does not wrap lines) pre (wraps lines as in the source)
Example:.poem { white-space: pre; }Use in html by setting class attribute:<div class = “poem”> ...</div>
39
CSS – how cascading works
Cascade determines what rules apply:
mystyles.css:body { background-color: white; color: black; }h1 { background-color: blue;}
XHTML document:…<head><title> … </title><link type = “text/css” rel = “stylesheet” href = “mystyles.css”><style type = “text/css”>.myclass { background-color: red; }h1 { color: yellow; }</style></head><body><h1 style = “background-color: green;”>Hello <em class = “myclass”>World</em>!</h1></body></html>
See result at: http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html