CASCADING STYLE SHEETS (CSS)
INTRO TO CSS
Cascading Style Sheet (CSS) is used
to set the style in web pages that
contain HTML elements.
It sets the background color, font-
size, font-family, color, … etc.
properties of elements on a web
page.
WHAT IS CSS?
Cascading Style Sheet
Stylesheet Language
Standards-based set of properties and attributes to define
styles
To describe the presentation a document written in a
‘markup language’ like HTML or XML
Defines the style of how things in tags appear.
Font, color, size, margins, etc.
Cascading
Rules to determine how to
apply markup that contains
other markup
WHY CSS?
Separate Content from Form
Content is the text and images, marked up to define regions of
specific types
Form defines the “style” for the content
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
The old way: </font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
WHY CSS? CONTINUED.
Separate Content from Form
Content
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).
Form or Style
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
WHAT DOES THIS SEPARATION GET US?
Separate Content from Form
Specify the style once for every instance of that class.
Example: Specify the font once for all text on the HTML page that
you’ve identified as a “header”.
The stylesheet can be a separate file which all HTML pages
on your entire site can link to.
Only have to specify the style once for your ENITRE SITE
Can change the style for your entire site by editing only
ONE FILE.
CSS SKINNING
“Skinning” - changing the look of a page or your site
Selecting an appearance by choosing which stylesheet to use.
<link rel="stylesheet" type="text/css" href=“skin1.css" />
<p class=“info”>My Information 1 goes here</p>
+
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
Some information goes here.
CSS SKINNING 2
“Skinning” - changing the look of a page or your site
Selecting an appearance by choosing which stylesheet to use.
<link rel="stylesheet" type="text/css" href=“skin2.css" />
<p class=“info”>My Information 1 goes here</p>
+
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=
Some information goes here.
CSS SYNTAX
3 Elements to a CSS Statement
Selector
What HTML sections does it affect?
Property
What attribute of that HTML section will be affected?
Value
What change will be made to that attribute?
THREE CSS DEFINITION LOCATIONS
Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style attribute.
Internal: the <style> markup tag
<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
External: the .css stylesheet file
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CSS SYNTAX: SELECTORS
There are many kinds of selectors and many ways to reference them:
Type, Class, ID, Pseudo, etc.
HTML Type Tag – selected with the tag type
p{ font-size: 10px;
font-color: White; }
<p>Content</p>
The Class Attribute – precede the class with a period
.myinfo { font-size: 10px;
font-color: White; }
<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CASCADING INHERITANCE
Nested elements inherit
the properties from the
its parent
If you specify a style for the body { font-family: Verdana;
<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
If you want to override .littletext { font-size: 8px; }
inherited settings, you <body>
need to specify a style in This text is larger.
a more local element <p class=“littletext”>This text is
smaller.</p>
TEXT-RELATED CSS PROPERTIES
color – specifies the color of the text
font-size – size of font: xx-small, x-
small, small, medium, large, x-large, xx-
large, smaller, larger or numeric value
font-family – comma separated font names
Example: verdana, sans-serif, etc.
The browser loads the first one that is
available
There should always be at least one generic
font
font-weight can be normal, bold, bolder,
lighter or a number in range [100 … 900]
13
CSS RULES FOR FONTS
font-style – styles the font
Values: normal, italic, oblique
text-decoration – decorates the text
Values: none, underline, line-trough, overline,
blink
text-align – defines the alignment of text or other
content
Values: left, right, center, justify
14
SHORTHAND FONT PROPERTY
font
Shorthand rule for setting multiple font properties at the
same time
font:italic normal bold 12px/16px verdana
is equal to writing this:
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
15
BACKGROUNDS
background-image
URL of image to be used as background, e.g.:
background-image:url("back.gif");
background-color
Using color and image and the same time
background-repeat
repeat-x, repeat-y, repeat, no-repeat
background-attachment
fixed / scroll
16
BACKGROUNDS
background-position: specifies vertical and
horizontal position of the background image
Vertical position: top, center, bottom
Horizontal position: left, center, right
Both can be specified in percentage or other numerical
values
Examples:
background-position: top left;
background-position: -5px 50%;
17
BACKGROUND SHORTHAND PROPERTY
background:shorthand rule for setting
background properties at the same time:
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
Some browsers will not apply BOTH color and
image for background if using shorthand rule
18
BACKGROUND-IMAGE OR <IMG>?
Background images allow you to save many image
tags from the HTML
Leads to less code
More content-oriented approach
All images that are not part of the page content (and
are used only for "beautification") should be moved to
the CSS
19
BORDERS
border-width: thin, medium, thick or numerical
value (e.g. 10px)
border-color: color alias or RGB value
border-style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset
Each property can be defined separately for left, top,
bottom and right
border-top-style, border-left-color, …
20
BORDER SHORTHAND PROPERTY
border: shorthand rule for setting border properties
at once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
Specify different borders for the sides via shorthand
rules: border-top, border-left, border-right,
border-bottom
When to avoid border:0
21
WIDTH AND HEIGHT
width – defines numerical value for the width of
element, e.g. 200px
height – defines numerical value for the height of
element, e.g. 100px
By default the height of an element is defined by its
content
Inline elements do not apply height, unless you change
their display style.
22
MARGIN AND PADDING
margin and padding define the spacing around the
element
Numerical value, e.g. 10px or -5px
Can be defined for each of the four sides separately -
margin-top, padding-left, …
margin is the spacing outside of the border
padding is the spacing between the border and the
content
What are collapsing margins?
23
MARGIN AND PADDING: SHORT
RULES
margin: 5px;
Sets all four sides to have margin of 5 px;
margin: 10px 20px;
top and bottom to 10px, left and right to 20px;
margin: 5px 3px 8px;
top 5px, left/right 3px, bottom 8px
margin: 1px 3px 5px 7px;
top, right, bottom, left (clockwise from top)
Same for padding
24
