CHAPTER THREE
Cascading Style Sheets (CSS)
Outline
CSS Basics
Style Properties
Introduction to CSS
Foreground and Background
CSS Syntax (CSS Selectors and Properties
Declarations)
Font and Text Properties
Attaching CSS with HTML (External ,
Table Styling Properties
Embedded and Inline)
More On Styling List (Creating
Style Sheet Rules
Navigation bars)
Style Rules Precedence
Layout and Positioning Properties
What is CSS
It is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page.
CSS is easy to learn and understand but it provides powerful
control over the presentation of an HTML document.
Most commonly, CSS is combined with the markup languages
HTML or XHTML.
3
What is CSS
Cascading Style Sheets (CSS)
Used to describe the arrangement of documents
Define sizes, spacing, fonts, colors, layout, etc.
Improve content accessibility
Improve flexibility
4
CSS Syntax
Some CSS styles are inherited and some not
Text-related properties are inherited font-size, font-
family, line-height, text-align, list-style, etc
Box-related and positioning styles are not inherited -
width, height, border, margin, padding, position,
float, etc.> elements do not inherit color and text-
decoration
5
CSS Syntax
/* These properties are inherited */
p{
color: blue;
font-size: 18px;
}
div {
color: red;
font-size: 14px;
}
section {
font-family: Arial, sans-serif;
}
/* The paragraph will inherit color and font-size from div and font-family: Arial
from section */If a p is inside the div
Properties that are commonly inherited:
color
font-family
font-size
line-height
text-align
visibility
Non-Inherited Properties:
•margin, padding, border, background, width, height, etc., are not inherited by default.
Style Sheets Syntax
Stylesheets consist of rules, selectors, declarations, properties and
values
Selectors are separated by comma
Declarations are separated by semicolons
Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }
8
Selectors
Selectors used to determine on which element the rule will be
applied:
All elements of specific type (tag)
Those that Mach a specific attribute (id, class, tr,td etc.)
9
Linking HTML and CSS
HTML (content) and CSS (presentation) can be linked in three
ways:
Inline: the CSS rules in the style attribute
No selectors are needed
Embedded: in the <head> in a <style> tag
External: CSS rules in separate file (best)
Usually a file with .css extension
Linked via <link rel="stylesheet" href=…>
10
Inline Styles: Example
inline-styles.html
<!DOCTYPE html">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 30pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
11
Embedded Styles
• Embedded in the HTML in the <style> tag:
• The <style> tag is placed in the <head> section of the
document
• Used for document-specific styles
<style>
...
<.style
12
Embedded Styles: Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
13
External CSS Styles
External linking
• Separate pages can all use a shared style sheet
• Only modify a single file to change the styles across
your entire Web site (see http://www.csszengarden.com/)
link tag (with a rel attribute)
• Specifies a relationship between current document
and another document
<link rel="stylesheet" type="text/css" href="styles.css">
link elements should be in the <head>
14
External Styles: Example (2)
external-styles.html styles.css
<!DOCTYPE html>
body
<html>
{
<head>
background-color: pink;
<link rel="stylesheet" href="styles.css">
}
</head>
h1 {
<body>
color: blue;
<h1>This is a heading</h1>
}
<p>This is a paragraph.</p>
p {
</body>
color: red;
</html>
}
15
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.
• There should always be at least one generic font
font-weight can be normal, bold, bolder, lighter or a
number in range [100 … 900]
16
CSS Rules for Fonts (2)
• font-style
• Values: normal, italic, oblique
• text-decoration
• Values: none, underline, line-trough, overline,
blink
• text-align
• Values: left, right, center, justify
17
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;
18
Backgrounds
• background-image
• URL of image to be used as background, e.g.:
background-image:url("back.gif");
• background-color
• Using color
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll
19
Backgrounds (2)
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%;
20
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, …
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
margin is the spacing outside of the border
padding is the spacing between the border and the
content
Numerical value, e.g. 10px or -5px
Can be defined for each of the four sides separately -
margin-top, padding-left, …
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
The Box Model
25
Positioning
position: defines the positioning of the element in the page
content flow
The value is one of:
• static (default)
• relative – relative position according to where the element
would appear with static position
• absolute – position according to the innermost positioned
parent element
• fixed – same as absolute, but ignores page scrolling
26
Float
• float: the element “floats” to one side
• left: places the element on the left and following content
on the right
• right: places the element on the right and following
content on the left
• margins of floated elements do not collapse
• floated inline elements can apply height
27
Clear
• clear
Sets the sides of the element where other floating
elements are NOT allowed
Used to "drop" elements below floated ones or expand a
container, which contains only floated children
Possible values: left, right, both
• Clearing floats
additional element (<div>) with a clear style
28
Opacity
• opacity: specifies the opacity of the element
• Floating point number from 0 to 1
• For old Mozilla browsers use –moz-opacity
• For IE use filter:alpha(opacity=value) where value is
from 0 to 100; also,
29
Visibility
• visibility
• Determines whether the element is visible
• hidden: element is not rendered, but still occupies
place on the page (similar to opacity:0)
• visible: element is rendered normally
30
Display
• display: controls the display of the element and the way it is
rendered and if breaks should be placed before and after the element
• inline: no breaks are placed before and after (<span> is an inline
element)
• block: breaks are placed before AND after the element (<div> is
a block element)
• none: element is hidden and its dimensions are not used to
calculate the surrounding elements rendering (differs from
visibility: hidden!)
31
Overflow
• overflow: defines the behavior of element when content
needs more space than you have specified by the size
properties or for other reasons. Values:
visible (default) – content spills out of the element
auto - show scrollbars if needed
scroll – always show scrollbars
hidden – any content that cannot fit is clipped
32
Other CSS Properties
• cursor: specifies the look of the mouse cursor
when placed over the element
• Values: crosshair, help, pointer, progress,
move, hair, col-resize, row-resize, text,
wait, copy, drop, and others
• white-space – controls the line breaking of text.
Value is one of:
• nowrap – keeps the text on one line
• normal (default) – browser decides whether to
brake the lines if needed
33
Table Styling Properties
• Table Borders
table, th, td {
border: 1px solid;
}
• Table widith thight
• table {
width: 100%;
height:40%;
}
Cont.
• CSS Table Alignment
td {
text-align: center;
vertical-align: bottom;
}
CSS: Creating Navigation Bars
<ul id="navbar">
<li><a href="/tests">Home</a></li>
<li><a href="/studyroom">About US</a></li>
<li><a href="/flashcards">contact US</a></li>
<li><a href="/library">help</a></li>
<li><a href="/testimonials">login</a></li>
</ul>
Cont..
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #EEEEEE;
}
Cont..
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
text-decoration: none;
}
Cont..
ul#navbar li a:hover {
background-color: orange;
color: white;
}
Cont..
ul#navbar li {
display: inline;
CSS Measuring Units
• CSS Units
• CSS has several different
units for expressing a
length.
• Many CSS properties take
"length" values, such as
width, margin, padding,
font-size, etc.
Benefits of using CSS
• More powerful formatting than using presentation
tags
• Your pages load faster, because browsers cache
the .css files
• Increased accessibility, because rules can be
defined according given media
• Pages are easier to maintain and update
42
