Cascading Stylesheet

Part II
Foreground Color
The foreground of an element consists of its text and border (if one is
specified)

You specify a foreground color with the color property

Background Color
background-color

Values: color value (name or numeric) | transparent

Default: transparent
Background Color
A background color fills the canvas behind the element that
includes the content area, and any padding (extra space) added
around the content, extending behind the border out to its outer edge

Background will not extend into the margin

Note: background colors do not inherit, but because the default

background setting for all elements is transparent, the parent’s
background color shows through its descendant elements

Example of adding background color is shown in the next slide

 blockquote {
Backgroundborder:
Color 4px dashed;
color: green;
background-color: #c6de89;
}
Background Clip
background-clip

Values: border-box | padding-box | content-box

Default: border-box

An example is shown in the next slide

Opacity
Opacity is another way of adding level of transparency to an element

The opacity setting applies to the entire element — both the

foreground and the background

opacity

Values: number (0 to 1)

Default: 1

An example is shown in the next slide

h1 {
color: gold;
background: white;
opacity: 0.25;
}
h1 {
color: gold;
background: white;
opacity: 0.5;
}
h1 {
color: gold;
background: white;
opacity: 1;
}
Exercises
Make the h1 heading purple (R:153, G:51, B:153, or #993399)

Make the background of the entire page a light green (R:210, G:220,
B:157, or #d2dc9d)

Make the background of the header white with 50% transparency

(R:255, G:255, B:255, .5)
Selector Summary
Element Type Selector E {property: value;}

Grouped selector E1, E2, E3 {property: value;}

Descendant Selector E1 E2 {property: value;}

Child selector E1 > E2 {property: value;}

Next-sibling selector E1 + E2 {property: value;}

Selector Summary

Subsequent-sibling
selector E1 ~ E2 {property: value;}

E#id {property: value;}

ID selector
#id {property: value;}

E.id {property: value;}

Class Selector
.id {property: value;}

Universal selector * {property: value;}

Pseudo Class Selectors
Pseudo-class selectors are indicated by the colon (:) character

They typically go immediately after an element name as follows

li:first-child
Link Pseudo-Classes
:link Applies a style to unclicked (unvisited) links

:visited Applies a style to links that have already been

clicked

By default, browsers typically display linked text as blue and links that
have been clicked as purple
User Action Pseudo-Classes
:focus Applies when the element is selected and ready for
input

:hover Applies when the mouse pointer is over the element

:active Applies when the element (such as a link or button) is in

the
process of being clicked or tapped
Applying All Pseudo-Classes
When you apply styles to a elements with all five pseudo-classes, the
order in which they appear is important for them to function properly

The required order for pseudo-classes is:

:link
:visited
:focus
:hover
:active
Pseudo-Classes Example
a { text-decoration: none; }
a:link { color: maroon; }
a:visited { color: gray; }
a:focus { color: maroon; background-color: #ffd9d9; }
a:hover { color: maroon; background-color: #ffd9d9; }
a:active { color: red; background-color: #ffd9d9; }
Pseudo-Classes
Example
Exercises
Write a rule that makes links purple (#939)

When the mouse is placed over links, make the text a brighter purple
(#c700f2) and add a white background color (#fff)

Use these same style rules for when the links are in focus

As the mouse is being clicked (or tapped on a touch device), add a

white background color and make the text turn a vibrant purple
(#ff00ff)
Other CSS3 Pseudo-Classes
:root , :empty, :first-child, :last-child, :only-
child, :first-of-type,:last-of-type, :only-of-type, :nth-
child(), :nth-last-child(), :nth-of-type(), :nth-last-of-
type(), :enabled, :disabled, :checked, :target (fragment
identifier), :lang(), :not()
Pseudo Element Selectors
Pseudo-elements are indicated by a double colon (::)
Pseudo Element Selectors
::first-line

This selector applies style rule for the following properties to the
first line of the specified element

color, font, background, word-spacing, letter-spacing,

text-decoration, vertical-align, text-transform, line-
height
Pseudo Element Selectors
::first-letter

This selector applies style rule for the following properties to the
first letter of the specified element

color, font, background, word-spacing, letter-spacing,

text-decoration, vertical-align(if float is none),
text-transform, padding, margin, border, line-height,
float
First Line and First Letter Example

p::first-line {
letter-spacing: 9px;
}
p::first-letter {
font-size: 300%;
color: orange;
}
First Line and First Letter Example
Pseudo Element Selectors
Generated Content with ::before and ::after

Generated contents are contents that browsers insert on the fly

Using the ::before and ::after pseudo-elements you can tell

browsers to generate content before or after any element
Pseudo Element Selectors
The following example shows how to inserts an image by using the
url() function before the paragraph and “Thank you.” at the end of
the paragraph

p.warning::before { p.warning::after {
content: url(exclamation.png); content: " Thank you.";
margin-right: 6px; color: red;
} }
Pseudo Element Selectors
The following example shows how to inserts an image by using the
url() function before the paragraph and “Thank you.” at the end of
the paragraph

<p class="warning">We are required to warn you that

undercooked food is a health risk.</p>
Attribute Selectors
Attribute selectors target elements based on attribute names or
values
Attribute Selectors
Simple Attribute Selector targets elements with a particular attribute

element[attribute]

img[title] {border: 3px solid;}

Attribute Selectors
Exact Value Selector selects elements with a specific value for the
attribute

element[attribute="exact value"]
img[title="first grade"] {border: 3px solid;}
Attribute Selectors
Partial Attribute Value Selector (indicated with a bar, ~) selects
elements by partial attribute value

element[attribute~="value"]

img[title~="grade"] {border: 3px solid;}

Attribute Selectors
Hyphen Separated Attribute Value Selector (indicated with a bar,
|) targets hyphen-separated values

element[attribute|="value"]

[hreflang|="en"] {border: 3px solid;}

Attribute Selectors
Beginning Substring Attribute Value Selector (indicated with a
carat, ^) matches elements whose specified attribute values start in the
string of characters in the selector

element[attribute^="first part of the value"]

img[src^="/images/icons"] {border: 3px solid;}

Attribute Selectors
Ending Substring Attribute Value Selector (indicated with a dollar
sign, $) matches elements whose specified attribute values end in the
string of characters in the selector

element[attribute$="last part of the value"]

a[href$=".pdf"] {border-bottom: 3px solid;}

Attribute Selectors
Arbitrary Substring Attribute Value Selector (indicated with an
asterisk, *) looks for the provided text string in any part of the attribute
value specified

element[attribute*="any part of the value"]

img[title*="February"] {border: 3px solid;}
Background Properties
background-color

background-image

background-repeat

background-position

background-attachment

background-clip

background-size

background
Background Image
Most decorative images are added to pages and elements as
backgrounds with CSS
Background Image
background-image

Values: url(location of image) | none

Default: none
Background Image
body {
background-image: url(star.png);
}

blockquote {
background-image: url(dot.png);
padding: 2em;
border: 4px dashed;
}
Exercise
Add background image to your page
Background Repeat
background-repeat

Values: repeat | no-repeat | repeat-x | repeat-y | space |

round

Default: repeat
 body {
Background Repeat
background-image: url(star.png);
background-repeat: repeat-y;
}

body {
background-image: url(star.png);
background-repeat: no-repeat;
}

body {
background-image: url(star.png);
background-repeat: repeat-x;
}
Background Repeat
space and round
Exercise
Experiment background-repeat property

Example
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
}
Background Position
background-position

Values: length measurement | percentage | left | center |

right | top | bottom

Default: 0% 0% (same as left top)

Background Position
Background Position Origin
background-origin

Values: border-box | padding-box | content-box

Default: padding-box
Background Position Origin
Background Attachment
background-attachment

Values: scroll | fixed | local

Default: scroll
The Box Model
The Box Model
Every element in a document generates a box to which properties such
as width, height, padding, borders, and margins can be applied

The amount of space taken up by an element on the page includes

the content plus the total amount of padding, borders, and margins
applied to the element
The Box Model
Specifying Box Dimension
width

Values: length | percentage | auto

Default: auto

height

Values: length | percentage | auto

Default: auto
Specifying Box Dimension
You can specify the width and height only for block-level elements and
non-text inline elements such as images
Specifying Box Dimension
There are two ways to specify the size of an element

The default method or by setting content-box value to box-sizing

property - applies the width and height values to the content box

By setting border-box value to box-sizing - applies the width and

height values to the border box, which includes the content,
padding, and border
Specifying Box Dimension
Using the Content Box

p {
background: #f2f5d5;
width: 500px;
height: 150px;
padding: 20px;
border: 5px solid gray;
margin: 20px;
}
Exercise
Using Chrome DevTool calculate the visible and total width and height
values of the element
Specifying Box Dimension
Using the Border Box
p {
background: #f2f5d5;
width: 500px;
height: 150px;
padding: 20px;
border: 5px solid gray;
margin: 20px;
box-sizing: border-box;
}
Exercise
Using Chrome DevTool calculate the visible and total width and height
values of the element
Handling Overflow
When an element is sized too small for its contents, you can specify
what to do with the content that doesn’t fit by using the overflow
property

overflow

Values: visible | hidden | scroll | auto

Default: visible
Padding
Padding is the space between the content area and the border

padding

Values: length | percentage

Default: 0
Padding
Padding is the space between the content area and the border

padding-top, padding-right, padding-bottom, padding-left

Values: length | percentage

Default: 0
Padding
blockquote {
padding-top: 2em;
padding-right: 4em;
padding-bottom: 2em;
padding-left: 4em;
background-color: #d098d4;
}
Padding
The Shorthand padding Property
padding: top right bottom left; // clockwise direction

blockquote {
padding: 2em 4em 2em 4em;
background-color: #d098d4;
}
The Shorthand padding Property
If the left and right padding are the same, you can shorten it by
supplying only three values

padding: top right/left bottom;

blockquote {
padding: 2em 4em 2em;
background-color: #d098d4;
}
The Shorthand padding Property
If the top and bottem padding are the same and right and left padding
are the same, you can shorten it by supplying only two values

padding: top/bottom right/left;

blockquote {
padding: 2em 4em;
background-color: #d098d4;
}
The Shorthand padding Property
If all sides padding are the same, you can shorten it by supplying only
one values

padding: top/bottom/right/left;

blockquote {
padding: 2em;
background-color: #d098d4;
}
Exercise
Create the page shown

Use HTML5’s semantic elments

<header>

<main>

<section>

<aside>

<footer>
Exercise
Set the box-sizing model to
border-box for all the elements in
the document

html {
box-sizing: border-box;
}

* {
box-sizing: inherit;
}
Exercise
Add 1em of padding on all sides of
main element

main {
padding: 1em;
}
Exercise
Add 1em of padding on all sides of
aside element except the left side
and add 45 pixels of padding on
the left side
Borders
A border is a line drawn around the content area and its (optional)
padding

border-style

Values: none | solid | hidden | dotted | dashed | double |

groove | ridge | inset | outset

Default: none
Borders
A border is a line drawn around the content area and its (optional)
padding

border-top-style, border-right-style, border-bottom-style,

border-left-style

Values: none | solid | hidden | dotted | dashed | double |

groove | ridge | inset | outset

Default: none
Borders
If you do not specify a width, the default medium width will be used

If there is no color specified, the border uses the foreground color of the
element (same as the text)
Borders Example
div#silly {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
}

div#silly {
border-style: solid dashed double dotted;
}
Borders Example
Border Width (Thickness)
border-width

Values: length | thin | medium | thick

Default: medium
Border Width (Thickness)
border-top-width, border-right-width,border-bottom-width,
border-left-width

Values: length | thin | medium | thick

Default: medium
 div#silly {
Border Width Example
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;
border-style: solid;
width: 300px;
height: 100px;
}

div#silly {
border-width: thin medium thick 12px;
border-style: solid;
Border Width Example
Border Color
border-color

Values: color name or RGB/HSL value | transparent

Default: the value of the color property for the element

Border Color
border-top-color, border-right-color,border-bottom-color,
border-left-color

Values: color name or RGB/HSL value | transparent

Default: the value of the color property for the element

Border Color
div#special {
border-color: maroon aqua;
border-style: solid;
border-width: 6px;
width: 300px;
height: 100px;
}
Border Color
Combining Border Style, Width, and Color

border-top, border-right, border-bottom, border-left

Values: border-style border-width border-color

Default: defaults for each property

border

Values: border-style border-width border-color

Default: defaults for each property

Combining Border Style, Width, and Color

The values for border and the side-specific border properties may
include style, width, and color values in any order

h1 { border-left: red .5em solid; } /* left border only */

h2 { border-bottom: 1px solid; } /* bottom border only */
p.example { border: 2px dotted #663; } /* all four sides */
Rounded Corners with border-radius
border-radius

Values: 1, 2, 3, or 4 length or percentage values

Default: 0
Rounded Corners with border-radius
border-top-left-radius, border-top-right-radius, border-
bottom-right-radius, border-bottom-left-radius

Values: 1, 2, 3, or 4 length or percentage values

Default: 0
Rounded Corners with border-radius
Elliptical corners
You can make a corner elliptical by specifying two values:

the first for the horizontal radius and

the second for the vertical radius

Elliptical corners
Exercise
Add tan double border around the main element

padding: 1em;
border: double 4px #eaddc4;
Exercise
Add rounded corners to the main and aside elements

border-radius: 25px;
Exercise
Adds a 1-pixel solid border on the top of the headline

Add another border that adds a 3-pixel solid border on the left

border-top: 1px solid;

border-left: 3px solid;
Exercise
Remove the underline for all links

Add a 1-pixel dotted border to the bottom edge of links

text-decoration: none;
border-bottom: 1px dotted;
Margins
A margin is an optional amount of space that you can add on the
outside of the border

Margins keep elements from bumping into one another or the edge of
the browser window or viewport

The shorthand margin property works the same as the padding

shorthand
Margins
margin

Values: length | percentage | auto

Default: auto
Margins
margin-top, margin-right, margin-bottom, margin-left

Values: length | percentage | auto

Default: auto
Margins
p#A {
p#B {
margin: 4em;
border: 2px solid red; margin-top: 2em;
background: #e2f3f5; margin-right: 250px;
}
margin-bottom: 1em;
margin-left: 4em;
body {
border: 2px solid red;
margin: 0 20%;
background: #e2f3f5;
border: 3px solid red;
}
background-color: #e2f3f5;
}
Margins
Collapsing margins
The top and bottom margins of neighboring elements collapse

Only the largest value is used

The only time top and bottom margins don’t collapse is for floated or
absolutely positioned elements

Margins on the left and right sides never collapse

Check margin collaps using Chrome DevTool

Margins on inline elements
You can apply top and bottom margins to inline text elements but it
won’t add vertical space above and below the element, and the height
of the line will not change

When you apply left and right margins to inline text elements,
margin space will be held clear before and after the text in the flow of
the element, even if that element breaks over several lines

Margins on replaced inline elements, such as images, do render on

all sides, and therefore do affect the height of the line
Negative margins
When you apply a negative margin, the content, padding, and border
are moved in the opposite direction that would have resulted from a
positive margin value
Negative Margin
Exercise
Clear out the browser’s default margin setting

body {
margin: 0;
}

nav ul {
margin: 0;
}
Exercise
Add a margin-top to h1

h1 {
margin-top: 1.5em;
}
Exercise
Give the main element a 2.5% margin on all sides

For the aside element put 1em on the top, 2.5% on the right side, 0
on the bottom, and 10% margin on the left side
Assigning Display Types
The display property defines the type of element box an element
generates in the layout

Display type assignment is useful for achieving layout effects while

keeping the semantics of the HTML source intact

For example, it is common practice to make li elements display as inline

elements to turn a list into a horizontal navigation bar. You may also
make an otherwise inline a (anchor) element display as a block in order
to give it a specific width and height:
Assigning Display Types
For example, it is common practice to make li elements display as inline
elements to turn a list into a horizontal navigation bar

You may also make an otherwise inline a (anchor) element display as a

block in order to give it a specific width and height:

ul.navigation li { display: inline; }

ul.navigation li a { display: block; }
Assigning Display Types
display

Values: inline | block | run-in | flex | grid | flow |

flow-root | list-item | table | table-row-group | table-
header-group | table-footer-group | table-row | table-
cell | table-column-group | table-column | table-caption
| ruby | ruby-base | ruby-text | ruby-base-container |
ruby-text-container | inline-block | inline-table |
inline-flex | inline-grid | contents | none

Default: inline
Box Drop Shadow
box-shadow

Values: ‘horizontal offset’ ‘vertical offset’ ‘blur

distance’ ‘spread distance’ color inset | none

Default: none
Box Drop Shadow
box-shadow: 6px 6px gray; /* A */
box-shadow: 6px 6px 5px gray; /* B */
box-shadow: 6px 6px 5px 10px gray; /* C */