Scribd
Upload
6 views105 pages

Unit 1 - Chapter3 Css

Uploaded by

S R GOWDA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views105 pages

Unit 1 - Chapter3 Css

Uploaded by

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

CSS 1: Introduction

Chapter 3

Randy Connolly and Ricardo Hoar Fundamentals of Web Development


Textbook to be published by Pearson Ed in early 2014
http://www.funwebdev.com
What is CSS?

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.
What is CSS?

CSS is a language which 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.
Benefits of CSS
Why using CSS is a better way of describing presentation than HTML

• Improved Format Control : The degree of formatting control in CSS is


significantly better than that provided in HTML.
• Improved Maintenance : Web sites become significantly more
maintainable because all formatting can be centralized into one, or a small
handful, of CSS files.
• Improved Accessibility : CSS-driven sites are more accessible.
• 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
markup.
• Improved Output flexibility : CSS can be used to adopt a page for different
output mediums.
CSS Versions
1996: W3C published the CSS Level 1 (CSS1) Recommendation.
1997 : the CSS Level 2 Recommendation (also more succinctly labeled
simply as CSS2) was published.
2011 : an updated version of the Level 2 Recommendation, CSS2.1
Later, a different group at the W3C was working on a CSS3 draft.
Then,
Browser Adoption :
While Microsoft’s Internet Explorer was an early champion of CSS,
its later versions (especially IE5, IE6, and IE7) for Windows had uneven
support for certain parts of CSS2.
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;
}
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 ignores white space
• Each declaration is terminated with a semicolon.

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;
}
Selectors
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.
- Alternatively, selectors 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;
}
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;
}
Properties : Common CSS properties
Property Type Property
font
font-family
Fonts font-size
font-style
font-weight
@font-face
letter-spacing
line-height
Text text-align
text-decoration
text-indent
background
background-color
Color and background-image
background-position
background background-repeat
color
border
border-color
border-width
border-style
Borders border-top
border-top-color
border-top-width
etc
Properties
Common CSS properties continued.

Property Type Property

Spacing padding
padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top
Sizing height
max-height
max-width
min-height
min-width
width
Layout bottom, left, right, top
clear
display
float
overflow
position
visibility
z-index
Lists list-style
list-style-image
list-style-type
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.
Color Values : CSS supports a variety of different ways of describing color

Method Name Description Example


Use one of 17 standard color names. CSS3 has color: red;
color: hotpink; /* CSS3
140 standard names. only */
Uses three different numbers between 0 and 255
to describe the Red, Green, and Blue values for color: rgb(255,0,0);
RGB the color. color: rgb(255,105,180);

Uses a six-digit hexadecimal number to describe


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

Allows you to add an alpha, or transparency,


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

Allows you to specify a color using Hue Saturation color: hsl(0,100%,100%);


HSL and Light values. This is available only in CSS3. color: hsl(330,59%,100%);
HSLA is also available as well.
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).
Relative
Unit
Units
Description Type

Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute Relative (CSS2)
px (1/96 of an inch).
Absolute (CSS3)

Equal to the computed value of the font-size property of the


em element on which it is used. When used for font sizes, the em unit is Relative
in relation to the font size of the parent.

A measure that is always relative to another value. The precise


% meaning of % varies depending upon which property it is being Relative
used.

ex A rarely used relative measure that expresses size in relation to the


Relative
x-height of an element’s font.

Another rarely used relative measure; this one expresses size in Relative
ch relation to the width of the zero ("0") character of an element’s font.
(CSS3 only)

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

Stands for viewport width and viewport height.


Both are percentage values (between 0 and 100) of the viewport Relative
vw, vh
(browser window). This allows an item to change size when the
(CSS3 only)
viewport is resized.
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


Comments in CSS

It is often helpful to add comments to your style


sheets. Comments take the form:

/* comment goes here */


Section 3 of 7

LOCATION OF STYLES
Actually there are three …
Different types of style sheet are :
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.
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!
Inline Styles
- 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.
Dis advantage : Using inline styles is generally discouraged since they

increase bandwidth and decrease maintainability.

Advantage : Inline styles can however be handy for quickly testing out a style
change.
Embedded Style Sheet
- Style rules placed within the <style> element inside the <head> element .

- 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.
External Style Sheet
Style rules placed within a external text file with the .css extension
Advantages :
- Maintainability :This is the most common place to locate style rules because
it provides the best maintainability.
- Updations :When changes are made to an external style sheet, all HTML
documents that reference that style sheet will automatically use the updated
version.
- Performance :The browser is able to cache the external style sheet which can
improve the performance of the site
Selectors
Things that make your life easier

When defining CSS rules, it is necessary first to use a selector to


tell the browser which elements will be affected.

CSS selectors allow you to select


• individual elements

• multiple HTML elements,

• elements that belong together in some way, or


• elements that are positioned in specific ways in the document
hierarchy.
Section 4 of 7
SELECTORS
There are a number of different selector types. They are :

- Element Selector
- Group Selector
- Class Selector
- Id Selector
- Attribute Selector
- Pseudo Selector
- Pseudo Element Selector
- Pseudo Class Selector
- Universal Selector
Element Selectors
Selects all instances of a given HTML element
Selector which uses element name to select the HTML element.

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;
}

Example 2: Here, all <p> elements on the page will be center-aligned, with a red
text color:
p{
text-align: center;
color: red;
}
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.
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.
Example : Here, all <h1> , <h3>elements on the page will be center-aligned, with a red
text color and with font style with Arial /Helvetica family:
h1,h3 {
text-align: center;
color: red;
font-family : Arial, Helvetica ;
}
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.
Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<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>

.first {
font-style: italic;
color: brown;
}
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>
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


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

<div>
#latestComment {
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
font-style: italic;
</div>
<hr/>
</body>
color: brown;
}
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.
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.
Attribute Selectors
[title] {
cursor: help;
<head lang="en">
padding-bottom: 3px;
<meta charset="utf-8">
<title>Share Your Travels</title>
border-bottom: 2px dotted blue;
<style> text-decoration: none;
[title] {
cursor: help; }
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>
Attribute Selectors
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 CSS pseudo-element is used to style specified parts of an element.


For example, it can be used to:

-Style the first letter, or line, of an element


-Insert content before, or after, the content of an element

Syntax : selector::pseudo-element { property:value; }

Example : The following example formats the first line of the text in all <p> elements:

p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Pseudo Selectors
Select something that does not exist explicitly as an element

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.
- A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Syntax : The syntax of pseudo-classes:
selector : pseudo-class {
property:value;
}
Anchor Pseudo-classes : Links can be displayed in different ways:

Example 1 :

/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Example 2 : The selector for hover pseudo class applied to an element : Any time the mouse
cursor is positioned over an h2 element, the styles defined in the given property -value

/* mouse over h2 */
h2:hover {
color: #FF00FF;
font-style :italic;

}
Example 3:
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.

There are four different combinators in CSS:


- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Contextual Selectors
Selector Matches Example

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

A specified element that is div>h2


Child a direct child of the Selects an <h2> element that is a child of a
specified element <div> 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.

General A specified element that h3~p


shares the same parent as Selects all the <p> elements that share the
Sibling the specified element. same parent as the <h3>.
Descendant Selector
Selects all elements that are contained within another element

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"
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>
Universal Selectors
The * selector selects all elements.
The * selector can also select all elements inside another element.
Syntax:
{
css declarations;
}

Example 1: Select all elements, and set their background color to yellow:
*{
background-color: yellow;
}

Example 2: Select all elements inside <div> elements and set their
background color to yellow:
div * {
background-color: yellow;
}
Section 5 of 7
THE CASCADE: HOW STYLES
INTERACT
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.
Cascade
How conflicting rules are handled in CSS

The “Cascade” in CSS refers to how conflicting rules are handled.

Cascade Principles
CSS uses the following cascade principles to help it deal with conflicts:

• inheritance,
• specificity,

• location
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 inheritable.
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>
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/>
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>
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).
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.
Universal and inherited elements have zero priority.
Element Selector, pseudo element
Class/Attribute , pseudoclass
Low to High
Id Selector
Inline elements
!important
Specificity
How it works
Specificity
How it works
Specificity
These color and font-weight
properties are inheritable and thus
potentially applicable to all the child
elements contained within the body.

However, because the <div> and <p>


elements also have the same
properties set, they override the value
defined for the <body> element
because their selectors (div and p) are
more specific.

Class selectors are more specific


than element 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.
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.
Specificity Algorithm Specificity Value
div {
element selector color: green; 0001
}

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

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

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

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
Examples on Specificity
Inline ID Class/ Elemen
elemen Selector Attribute / ts/
HTML Statement ts pseudoclass Pseudo
elemen
t
< tag style = “color:red”> 1 0 0 0
body .example 0 0 1 1
body .example strong 0 0 1 2
div #first 0 1 0 1
div #first .error 0 1 1 1

#footer .twitter a 0 1 1 1
#footer .twitter a:hover 0 1 2 1

body aside#left div#cart strong.price 0 2 1 4


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.
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 ?
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>
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.
Same spicificity:
#example{ color:#000 !important; }
#example{ color:#666;}
Section 6 of 7

THE BOX MODEL


The Box Model
Time to think inside the box
In CSS, all HTML elements exist within an element box.
All HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content.
Different parts of BOX MODEL are:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent.
Background Color: To add a color to background of an element.
Background Image : To add a color to background for an image.
The box model allows us to add a border around elements, and to define space
between elements.
The Box Model : The image below illustrates 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
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.
Background Properties
Property Description
A combined short-hand property that allows you to set the background
background values in one property. While you can omit properties with the short-
hand, do remember that any omitted properties will be set to their
default value.

background-attachment Specifies whether the background image scrolls with the document
(default) or remains 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)
background-image for the element. 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
background-position supply a pixel or percentage numeric position value as well. When
supplying a numeric value, you must supply a 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
background-repeat common technique 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.
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;


Background Position
50px

300px

body {
background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;
background-position: 300px 50px;
}
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.
Borders
Property Description
border A combined short-hand property that allows you to set the style,
width, and 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.
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
Margins and Padding : Margin Properties are used to create space around elements,
outside of any defined borders. Padding properties are used to generate space around
an element's content, inside of any defined borders.

p {

Box Model Properties #3 and #4 border: solid


margin: 0;
1pt red;

padding: 0;
}

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

p {
border: solid 1pt red;
margin: 30px;
padding: 30px;
}
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 }


padding: 0;

as the space before paragraph one


and after paragraph three?
This is due to the fact that adjoining p {
border: solid 1pt red;
margin: 30px;
vertical margins collapse. }
padding: 30px;
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.


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.
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.
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.
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.
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


Width and Height

p {
background-color: silver;
}

} 100px

p {
background-color: silver;
width: 200px;
height: 100px;
}
Overflow Property
overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;
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.
<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%
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.
Developer Tools
Chrome – Inspect Element Firefox – Inspect

Opera – Inspect Element

Internet Explorer – Developer Tools


Section 7 of 7

TEXT STYLING
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 which font is being


used.
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.

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.
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
Generic Font-Family
The font-family property supports five different generic families.

The browser supports a typeface from each family.

Generic
Font-Family
Name

This serif serif


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

This monospace This In a monospace font,


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

This cursive

This
Decorative and cursive fonts
fantasy vary from system to system;
rarely used as a result.
@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.
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.
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.
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.
How to use ems and percents
<body> 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>
How to use ems and percents
It might seem easy … but it’s not …

percents and em units are relative to their parents, so if the parent


font size changes, this affects all of its contents.
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 */
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.
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 */

You might also like