Scribd
Upload
5 views102 pages

Unit 03-CSS

This document introduces Cascading Style Sheets (CSS), explaining its purpose in separating content from presentation in web development. It covers CSS syntax, benefits, versions, browser adoption, and different locations for styles, emphasizing the importance of maintainability and accessibility. The document also details selectors, properties, values, and units of measurement in CSS.

Uploaded by

ash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views102 pages

Unit 03-CSS

This document introduces Cascading Style Sheets (CSS), explaining its purpose in separating content from presentation in web development. It covers CSS syntax, benefits, versions, browser adoption, and different locations for styles, emphasizing the importance of maintainability and accessibility. The document also details selectors, properties, values, and units of measurement in CSS.

Uploaded by

ash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 102

Unit-03

Cascading Style Sheets


(CSS) : Introduction

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com
Objectives
1 What is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 The Cascade:
How Styles 6 The Box
Model
Interact

7 CSS Text
Styling
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
WHAT IS CSS?
HTML should not describe the formatting or presentation of
documents.

Instead that presentation task is best performed using cascading style


sheets (CSS) language.

The principal mechanism for web authors to modify the visual


presentation of their web pages through CSS because it has its own
syntax rules.

CSS can be added directly to any HTML element (via the style
attribute), within the <head> element, or, most commonly, in a
separate text file that contains only CSS.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


What is CSS?
You be styling soon

CSS is a W3C standard for describing the presentation (or


appearance) of HTML elements.
With CSS, we can assign
• font properties,
• colors,
• sizes,
• borders,
• background images,
• even the position of elements.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Benefits of CSS
Why using CSS is a better way of describing presentation than HTML
• Improved control over formatting. The degree of formatting
control in CSS is significantly better than that provided in HTML.
CSS gives web authors fine-grained control over the appearance
of their web content.
• Improved site maintainability. Websites become significantly
more maintainable because all formatting can be centralized
into one CSS file, or a small handful of them. This allows you to
make site-wide visual modifications by changing a single file.
• Improved accessibility. CSS-driven sites are more accessible. By
keeping presentation out of the HTML, screen readers and
other accessibility tools work better, thereby providing a
significantly enriched experience for those reliant on
accessibility tools.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Benefits of CSS
Why using CSS is a better way of describing presentation than HTML
• Improved page download speed. A site built using a centralized
set of CSS files for all presentation will also be quicker to
download because each individual HTML file will contain less
style information and markup, and thus be smaller.
• Improved output flexibility. CSS can be used to adopt a page
for different output media. This approach to CSS page design is
often referred to as responsive design

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


CSS Versions
Let’s just say there’s more than 1

• W3C published the CSS Level 1 Recommendation in 1996. Before that


JavaScript Style sheets were used by Netscape.
• A year later, the CSS Level 2 Recommendation (also more succinctly
labeled simply as CSS2) was published.
• Even though work began over a decade ago, an updated version of the
Level 2 Recommendation, CSS2.1, did not become an official W3C
Recommendation until June 2011.
• And to complicate matters even more, all through the last decade (and
to the present day as well), during the same time the CSS2.1 standard
was being worked on, a different group at the W3C was working on a
CSS3 draft.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Browser Adoption
Insert obligatory snide comment about Internet Explorer 6 here

While Microsoft’s Internet Explorer was an early champion of CSS, its


later versions (especially IE5, IE6, IE7 and IE9) for Windows had uneven
support for certain parts of CSS2.
In fact, all browsers have left certain parts of the CSS2
Recommendation unimplemented.
CSS has a reputation for being a somewhat frustrating language.
This reputation is well deserved!
CSS was not really designed to be a layout language, so authors often
find it tricky dealing with floating elements, relative positions,
inconsistent height handling, overlapping margins, and nonintuitive
naming

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 2 of 7

CSS SYNTAX
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
CSS Syntax
Rules, properties, values, declarations

A CSS document consists of one or more style rules.


A rule consists of a selector that identifies the HTML element or elements
that will be affected, followed by a series of property and value pairs (each
pair is also called a declaration).
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Declaration Blocks
The series of declarations is also called the declaration block.
• A declaration block can be together on a single line, or spread across
multiple lines.
• The browser
declaration
ignores white
space selector { property: value; property2: value2; } rule
syntax

• Each declaration
declaration block
is terminated with
a semicolon.
selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Selectors
Which elements

Every CSS rule begins with a selector.


The selector identifies which element or elements in the HTML document
will be affected by the declarations in the rule.
Another way of thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive the style.
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Properties
Which style properties of the selected elements

Each individual CSS declaration must contain a property.


These property names are predefined by the CSS standard.
The CSS2.1 Recommendation defines over a hundred different property
names.
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Properties
Common CSS properties

Property Type Property


Font, font-family, font-size
font-style
Fonts font-weight
@font-face

letter-spacing, line-height, text-align


text-decoration
Text text-indent

Background, background-color
background-image, background-position
Color and background background-repeat
Color

Border, border-color, border-width


border-style, border-top
border-top-color, border-top-width
Borders etc

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Properties
Common CSS properties continued.

Property Type Property


padding
padding-bottom, padding-left, padding-right, padding-top
Spacing margin
margin-bottom, margin-left, margin-right, margin-top
height
max-height
max-width
Sizing min-height
min-width
width
bottom, left, right, top
clear
display
float
Layout overflow
position
visibility
z-index
list-style
list-style-image
Lists list-style-type

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Values
What style value for the properties

Each CSS declaration also contains a value for a property.


•The unit of any given value is dependent upon the
property.
•Some property values are from a predefined list of
keywords.
•Others are values such as length measurements,
percentages, numbers without units, color values, and
URLs.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Color Values
CSS supports a variety of different ways of describing color
Method Description Example
Use one of 17 standard color names. CSS3 has 140 standard color: red;
names. color: Hpink; /* CSS3
Name only */

Uses three different numbers between 0 and 255 to describe color: rgb(255,0,0);
the Red, Green, and Blue values for the color. color:
RGB rgb(255,105,180);

Uses a six-digit hexadecimal number to describe the red, green, color: #FF0000;
and blue value of the color; each of the three RGB values is color: #FF69B4;
Hexadecimal between 0 and FF (which is 255 in decimal). Notice that the
hexadecimal number is preceded by a hash or pound symbol (#).

Allows you to add an alpha, or transparency, value. This allows a color: rgb(255,0,0,
background color or image to “show through” the color. 0.5);
RGBa Transparency is a value between 0.0 (fully transparent) and 1.0
(fully opaque).

Allows you to specify a color using Hue Saturation and Light color:
values. This is available only in CSS3. HSLA is also available as hsl(0,100%,100%);
well. color:
HSL hsl(330,59%,100%);

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Units of Measurement
There are multiple ways of specifying a unit of measurement in CSS

Some of these are relative units, in that they are based on the value of
something else, such as the size of a parent element.
Others are absolute units, in that they have a real-world size.
Unless you are defining a style sheet for printing, it is recommended to
avoid using absolute units.
Pixels are perhaps the one popular exception (though as we shall see
later there are also good reasons for avoiding the pixel unit).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Relative Units
Unit Description Type
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is Relative (CSS2)
absolute (1/96 of an inch).
Absolute (CSS3)
em Equal to the computed value of the font-size property of the Relative
element on which it is used. When used for font sizes, the em
unit is in relation to the font size of the parent.
% A measure that is always relative to another value. The precise Relative
meaning of % varies depending upon which property it is being
used.
ex A rarely used relative measure that expresses size in relation to Relative
the x-height of an element’s font.
ch Another rarely used relative measure; this one expresses size in Relative
relation to the width of the zero ("0") character of an element’s
font. (CSS3 only)

rem Stands for root em, which is the font size of the root element. Relative
Unlike em, which may be different for each element, the rem is
constant throughout the document. (CSS3 only)

vw, vh Stands for viewport width and viewport height. Both are Relative
percentage values (between 0 and 100) of the viewport (browser
window). This allows an item to change size when the viewport (CSS3 only)
is resized.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Absolute Units
Unit Description Type

in Inches Absolute

cm Centimeters Absolute

mm Millimeters Absolute

pt Points (equal to 1/72 of an inch) Absolute

pc Pica (equal to 1/6 of an inch) Absolute

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Comments in CSS
It is often helpful to add comments to your style sheets. Comments
take the form:

/* comment goes here */

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 3 of 7

LOCATION OF STYLES
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Actually there are three …
Different types of style sheet

Author-created style sheets (what we are learning in


this presentation).
User style sheets allow the individual user to tell the
browser to display pages using that individual’s own
custom style sheet. This option is available in a
browser usually in its accessibility options area.
The browser style sheet defines the default styles the
browser uses for each HTML element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Style Locations
Author Created CSS style rules can be located in three different locations

CSS style rules can be located in three different


locations.
•Inline
•Embedded
•External
You can combine all 3!

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Inline Styles
Style rules placed within an HTML element via the style attribute

Inline styles are style rules placed within an HTML element via
the style attribute
An inline style only affects the element it is defined within and
will override any other style definitions for the properties used in
the inline style.
Using inline styles is generally discouraged since they increase
bandwidth and decrease maintainability.
Inline styles can however be handy for quickly testing out a style
change.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element of HTML document

While better than inline styles, using embedded styles is also by and
large discouraged.
Since each HTML document has its own <style> element, it is more
difficult to consistently style multiple documents when using
embedded styles.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
External Style Sheet
Style rules placed within a external text file with the .css extension

This is by far the most common place to locate style rules because it
provides the best maintainability.
•When you make a change to an external style sheet, all HTML
documents that reference that style sheet will automatically use the
updated version.
•The browser is able to cache the external style sheet which can
improve the performance of the site
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Section 4 of 7

SELECTORS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Selectors
Things that make your life easier

When defining CSS rules, you will need to first need to


use a selector to tell the browser which elements will
be affected.
CSS selectors allow you to select
•individual elemenets
•multiple HTML elements,
•elements that belong together in some way, or
•elements that are positioned in specific ways in
the document hierarchy.
There are a number of different selector types.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Element Selectors
Selects all instances of a given HTML element

Uses the HTML element name.


You can select all elements by using the universal element selector,
which is the * (asterisk) character.
declaration

selector { property: value; property2: value2; } rule

declaration block
selector

em { color: red; }

property value

p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Grouped Selectors
Selecting multiple things

You can select a group of elements by separating the different element


names with commas.
This is a sensible way to reduce the size and complexity of your CSS files,
by combining multiple identical rules into a single rule.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Reset

Grouped selectors are often used as a way to quickly reset or remove


browser defaults.
The goal of doing so is to reduce browser inconsistencies with things
such as margins, line heights, and font sizes.
These reset styles can be placed in their own css file (perhaps called
reset.css) and linked to the page before any other external styles
sheets.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Class Selectors
Simultaneously target different HTML elements

A class selector allows you to simultaneously target


different HTML elements regardless of their position in
the document tree.
If a series of HTML element have been labeled with
the same class attribute value, then you can target
them for styling by using a class selector, which takes
the form: period (.) followed by the class name.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: brown;
}
</style>
</head> .first {
<body> font-style: italic;
<h1 class="first">Reviews</h1>
<div> color: brown;
<p class="first">By Ricardo on }
<time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p class="first">By Susan on
<time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Class Selectors

• You can also specify that only specific HTML elements should be
affected by a class. In the example below, only <p> elements with
class="center" will be center-aligned:

p.center {text-align: center;}

• HTML elements can also refer to more than one class. In the
example below, the <p> element will be styled according to
class="center" and to class="large":

<p class="center large">This paragraph


refers to two classes.</p>

http://www.w3schools.com/css/css_syntax.asp
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Id Selectors
Target a specific element by its id attribute

An id selector allows you to target a specific element


by its id attribute regardless of its type or position.
If an HTML element has been labeled with an id
attribute, then you can target it for styling by using an
id selector, which takes the form: pound/hash (#)
followed by the id name.

Note: You should only be using an id once per page

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Id Selectors
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central
Park</title>
<style>
#latestComment {
font-style: italic;
color: brown;
}
</style>
</head> #latestComment {
<body> font-style: italic;
<h1>Reviews</h1>
color: brown;
<div id="latestComment">
<p>By Ricardo on <time>September 15, }
2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1,
2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Id versus Class Selectors
How to decide

Id selectors should only be used when referencing a


single HTML element since an id attribute can only be
assigned to a single HTML element.
Class selectors should be used when (potentially)
referencing several related elements.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Attribute Selectors
Selecting via presence of element attribute or by the value of an attribute

An attribute selector provides a way to select HTML


elements by either the presence of an element
attribute or by the value of an attribute.
This can be a very powerful technique, but because of
uneven support by some of the browsers, not all web
authors have used them.
Attribute selectors can be a very helpful technique in
the styling of hyperlinks and images.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Attribute Selectors
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels</title> [title] {
<style> cursor: help;
padding-bottom: 3px;
[title] {
border-bottom: 2px dotted blue;
cursor: help; text-decoration: none;
padding-bottom: 3px; }
border-bottom: 2px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" />
<h2><a href="countries.php?id=CA" title="see posts from
Canada">
Canada</a>
</h2>
<p>Canada is a North American country consisting of … </p>
<div>
<img src="images/square/6114907897.jpg" title="At top of
Sulpher Mountain">
<img src="images/square/6592317633.jpg" title="Grace
Presbyterian Church">
<img src="images/square/6592914823.jpg" title="Calgary
Downtown">
</div>
</div>
</body>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Pseudo Selectors
Select something that does not exist explicitly as an element

A pseudo-element selector is a way to select


something that does not exist explicitly as an element
in the HTML document tree but which is still a
recognizable selectable object.
A pseudo-class selector does apply to an HTML
element, but targets either a particular state or, in
CSS3, a variety of family relationships.
The most common use of this type of selectors is for
targeting link states.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Pseudo Selectors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Contextual Selectors
Select elements based on their ancestors, descendants, or siblings

A contextual selector (in CSS3 also called


combinators) allows you to select elements based on
their ancestors, descendants, or siblings.
That is, it selects elements based on their context or
their relation to other elements in the document tree.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Contextual Selectors
Selector Matches Example

div p
A specified element that is
Descendant contained somewhere within Selects a <p> element that is contained
another specified element somewhere within a <div> element. That is, the
<p> can be any descendant, not just a child.

A specified element that is a div>h2


Child direct child of the specified Selects an <h2> element that is a child of a <div>
element element.

A specified element that is


Adjacent the next sibling (i.e., comes h3+p
Sibling directly after) of the Selects the first <p> after any <h3>.
specified element.

A specified element that h3~p


General shares the same parent as
Sibling Selects all the <p> elements that share the same
the specified element. parent as the <h3>.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Descendant Selector
Selects all elements that are contained within another element

While some of these contextual selectors are used


relatively infrequently, almost all web authors find
themselves using descendant selectors.
A descendant selector matches all elements that are
contained within another element. The character used
to indicate descendant selection is the space character.

context selected element

div p { … } #main div p:first-child { … }

Selects a <p> element Selects the first <p> element


somewhere somewhere within a <div> element
within a <div> element that is somewhere within an element
with an id="main"

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Contextual Selectors in
Action
<body>
<nav>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
ul a:link { color: blue; } <li><a href="#">United States</a></li>
#main time { color: red; }
</ul>
</nav>
<div id="main">
Comments as of <time>November 15, 2012</time>
<div>
#main>time { color: purple; } <p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
#main div p:first-child { <p>By Susan on <time>October 1, 2012</time></p>
color: green; <p>I love Central Park.</p>
} </div>
<hr/>
</div>
<footer>
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Browse</a> | </li>
</ul>
</footer>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 5 of 7
THE CASCADE: HOW STYLES INTERACT

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Why Conflict Happens
In CSS that is

Because
• there are three different types of style sheets
(author-created, user-defined, and the default
browser style sheet),
• author-created stylesheets can define multiple rules
for the same HTML element,
CSS has a system to help the browser determine how
to display elements when different style rules conflict.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Cascade
How conflicting rules are handled in CSS

The “Cascade” in CSS refers to how conflicting rules


are handled.
The visual metaphor behind the term cascade is that
of a mountain stream progressing downstream over
rocks.
The downward movement of water down a cascade is
meant to be analogous to how a given style rule will
continue to take precedence with child elements.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Cascade Principles

CSS uses the following cascade principles to help it


deal with conflicts:
• inheritance,
• specificity,
• location

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Inheritance
Cascade Principle #1

Many (but not all) CSS properties affect not only


themselves but their descendants as well.
Font, color, list, and text properties are inheritable.
Layout, sizing, border, background and spacing
properties are not.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Inheritance
body {
font-family: Arial; inherited
<html> color: red; inherited
border: 8pt solid green; not inherited
margin: 100px; not inherited
}
<head> <body>

<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>

<a> <strong> <p> <p> <p> <p> <small>

<time> <time>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Inheritance
How to force inheritance

It is possible to tell elements to inherit properties that are normally not


inheritable.
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green;
}
p {
border: inherit;
margin: inherit;
}

<h3>Reviews</h3>
<div>
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Inheritance
<html> div {
font-weight: bold; inherited
margin: 50px; not inherited
border: 1pt solid green; not inherited
<head> <body> }

<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>

<a> <strong> <p> <p> <p> <p> <small>

<time> <time>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specificity
Cascade Principle #2

Specificity is how the browser determines which style


rule takes precedence when more than one style rule
could be applied to the same element.
The more specific the selector, the more it takes
precedence (i.e., overrides the previous definition).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specificity
How it works

The way that specificity works in the browser is that


the browser assigns a weight to each style rule.
When several rules apply, the one with the greatest
weight takes precedence.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specificity
body { This text is not within a p element.
font-weight: bold; <p>Reviews</p>
These color and font-weight color: red; <div>
properties are inheritable } <p>By Ricardo on <time>September 15, 2012</time></p>
and thus potentially <p>Easy on the HDR buddy.</p>
applicable to all the child div { This text is not within a p element.
elements contained within font-weight: normal; </div>
the body. color: magenta; <hr/>
}
However, because the <div>
<div> and <p> elements p { <p>By Susan on <time>October 1, 2012</time></p>
also have the same color: green; <p>I love Central Park.</p>
properties set, they } </div>
override the value defined <hr/>
for the <body> element .last {
because their selectors (div color: blue; <div>
and p) are more specific. } <p class="last">By Dave on <time>October 15, 2012</time></p>
<p class="last" id="verylast">Thanks for posting.</p>
#verylast { </div>
Class selectors are more color: orange; <hr/>
specific than element font-size: 16pt;
selectors, and thus take }
precedence and
override element
selectors.

Id selectors are more


specific than class
selectors, and thus take
precedence and
override class selectors.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specificity Algorithm
The algorithm that is used to determine specificity is :

First count 1 if the declaration is from a 'style' attribute


in the HTML, 0 otherwise (let that value = a).
Count the number of ID attributes in the selector (let
that value = b).
Count the number of other attributes and pseudo-
classes in the selector (let that value = c).
Count the number of element names and pseudo-
elements in the selector (let that value = d).
Finally, concatenate the four numbers a+b+c+d
together to calculate the selector’s specificity.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specificity Algorithm Specificity Value
div {
element selector color: green; 0001
}

1 div form {
descendant selector overrides color: orange; 0002
}
(elements only)

2
overrides
class and attribute .example {
color: blue; 0010
selectors }

3
#firstExample {
id selector overrides
color: magenta; 0100
}

4
overrides id + div #firstExample {
additional color: grey; 0101
}
selectors
A higher specificity value
overrides lower specificity
values

inline style 5
overrides <div style="color: red;"> 1000
attribute

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Location
Cascade Principle #3

When inheritance and specificity cannot determine


style precedence, the principle of location will be
used.
The principle of location is that when rules have the
same specificity, then the latest are given more weight.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Location
Browser’s
default style
settings

user-styles.css #example {
1 color: green;
overrides }

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
<link rel="stylesheet" href="stylesWW.css" /> overrides

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>
Can you guess what will be the color of the sample text ?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Location
What color would the sample text be if there wasn’t an inline style definition?

Browser’s
default style
settings

user-styles.css #example {
1 color: green;
overrides }

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
<link rel="stylesheet" href="stylesWW.css" /> overrides

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Location
There’s always an exception

There is one exception to the principle of location.


If a property is marked with !important in an author-
created style rule, then it will override any other
author-created style regardless of its location.
The only exception is a style marked with !important in
an user style sheet; such a rule will override all others.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 6 of 7

THE BOX MODEL


Randy Connolly and Ricardo Hoar Fundamentals of Web Development
The Box Model
Time to think inside the box

In CSS, all HTML elements exist within an element box.


It is absolutely essential that you familiarize yourself
with the terminology and relationship of the CSS
properties within the element box.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


The Box Model
margin
border
padding

Every CSS rule begins withwidth


a selector. The selector identifies
which element or elements in the HTML document will be
height
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
element content area
by the browser to select the HTML elements that will receive
background-color/background-image of element

background-color/background-image of element’s parent

Every CSS rule begins with a selector. The selector identifies


which element or elements in the HTML document will be
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Background
Box Model Property #1

The background color or image of an element fills an


element out to its border (if it has one that is).
In contemporary web design, it has become extremely
common too use CSS to display purely presentational
images (such as background gradients and patterns,
decorative images, etc) rather than using the <img>
element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Background Properties
Property Description
A combined short-hand property that allows you to set the background values in one
background property. While you can omit properties with the short-hand, do remember that any omitted
properties will be set to their default value.

background- Specifies whether the background image scrolls with the document (default) or remains
attachment fixed. Possible values are: fixed, scroll.

background-color Sets the background color of the element.

Specifies the background image (which is generally a jpeg, gif, or png file) for the element.
background-image Note that the URL is relative to the CSS file and not the HTML. CSS3 introduced the ability to
specify multiple background images.

Specifies where on the element the background image will be placed. Some possible values
include: bottom, center, left, and right. You can also supply a pixel or percentage numeric
background- position value as well. When supplying a numeric value, you must supply a
position horizontal/vertical pair; this value indicates its distance from the top left corner of the
element.

Determines whether the background image will be repeated. This is a common technique
background-repeat for creating a tiled background (it is in fact the default behavior). Possible values are: repeat,
repeat-x, repeat-y, and no-repeat.

background-size New to CSS3, this property lets you modify the size of the background image.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Background Repeat

background-image: url(../images/backgrounds/body-background-tile.gif);
background-repeat: repeat;

background-repeat: no-repeat; background-repeat: repeat-y; background-repeat: repeat-x;

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Background Position
50px

300px

body {
background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;
background-position: 300px 50px;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Borders
Box Model Property #2

Borders provide a way to visually separate elements.


You can put borders around all four sides of an
element, or just one, two, or three of the sides.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Borders
Property Description

A combined short-hand property that allows you to set the style, width, and
border color of a border in one property. The order is important and must be:
border-style border-width border-color

border-style Specifies the line type of the border. Possible values are: solid, dotted,
dashed, double, groove, ridge, inset, and outset.

border-width The width of the border in a unit (but not percents). A variety of keywords
(thin, medium, etc) are also supported.

border-color The color of the border in a color unit.

border-radius The radius of a rounded corner.

border-image The URL of an image to use as a border.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Shortcut notation
TRBL

With border, margin, and padding properties, there are long-form and
shortcut methods to set the 4 sides
border-top-color: red; /* sets just the top side */
border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */

border-color: red; /* sets all four sides to red */

border-color: red green orange blue; /* sets all four sides


differently */

When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottom left.
TRBL (Trouble)
top
border-color: top right bottom left;

left right
border-color: red green orange blue;

bottom

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Margins and Padding
Box Model Properties #3 and #4
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}

p {
border: solid 1pt red;
margin: 30px;
padding: 0;
}

p {
border: solid 1pt red;
margin: 30px;
padding: 30px;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Margins
Why they will cause you trouble.
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}

Did you notice that the space


between paragraphs one and two and p {
border: solid 1pt red;
margin: 30px;

between two and three is the same as }


padding: 0;

the space before paragraph one and


after paragraph three?
This is due to the fact that adjoining p {
border: solid 1pt red;

vertical margins collapse.


margin: 30px;
padding: 30px;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Collapsing Margins
<div>
<p>Every CSS rule ...</p>
1 90px <p>Every CSS rule ...</p>
</div>
50px <div>
<p>In CSS, the adjoining ... </p>
50px 4 <p>In CSS, the adjoining ... </p>
</div>
50px
div {
2 90px border: dotted 1pt green;
padding: 0;
50px margin: 90px 20px;
}
50px 5
p {
50px border: solid 1pt red;
padding: 0;
3 90px margin: 50px 20px;
}

If overlapping margins did not collapse, then margin space for would be 180p (90pixels for the bottom margin
of the first <div> + 90 pixels for the top margin of the second <div>), while the margins and for would be
100px.

However, as you can see this is not the case.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Collapsing Margins
How it works

When the vertical margins of two elements touch,


• the largest margin value of the elements will be
displayed
• the smaller margin value will be collapsed to zero.
Horizontal margins, on the other hand, never collapse.
To complicate matters even further, there are a large
number of special cases in which adjoining vertical
margins do not collapse.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Width and Height
Box Model Properties #5 and #6

The width and height properties specify the size of the


element’s content area.
Perhaps the only rival for collapsing margins in
troubling our students, box dimensions have a number
of potential issues.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Width and Height
Potential Problem #1

Only block-level elements and non-text inline elements


such as images have a width and height that you can
specify.
By default the width of and height of elements is the
actual size of the content.
For text,
• this is determined by the font size and font face;
For images,
• the width and height of the actual image in pixels
determines the element box’s dimensions.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Width and Height
Potential Problem #2

Since the width and the height refer to the size of the
content area, by default, the total size of an element is
equal to not only its content area, but also to the sum
of its padding, borders, and margins.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


div {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 5px;
margin: 10px;
border: solid 2pt black; True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
} True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px

Every CSS rule begins with200px


a selector. The selector identifies
10px 5 5 10px
2 which element or elements in the HTML document will be 2
100px
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive
Default

div {
...
box-sizing: border-box; True element width = 10 + 200 + 10 = 220 px
}
True element height = 10 + 100 + 10 = 120 px

Every CSS rule begins with a selector. The selector identifies


which element or elements in the HTML document will be
100px
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive

10px 200px 10px

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Width and Height

p {
background-color: silver;
}

} 100px

p {
background-color: silver;
width: 200px;
height: 100px;
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Overflow Property
overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Sizing Elements
Time to embrace ems and percentages

While the previous examples used pixels for its


measurement, many contemporary designers prefer to
use percentages or em units for widths and heights.
• When you use percentages, the size is relative to
the size of the parent element.
• When you use ems, the size of the box is relative to
the size of the text within it.
The rationale behind using these relative measures is
to make one’s design scalable to the size of the
browser or device that is viewing it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


<body>
<div class="pixels">
Pixels - 200px by 50 px
</div>
<style> 50% <div class="percent">
html,body { Percent - 50% of width and height
margin:0; </div>
50% 50%
width:100%; </body>
height:100%;
background: silver;
}
.pixels {
width:200px;
height:50px;
background: teal;
50%
}
.percent {
width:50%;
50% 50%
height:50%;
background: olive;
}

<body>
.parentFixed { <div class="parentFixed">
width:400px; <strong>parent has fixed size</strong>
height:150px; <div class="percent">
background: beige; PERCENT - 50% of width and height
} </div>
50% of parent (= 200px)
.parentRelative { </div>
width:50%; <div class="parentRelative">
height:50%; <strong>parent has relative size</strong>
background: yellow; <div class="percent">
} PERCENT - 50% of width and height
</style> </div>
</div>
50% 50% </body>

50% of parent (= 200px)

50% of parent

50% 50%

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Developer Tools
Help is on the way

Developer tools in current browsers make it


significantly easier to examine and troubleshot CSS
than was the case a decade ago.
You can use the various browsers’ CSS inspection tools
to examine, for instance, the box values for a selected
element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Developer Tools
Chrome – Inspect Element Firefox – Inspect

Opera – Inspect Element

Internet Explorer – Developer Tools

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Section 7 of 7

TEXT STYLING
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Text Properties
Two basic types

CSS provides two types of properties that affect text.


• font properties that affect the font and its
appearance.
• paragraph properties that affect the text in a
similar way no matter which font is being used.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Font-Family
A few issues here

A word processor on a desktop machine can make use


of any font that is installed on the computer; browsers
are no different.
However, just because a given font is available on the
web developer’s computer, it does not mean that that
same font will be available for all users who view the
site.
For this reason, it is conventional to supply a so-called
web font stack, that is, a series of alternate fonts to
use in case the original font choice in not on the user’s
computer.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Specifying the Font-Family
1 Use this font as
the first choice
If it isn’t available, then
3 use this one

p { font-family: Cambria, Georgia, "Times New Roman", serif; }

But if it is not available,


2 then use this one And if it is not available
4 either, then use the
default generic serif font

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Generic Font-Family

The font-family property supports five different


generic families.
The browser supports a typeface from each family.
Generic
Font-Family

Th
Name

This serif serif

This sans-serif
Without
("sans") serif Th
This
In a regular,

This monospace This In a monospace font,


each letter has the
same width
proportionally-spaced
font, each letter has a
variable width

This cursive

Decorative and cursive fonts

This fantasy vary from system to system;


rarely used as a result.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


@font-face
The future is now

Over the past few years, the most recent browser


versions have begun to support the @font-face
selector in CSS.
This selector allows you to use a font on your site even
if it is not installed on the end user’s computer.
Due to the on-going popularity of open source font
sites such as Google Web Fonts
(http://www.google.com/webfonts) and Font Squirrel
(http://www.fontsquirrel.com/), @font-face seems to
have gained a critical mass of widespread usage.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Font Sizes
Mo control, mo problems

The issue of font sizes is unfortunately somewhat


tricky.
In a print-based program such as a word processor,
specifying a font size in points is unproblematic.
However, absolute units such as points and inches do
not translate very well to pixel-based devices.
Somewhat surprisingly, pixels are also a problematic
unit.
Newer mobile devices in recent years have been
increasing pixel densities so that a given CSS pixel
does not correlate to a single device pixel.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Font Sizes
Welcome ems and percents again

If we wish to create web layouts that work well on


different devices, we should learn to use relative units
such as em units or percentages for our font sizes (and
indeed for other sizes in CSS as well).
One of the principles of the web is that the user
should be able to change the size of the text if he or
she so wishes to do so.
Using percentages or em units ensures that this user
action will work.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


How to use ems and
percents
When used to specify a font size, both em units and
percentages are relative to the parent’s font size.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


How to use ems and
<body> percents
Browser’s default text size is usually 16 pixels
<p> 100% or 1em is 16 pixels
<h3> 125% or 1.125em is 18 pixels
<h2>
150% or 1.5em is 24 pixels
<h1>
200% or 2em is 32 pixels
/* using 16px scale */ <body>
<p>this will be about 16 pixels</p>
body { font-size: 100%; } <h1>this will be about 32 pixels</h1>
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ <h2>this will be about 24 pixels</h2>
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ <h3>this will be about 18 pixels</h3>
h1 { font-size: 2em; } /* 2 x 16 = 32 */ <p>this will be about 16 pixels</p>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


How to use ems and
percents
It might seem easy … but it’s not …

While this looks pretty easy to master, things


unfortunately can quickly become quite complicated.
Remember that percents and em units are relative to
their parents, so if the parent font size changes, this
affects all of its contents.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


ems and percents
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
<div>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
</div>
</article>
</body>

/* using 16px scale */

body { font-size: 100%; }


p { font-size: 1em; } /* 1 x 16 = 16px */
h1 { font-size: 2em; } /* 2 x 16 = 32px */

/* using 16px scale */

body { font-size: 100%; }


p { font-size: 1em; }
h1 { font-size: 2em; }

article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px


p = 1 * 16 * 0.75 = 12px */

div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px


p = 1 * 16 * 0.75 * 0.75 = 9px */

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


The rem unit
Solution to font sizing hassles?

CSS3 now supports a new relative measure, the rem


(for root em unit).
This unit is always relative to the size of the root
element (i.e., the <html> element).
However, since Internet Explorer prior to version 9 do
not support the rem units, you need to provide some
type of fallback for those browsers.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


The rem unit
/* using 16px scale */

body { font-size: 100%; }


p{
font-size: 16px; /* for older browsers: won’t scale properly though */
font-size: 1rem; /* for new browsers: scales and simple too */
}
h1 { font-size: 2em; }

article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px


p = 1 * 16 = 16px */

div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px


p = 1 * 16 = 16px */

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


What you’ve learned
1 What is CSS?
2 CSS Syntax

3 Location of
Styles 4 Selectors

5 The Cascade:
How Styles 6 The Box
Model
Interact

7 CSS Text
Styling
Randy Connolly and Ricardo Hoar Fundamentals of Web Development

You might also like