1 CSS for Styling
CS380
Cascading Style Sheets (CSS)
2
Describes the appearance, layout, and presentation
of information on a web page
HTML describes the content of the page
Describes how information is to be displayed, not
what is being displayed
Can be embedded in HTML document or placed
into separate .css file
CS380
CSS ...
3
A simple mechanism for controlling the style of
a Web document without compromising its
structure.
It allows you to separate visual design
elements (layout, fonts, colors, margins, and so
on) from the contents of a Web page.
Allows for faster downloads, streamlined site
maintenance, and global control of design
attributes across multiple pages.
CS380
How to write CSS?
4
Selector
HTML element tags
(examples: p, h2, body, img, table)
class and ID names
Property (examples: color, font-size)
Value (examples: red, 14pt)
CS380
How to write CSS?
5
The basic syntax of a CSS rule:
selector {property 1: value 1; property 2:
value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before
each value!
CS380
Cascading Style Sheet
6
Enter the following text into a new Notepad
document
h2 {
font-family : Tahoma;
color : blue;
text-align : center;
}
Save the document in the commons folder as
csense.css
Save as file type Text Document
CS380
CSS Selectors
7
The element Selector
Example:
p{
text-align: center;
color: red;
}
CS380
CSS Selectors
8
The id Selector
The id selector uses the id attribute of an HTML
element to select a specific element.
The id of an element should be unique within a
page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash
(#) character, followed by the id of the element.
CS380
CSS Selectors
9
Example:
<!DOCTYPE html>
<html><head><style>
#para1 { text-align: center; color: red;}
</style></head><body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
CSS Selectors
10
The class Selector
The class selector selects elements with a specific
class attribute.
To select elements with a specific class, write a
period (.) character, followed by the name of the
class.
CS380
CSS Selectors
11
Example:
<style>
.center { text-align: center; color: red; }
</style>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
CS380
CSS Selectors
12
Grouping Selectors:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;}
p {text-align: center;color: red;}
CS380
Modifying CSS styles
13
h2 {font-family : Tahoma;
color: blue;
text-align: center;
text-transform :
uppercase;
}
body {font-family : Courier
New;background-color :
#FFEEDD;color : #777733;
}
Basic CSS rule syntax
14
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
A CSS file consists of one or more rules
Each rule starts with a selector
A selector specifies an HTML element(s) and then applies style
properties to them
a selector of * selects all elements
Attaching a CSS file <link>
15
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
A page can link to multiple style sheet files
In case of a conflict (two sheets define a style for the same HTML
element), the latter sheet's properties will be used
CS380
Embedding style sheets: <style>
16
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
CSS code can be embedded within the head of an HTML page
Bad style and should be avoided when possible (why?)
CS380
Inline styles: the style attribute
17
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
Higher precedence than embedded or linked styles
Used for one-time overrides and styling a particular element
Bad style and should be avoided when possible (why?)
CS380
CSS properties for colors
18
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
property description
color color of the element's text
color that will appear behind the
background-color
element
CS380
Specifying colors
19
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Grouping styles
20
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
A style can select multiple elements separated by commas
The individual elements can also have their own styles
CS380
CSS comments /*…*/
21
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
The // single-line comment style is NOT supported in CSS
The <!-- ... --> HTML comment style is also NOT supported in
CSS
CS380
CSS properties for fonts
22
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)
CS380
font-family
23
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
Enclose multi-word font names in quotes
CS380
More about font-family
24
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
We can specify multiple fonts from highest to lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy, monospace
If the first font is not found on the user's computer, the
next is tried
Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
CS380
font-size
25
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
vague font sizes: ,
xx-small x-small , , medium, large, x-large, xx-
small
large, smaller, larger
percentage font sizes, e.g.: 90%, 120%
CS380
font-size
26
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
pt specifies number of point, where a point is 1/72 of an inch
onscreen
px specifies a number of pixels on the screen
em specifies number of m-widths, where 1 em is equal to the
font's current size
CS380
font-weight, font-style
27
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
Either of the above can be set to normal to turn them off (e.g.
headings)
CS380
CSS properties for text
28
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
gaps between the various portions of
word-spacing,
the text
letter-spacing
indents the first letter of each
text-indent
paragraph
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)
CS380
text-align
29
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
text-align can be left, right, center, or
justify
CS380
text-decoration
30
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
can also be overline, line-through, blink, or
none
effects can be combined:
text-decoration: overline underline;
CS380
The list-style-type property
31
ol { list-style-type: lower-roman; }
CSS
Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
CS380
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
Body styles
32
body {
font-size: 16px;
}
CSS
Applies a style to the entire body of your page
Saves you from manually applying a style to each element
CS380
Cascading Style Sheets
33
Properties of an element cascade together in this
order:
browser's default styles
external style sheet files (in a <link> tag)
internal style sheets (inside a <style> tag in the page's
header)
inline style (the style attribute of the HTML element)
CS380
Cascading Style Sheets
34
Internal Stylesheet: An internal stylesheet holds
the CSS code for the webpage in the head section of
the particular file. This makes it easy to apply styles
like classes or id's in order to reuse the code. The
downside of using an internal stylesheet is that
changes to the internal stylesheet only effect the page
the code is inserted into.
CS380
Cascading Style Sheets
35
External Stylesheet: The External Stylesheet is a .css
file that you link your website to. This makes it so that
what ever you change in the .css sheet, will effect
every page in your website. This prevents you from
having to make many code changes in each page. This
is for "global" site changes.
CS380
Cascading Style Sheets
36
Inline Styles: The Inline style is specific to the tag
itself. The inline style uses the HTML "style" attribute
to style a specific tag. This is not recommended, as
every CSS change has to be made in every tag that
has the inline style applied to it. The Inline style is
good for one an individual CSS change that you do
not use repeatedly through the site.
CS380
Cascading Style Sheets
37
Internal CSS Stylesheet Example:
<head> <br /> <style type="text/css">
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style><br />
</head>
CS380
Cascading Style Sheets
38
Inline CSS Example:
<p style="color: sienna; margin-left: 20px”>This is a
paragraph.
would show the paragraph as
“This is a paragraph.”
Cascading Style Sheets
39
External CSS Example:
<head>
css” href=”mystyle.css” />
</head>
CS380
Inheriting styles
40
body { font-family: sans-serif; background-color: yellow;
}
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
A styled paragraph. Previous slides are available on the website.
• A bulleted list output
when multiple styles apply to an element, they are inherited
a more tightly matching rule can override a more general
inherited rule
CS380
Styles that conflict
41
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
This heading uses both styles above.
output
when two styles set conflicting values for the same property,
the latter style takes precedence
CS380
W3C CSS Validator
42
<p>
<a href="http://jigsaw.w3.org/css-
validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS
output
jigsaw.w3.org/css-validator/
checks your CSS to make sure it meets the official CSS
specifications
CS380
CSS properties for backgrounds
43
property description
background-color color to fill background
background-image image to place in background
background-position placement of bg image within element
whether/how bg image should be
background-repeat
repeated
background-attachment whether bg image scrolls with page
shorthand to set all background
background
properties
CS380
background-image
44
body {
background-image: url("images/draft.jpg");
}
CSS
background image/color fills the element's content area
CS380
background-repeat
45
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
can be repeat (default), repeat-x, repeat-y, or no-repeat
CS380
background-position
46
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
value consists of two tokens, each of which can be top, left,
right, bottom, center, a percentage, or a length value in px, pt,
etc.
value can be negative to shift left/up by a given amount
CS380
Aside: Favorites icon ("favicon")
47
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML
<link href="yahoo.gif" type="image/gif" rel="shortcut
icon" />
HTML
The link tag, placed in the HTML page's head section, can
specify an icon
this icon will be placed in the browser title bar and bookmark/favorite
CS380
