CSS Tutorial

CSS Tutorial
CSS Introduction:
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files
Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by
changing just one file!
CSS Syntax:
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by

semicolons.
Each declaration includes a CSS property name and a value, separated by a

colon.
A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
/* This is a single-line comment */ /* This is

a multi-line
comment */
CSS Selectors:
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)
The CSS element Selector

The element selector selects HTML elements based on the element name.
In this example all <p> elements will be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to select

one unique element!
To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by
the class name.
In this example all HTML elements with class="center" will be red and center-
aligned:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a
class.
In this example only <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
In this example 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>
Note: A class name cannot start with a number!
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
How To Add CSS:

There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor, and must be saved
with a .css extension.
The external .css file should not contain any HTML tags.
Note: Do not add a space between the property value and the unit (such
as margin-left: 20 px;). The correct way is: margin-left: 20px;
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
<style>
body {
background-color: linen;
}
</style>
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
<h1 style="color:blue;text-align:center;">This is a heading</h1>

Tip: An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly.
Multiple Style Sheets

If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
If the internal style is defined after the link to the external style sheet, the
internal style will be used. However, if the internal style is defined before the
link to the external style sheet, the external style will be used.
Cascading Order
What style will be used when there is more than one style specified for an HTML
element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external and
internal styles and browser defaults.
CSS Colors:
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
CSS Background Color

You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>

CSS Text Color
You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>
CSS Border Color

You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>
CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
CSS RGB Value

In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
rgb(255, 0, 0) rgb(0, 0, 255) rgb(60, 179, 113)

Shades of gray are often defined using equal values for all the 3 light sources:
rgb(0, 0, 0) rgb(180, 180, 180) rgb(255, 255, 255)
CSS HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
#ff0000 #0000ff #3cb371 #ee82ee #ffa500 #6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:
#000000 #3c3c3c #787878 #b4b4b4 #f0f0f0 #ffffff
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in
the form:
hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the

full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100%

is white
hsl(0, 100%, 50%) hsl(0, 40%, 50%) hsl(0, 0%, 50%)
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel -
which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
rgba(255, 99, 71, 0.2)

HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel -
which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
hsla(9, 100%, 64%, 0.2)
CSS Backgrounds:
CSS background-color
The background-color property specifies the background color of an element.
background-color: lightblue;
CSS background-image
The background-image property specifies an image to use as the background of
an element.
By default, the image is repeated so it covers the entire element.
background-image: url("paper.gif");
Note: When using a background image, use an image that does not disturb the
text.
CSS background-repeat
By default, the background-image property repeats an image both horizontally
and vertically.
Some images should be repeated only horizontally or vertically, or they will look
strange.
background-repeat: repeat-x;
Tip: To repeat an image vertically, set background-repeat: repeat-y;
CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-
repeat property:
background-repeat: no-repeat;
CSS background-position
The background-position property is used to specify the position of the
background image.
Position the background image in the top-right corner:
background-position: right top;
CSS background-attachment
The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page):
Specify that the background image should be fixed:
background-attachment: fixed;
Specify that the background image should scroll with the rest of the page:
background-attachment: scroll;
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties
in one single property. This is called a shorthand property.
The shorthand property for background is background.
background: #ffffff url("img_tree.png") no-repeat right top;
CSS Borders:
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-
color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-color
value
 outset - Defines a 3D outset border. The effect depends on the border-
color value
 none - Defines no border
 hidden - Defines a hidden border
p.dotted {border-style: dotted;}
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
p.mix {border-style: dotted dashed solid double;}

Note: None of the OTHER CSS border properties described below will have ANY
effect unless the border-style property is set!
CSS Border Width

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one
of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top
border-width: 5px; / border-width: medium;
border-width: 2px 10px 4px 20px;
CSS Border Color

The border-color property is used to set the color of the four borders.
The border-color property can have from one to four values (for the top
If border-color is not set, it inherits the color of the element.
border-color: red; / border-color: red green blue yellow;
CSS Border - Individual Sides

In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
The example above gives the same result as this:

p {border-style: dotted solid;}
So, here is how it works:
If the border-style property has four values:
 border-style: dotted solid double dashed;

o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
If the border-style property has three values:
 border-style: dotted solid double;

o top border is dotted
o right and left borders are solid
o bottom border is double
If the border-style property has two values:
 border-style: dotted solid;

o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:
 border-style: dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also

works with border-width and border-color.
CSS Border - Shorthand Property

As you can see from the examples above, there are many properties to consider
when dealing with borders.
To shorten the code, it is also possible to specify all the individual border
properties in one property.
The border property is a shorthand property for the following individual border
properties:
 border-width
 border-style (required)
 border-color
border: 5px solid red;
You can also specify all the individual border properties for just one side:
border-left: 6px solid red;
CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:
border-radius: 5px;
Note: The border-radius property is not supported in IE8 and earlier versions.
CSS Margins:
The CSS margin properties are used to create space around elements, outside
of any defined borders.
Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
All the margin properties can have the following values:
 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
element
Tip: Negative values are allowed.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one
property.
The margin property is a shorthand property for the following individual margin
properties:
 margin-top / margin-right / margin-bottom / margin-left
If the margin property has four values:
 margin: 25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
margin: 25px 50px 75px 100px;
If the margin property has three values:
 margin: 25px 50px 75px;

o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
margin: 25px 50px 75px;
If the margin property has two values:
 margin: 25px 50px;

o top and bottom margins are 25px
o right and left margins are 50px
margin: 25px 50px;
If the margin property has one value:
 margin: 25px;
o all four margins are 25px
margin: 25px;
The auto Value

You can set the margin property to auto to horizontally center the element
within its container.
The element will then take up the specified width, and the remaining space will
be split equally between the left and right margins.
margin: auto;
The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited
from the parent element (<div>):
div {
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single
margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px and the
<h2> element has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the
<h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin
collapse, the actual margin ends up being 50px.
CSS Padding:
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and left).
Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
All the padding properties can have the following values:
 length - specifies a padding in px, pt, cm, etc.

 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent
element
Note: Negative values are not allowed.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one
property.
The padding property is a shorthand property for the following individual

padding properties:
 padding-top / padding-right / padding-bottom / padding-left
If the padding property has four values:
 padding: 25px 50px 75px 100px;

o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
padding: 25px 50px 75px 100px;
If the padding property has three values:
 padding: 25px 50px 75px;

o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
padding: 25px 50px 75px;

If the padding property has two values:
 padding: 25px 50px;

o top and bottom paddings are 25px
o right and left paddings are 50px
padding: 25px 50px;
If the padding property has one value:
 padding: 25px;
o all four paddings are 25px
padding: 25px;
Padding and Element Width

The CSS width property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an
element (the box model).
So, if an element has a specified width, the padding added to that element will
be added to the total width of the element. This is often an undesirable result.
EX: Here, the <div> element is given a width of 300px. However, the actual
width of the <div> element will be 350px (300px + 25px of left padding + 25px
of right padding):
div {
width: 300px;
padding: 25px;
}
To keep the width at 300px, no matter the amount of padding, you can use
the box-sizing property. This causes the element to maintain its width; if you
increase the padding, the available content space will decrease.
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
CSS Height and Width:
The height and width properties are used to set the height and width of an
element.
The height and width properties do not include padding, borders, or margins. It
sets the height/width of the area inside the padding, border, and margin of the
element.
CSS height/width Values

The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Note: Remember that the height and width properties do not include padding,
borders, or margins! They set the height/width of the area inside the padding,
border, and margin of the element!
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent
(%) of the containing block, or set to none (this is default. Means that there is
no maximum width).
The problem with the <div> above occurs when the browser window is smaller
than the width of the element (500px). The browser then adds a horizontal
scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling
of small windows.
Note: The value of the max-width property overrides width.

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
CSS Box Model:

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. The image
below illustrates the box model:
Explanation of the different parts:
 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
The box model allows us to add a border around elements, and to define space
between elements.
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
Important: When you set the width and height properties of an element with
CSS, you just set the width and height of the content area. To calculate the
full size of an element, you must also add padding, borders and margins.
EX: This <div> element will have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
CSS Outline:
An outline is a line that is drawn around elements, OUTSIDE the borders, to
make the element "stand out".
Note: Outline differs from borders! Unlike border, the outline is drawn outside
the element's border, and may overlap other content. Also, the outline is NOT a
part of the element's dimensions; the element's total width and height is not
affected by the width of the outline.
CSS has the following outline properties:
CSS Outline Style

The outline-style property specifies the style of the outline, and can have one
of the following values:
 dotted - Defines a dotted outline

 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline
The following example shows the different outline-style values:
p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Note: None of the other outline properties will have any effect, unless
the outline-style property is set!
CSS Outline Color

The outline-color property is used to set the color of the outline.
The color can be set by:
 name - specify a color name, like "red"

 RGB - specify a RGB value, like "rgb(255,0,0)"
 Hex - specify a hex value, like "#ff0000"
 invert - performs a color inversion (which ensures that the outline is
visible, regardless of color background)
outline-color: red;
The following example uses outline-color: invert, which performs a color

inversion. This ensures that the outline is visible, regardless of color
background:
outline-color: invert;
CSS Outline Width

The outline-width property specifies the width of the outline, and can have
one of the following values:
 thin (typically 1px)

 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)
outline-width: medium; / outline-width: 4px;

CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual
outline properties:
 outline-width
 outline-style (required)
 outline-color
The outline property is specified as one, two, or three values from the list
above. The order of the values does not matter.
p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
CSS Outline Offset

The outline-offset property adds space between an outline and the
edge/border of an element. The space between an element and its outline is
transparent.
The following example specifies an outline 15px outside the border edge:
outline-offset: 15px;
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
CSS Text:
Text Color
The color property is used to set the color of the text. The color is specified by:
The default text color for a page is defined in the body selector.
body {
color: blue;
}
h1 {
color: green;
}
Note: For W3C compliant CSS: If you define the color property, you must also
define the background-color.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left
alignment is default if text direction is left-to-right, and right alignment is
default if text direction is right-to-left):
text-align: center;
When the text-align property is set to "justify", each line is stretched so that
every line has equal width, and the left and right margins are straight (like in
magazines and newspapers):
text-align: justify;
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from

links:
a { text-decoration: none; }
The other text-decoration values are used to decorate text:
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
Note: It is not recommended to underline text that is not a link, as this often
confuses the reader.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters
in a text.
It can be used to turn everything into uppercase or lowercase letters, or

capitalize the first letter of each word:
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
Text Indentation
The text-indent property is used to specify the indentation of the first line of a
text (insert space before first word):
text-indent: 50px;
Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.
The following example demonstrates how to increase or decrease the space

between characters:
h1 {letter-spacing: 3px;}
h2 {letter-spacing: -3px;}
Line Height
The line-height property is used to specify the space between lines:
p.small {line-height: 0.8;}
p.big {line-height: 1.8;}

Text Direction
The direction property is used to change the text direction of an element:
direction: rtl;
Word Spacing
The word-spacing property is used to specify the space between the words in a
text.
The following example demonstrates how to increase or decrease the space

between words:
h1 {word-spacing: 10px;}
h2 {word-spacing: -5px;}
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the
position of the vertical shadow (2px) and the color of the shadow (red):
text-shadow: 3px 2px red;
Note: Internet Explorer 9 and earlier do not support the text-shadow property.
CSS Fonts:
The CSS font properties define the font family, boldness, size, and the style of a
text.
Difference Between Serif and Sans-serif
CSS Font Families

In CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif"
or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
Generic Font family Description

family
Serif Times New Roman Serif fonts have small lines at the
Georgia ends on some characters
Sans-serif Arial "Sans" means without - these fonts

Verdana do not have the lines at the ends of
characters
Monospace Courier New All monospace characters have the

Lucida Console same width
Note: On computer screens, sans-serif fonts are considered easier to read than
serif fonts.
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback"

system. If the browser does not support the first font, it tries the next font, and
so on.
Start with the font you want, and end with a generic family, to let the browser
pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in
quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
font-family: "Times New Roman", Times, serif;
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally

 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you
should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
 Absolute size is useful when the physical size of the output is known
Relative size:
 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
font-size: 40px;
Tip: If you use pixels, you can still use the zoom tool to resize the entire page.
Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use
em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px.
So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
font-size: 2.5em; /* 40px/16=2.5em */

In the example above, the text size in em is the same as the previous example
in pixels. However, with the em size, it is possible to adjust the text size in all
browsers.
Unfortunately, there is still a problem with older versions of IE. The text
becomes larger than it should when made larger, and smaller than it should
when made smaller.
Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent
for the <body> element:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
Our code now works great! It shows the same text size in all browsers, and
allows all browsers to zoom or resize the text!
Font Weight
The font-weight property specifies the weight of a font:
p.normal {font-weight: normal;}
p.thick {font-weight: bold;}
Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window.
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the

viewport is 50cm wide, 1vw is 0.5cm.
Font Variant
The font-variant property specifies whether or not a text should be displayed
in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters.

However, the converted uppercase letters appears in a smaller font size than
the original uppercase letters in the text.
p.normal {font-variant: normal;} = My name is Hege Refsnes.
p.small {font-variant: small-caps;} = MY NAME IS HEGE REFSNES.
CSS Icons:
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon library, such
as Font Awesome.
Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).
All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)
Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a
code to add in the <head> section of your HTML page:
<script src="https://kit.fontawesome.com/yourcode.js"></script>
Note: No downloading or installation is required!

<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the <head> section
of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.mi
n.css">
Then in the body section for example:
<i class="glyphicon glyphicon-cloud"></i>
Google Icons
To use the Google icons, add the following line inside the <head> section of your
HTML page:
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
Then in the body section for example:
<i class="material-icons">cloud</i>

CSS Links:
Styling Links
Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
a {color: hotpink;}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
/* unvisited link */
a:link {color: red;}
/* visited link */
a:visited {color: green;}
/* mouse over link */

a:hover {color: hotpink;}
/* selected link */
a:active {color: blue;}
When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
a:link {text-decoration: none;}

Background Color
The background-color property can be used to specify a background color for
links:
a:link {background-color: yellow;}
Advanced - Link Buttons

This example demonstrates a more advanced example where we combine
several CSS properties to display links as boxes/buttons:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
CSS Lists:
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:
ul {list-style-image: url('sqpurple.gif');}
Position The List Item Markers

The list-style-position property specifies the position of the list-item
markers (bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list
item. The start of each line of a list item will be aligned vertically. This is
default.
"list-style-position: inside;" means that the bullet points will be inside the list
item. As it is part of the list item, it will be part of the text and push the text at
the start.
ul.a {list-style-position: outside;}
ul.b {list-style-position: inside;}

Remove Default Settings
The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to <ul> or <ol>:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:
ul {list-style: square inside url("sqpurple.gif");}
When using the shorthand property, the order of the property values are:
 list-style-type (if a list-style-image is specified, the value of this

property will be displayed if the image for some reason cannot be
displayed)
 list-style-position (specifies whether the list-item markers should
appear inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for the
missing property will be inserted, if any.
Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:
ol {background: #ff9999; }
ol li {background: #ffe5e5;}
CSS Tables:
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td>
elements:
Firstname Lastname
Peter Griffin
Lois Griffin
table, th, td {border: 1px solid black;}
Notice that the table in the example above has double borders. This is because
both the table and the <th> and <td> elements have separate borders.
Collapse Table Borders

The border-collapse property sets whether the table borders should be
collapsed into a single border:
Firstname Lastname
Peter Griffin
Lois Griffin
table {border-collapse: collapse;}
table, th, td {border: 1px solid black;}
If you only want a border around the table, only specify the border property for
<table>:
Firstname Lastname
Peter Griffin
Lois Griffin
table {border: 1px solid black;}

Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the
<th> elements to 50px:
table {width: 100%;}
th {height: 50px;}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both
<th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td>
elements:
td {height: 50px;
vertical-align: bottom;}
Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
th, td {padding: 15px;

text-align: left;}
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
th, td {border-bottom: 1px solid #ddd;}

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
tr:hover {background-color: #f5f5f5;}
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-
color to all even (or odd) table rows:
tr:nth-child(even) {background-color: #f2f2f2;}
Table Color
The example below specifies the background color and text color of <th>
elements:
th {background-color: #4CAF50;
color: white;}
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to
display the full content:
Add a container element (like <div>) with overflow-x:auto around the <table>
element to make it responsive:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown
when being used (even though "overflow:scroll" is set).
CSS Layout - The display Property:
The display property is the most important CSS property for controlling
layout.
The display Property

The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
Inline Elements
An inline element does not start on a new line and only takes up as much width
as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:

 <span>
 <a>
 <img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements
without deleting and recreating them.
The <script> element uses display: none; as default.
Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.
Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.
A common example is making inline <li> elements for horizontal menus:
li {display: inline;}
Note: Setting the display property of an element only changes how the
element is displayed, NOT what kind of element it is. So, an inline element
with display: block; is not allowed to have other block elements inside it.
The following example displays <span> elements as block elements:
span {display: block;}
The following example displays <a> elements as block elements:
a {display: block;}
Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The
element will be hidden, and the page will be displayed as if the element is not
there:
h1.hidden {display: none;}

visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element
will be hidden, but still affect the layout:
h1.hidden {visibility: hidden;}
CSS Layout - width and max-width:

Using width, max-width and margin: auto;
As mentioned in the previous chapter; a block-level element always takes up
the full width available (stretches out to the left and right as far as it can).
Setting the width of a block-level element will prevent it from stretching out to
the edges of its container. Then, you can set the margins to auto, to
horizontally center the element within its container. The element will take up
the specified width, and the remaining space will be split equally between the
two margins:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Note: The problem with the <div> above occurs when the browser window is
smaller than the width of the element. The browser then adds a horizontal
scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of
small windows. This is important when making a site usable on small devices:
div.ex2 {
max-width: 500px;
margin: auto;
}
CSS Layout - The position Property:
The position property specifies the type of positioning method used for an
element.
There are five different position values:
 static
 relative
 fixed
 absolute
 sticky
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set
first. They also work differently depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is

always positioned according to the normal flow of the page:
div.static {
position: static;
border: 3px solid #73AD21;}
position: relative;
An element with position: relative; is positioned relative to its normal
position.
Setting the top, right, bottom, and left properties of a relatively-positioned

element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.
div.relative {
position: relative;
left: 30px;
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have
been located.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses

the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.
A sticky element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).
Note: Internet Explorer, Edge 15 and earlier versions do not support sticky
positioning. Safari requires a -webkit- prefix (see example below). You must
also specify at least one of top, right, bottom or left for sticky positioning to
work.
In this example, the sticky element sticks to the top of the page (top: 0), when
you reach its scroll position.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;}
Overlapping Elements
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;}
CSS Layout – Overflow:
The overflow property specifies whether to clip the content or to add scrollbars
when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
 visible - Default. The overflow is not clipped. The content renders

outside the element's box
 hidden - The overflow is clipped, and the rest of the content will be
invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest
of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified
height.
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown
when being used (even though "overflow:scroll" is set).
overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:
div {overflow: visible;}
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is
hidden:
div {overflow: hidden;}
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to
scroll inside the box. Note that this will add a scrollbar both horizontally and
vertically (even if you do not need it):
div {overflow: scroll;}
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:
div {overflow: auto;}
overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the
overflow of content just horizontally or vertically (or both):
overflow-x specifies what to do with the left/right edges of the content.

overflow-y specifies what to do with the top/bottom edges of the content.
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
CSS Layout - float and clear:

The float Property
The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container

 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs
in the text). This is default
 inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Example - float: right;
The following example specifies that an image should float to the right in a
text:
img {float: right;}
Example - float: left;

The following example specifies that an image should float to the left in a text:
img {float: left;}
Example - No float
In the following example the image will be displayed just where it occurs in the
text (float: none;):
img {float: none;}
The clear Property

The clear property specifies what elements can float beside the cleared
element and on which side.
The clear property can have one of the following values:
 none - Allows floating elements on both sides. This is default

 left - No floating elements allowed on the left side
 right- No floating elements allowed on the right side
 both - No floating elements allowed on either the left or the right side
 inherit - The element inherits the clear value of its parent
 The most common way to use the clear property is after you have used
a float property on an element.
 When clearing floats, you should match the clear to the float: If an
element is floated to the left, then you should clear to the left. Your
floated element will continue to float, but the cleared element will appear
below it on the web page.
 The following example clears the float to the left. Means that no floating
elements are allowed on the left side (of the div):
div {clear: left;}
The clearfix Hack

If an element is taller than the element containing it, and it is floated, it will
"overflow" outside of its container:
Without Clearfix
With Clearfix
Then we can add overflow: auto; to the containing element to fix this
problem:
.clearfix {overflow: auto;}
The overflow: auto clearfix works well as long as you are able to keep control
of your margins and padding (else you might see scrollbars). The new,
modern clearfix hack however, is safer to use, and the following code is used
for most webpages:
.clearfix::after {
content: "";
clear: both;
display: table;}
Grid of Boxes / Equal Width Boxes

With the float property, it is easy to float boxes of content side by side:
* {box-sizing: border-box;}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two) */
padding: 50px; /* if you want space between the images */}
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add
something that enlarges the width of each box (e.g. padding or borders), the
box will break. The box-sizing property allows us to include the padding and
border in the box's total width (and height), making sure that the padding stays
inside of the box and that it does not break.
CSS Layout - display: inline-block:

The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-
block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-

block does not add a line-break after the element, so the element can sit next
to other elements.
Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally
instead of vertically.
CSS Layout - Horizontal & Vertical Align:
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges
of its container.
The element will then take up the specified width, and the remaining space will
be split equally between the two margins:
.center {
margin: auto;
width: 50%;
padding: 10px;}
Note: Center aligning has no effect if the width property is not set (or set to
100%).
Center Align Text

To just center the text inside an element, use text-align: center;
.center {
text-align: center;
border: 3px solid green;}
Center an Image
To center an image, set left and right margin to auto and make it into
a block element:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Left and Right Align - Using position
One method for aligning elements is to use position: absolute;:
position: absolute;
right: 0px;
Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.
Left and Right Align - Using float

Another method for aligning elements is to use the float property:
float: right;
Note: If an element is taller than the element containing it, and it is floated, it
will overflow outside of its container. You can use the "clearfix" hack to fix this.
Center Vertically - Using padding

There are many ways to center an element vertically in CSS. A simple solution
is to use top and bottom padding:
.center {
padding: 70px 0;}
To center both vertically and horizontally, use padding and text-align:

center:
.center {
padding: 70px 0;
text-align: center;}
Center Vertically - Using line-height

Another trick is to use the line-height property with a value that is equal to
the height property.
.center {
line-height: 200px;
height: 200px;
/* If the text has multiple lines, add the following: */

.center p {
line-height: 1.5;
vertical-align: middle;}
Center Vertically - Using position & transform

If padding and line-height are not options, a third solution is to use
positioning and the transform property:
.center {
height: 200px;
position: relative;
border: 3px solid green;}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
CSS Combinators:
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
There are four different combinators in CSS:
 descendant selector (space)

 child selector (>)
 adjacent sibling selector (+)
 general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a
specified element.
The following example selects all <p> elements inside <div> elements:
div p {background-color: yellow;}
Child Selector
The child selector selects all elements that are the children of a specified
element.
The following example selects all <p> elements that are children of a <div>
element:
div > p {background-color: yellow;}
Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings
of a specified element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects all <p> elements that are placed immediately
after <div> elements:
div + p {background-color: yellow;}
General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified
element.
The following example selects all <p> elements that are siblings of <div>
elements:
div ~ p {background-color: yellow;}
CSS Pseudo-classes:
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
selector:pseudo-class {
property:value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
/* 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;}
Note: a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective! a:active MUST come after a:hover in the CSS definition
in order to be effective! Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:
When you hover over the link in the example, it will change color:
a.highlight:hover {color: #ff0000;}
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
div:hover {background-color: blue;}
Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):
p {
display: none;
background-color: yellow;
padding: 20px;}
div:hover p {
display: block;}
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first
child of another element.
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
Match the first <p> element

In the following example, the selector matches any <p> element that is the first
child of any element:
p:first-child {color: blue;}
Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p>
elements:
p i:first-child {color: blue;}
Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p>
elements that are the first child of another element:
p:first-child i {color: blue;}
CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.
In the example below, :lang defines the quotation marks for <q> elements with
lang="no":
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
Result: Some text ~A quote in a paragraph~ Some text.
Note: IE8 supports the :lang pseudo class only if a !DOCTYPE is specified.
CSS Pseudo-elements:
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;
}
Notice the double colon notation - ::first-line versus :first-line
The double colon replaced the single-colon notation for pseudo-elements in

CSS3. This was an attempt from W3C to distinguish between pseudo-
classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements
in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and
CSS1 pseudo-elements.
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line
of a text.
The following example formats the first line of the text in all <p> elements:
p::first-line {
color: #ff0000;
font-variant: small-caps;}
Note: The ::first-line pseudo-element can only be applied to block-level

elements.
The following properties apply to the ::first-line pseudo-element:
 font properties  text-decoration

 color properties  vertical-align
 background properties  text-transform
 word-spacing  line-height
 letter-spacing  clear
The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
The following example formats the first letter of the text in all <p> elements:
p::first-letter {
color: #ff0000;
font-size: xx-large;}
 font properties  text-decoration

 color properties  vertical-align (only if "float" is
 background properties "none")
 margin properties  text-transform
 padding properties  line-height
 border properties  float
 clear
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
p.intro::first-letter {
color: #ff0000;
font-size:200%;}
The example above will display the first letter of paragraphs with class="intro",
in red and in a larger size.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-
large font size. The rest of the first line will be blue, and in small-caps. The rest
of the paragraph will be the default font size and color:
p::first-letter {
color: #ff0000;
font-size: xx-large;}
p::first-line {
color: #0000ff;
font-variant: small-caps;}
CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the
content of an element.
The following example inserts an image before the content of each <h1>
element:
h1::before {
content: url(smiley.gif);}
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the
content of an element.
The following example inserts an image after the content of each <h1>
element:
h1::after {
content: url(smiley.gif);}
CSS - The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is
selected by a user.
The following CSS properties can be applied

to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:
CSS Opacity / Transparency:

The opacity property specifies the opacity/transparency of an element.
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the
more transparent:
Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0
- 100. A lower value makes the element more transparent.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Transparent Hover Effect
The opacity property is often used together with the :hover selector to change
the opacity on mouse-over:
img:hover {
opacity: 0.5;
}
Transparent Box
When using the opacity property to add transparency to the background of an
element, all of its child elements inherit the same transparency. This can make
the text inside a fully transparent element hard to read:
div {
opacity: 0.3;
}
Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values. The following example sets the opacity for the
background color and not the text:
div {
background: rgba(76, 175, 80, 0.3) /*Green background with 30% opacity*/
}
CSS Rounded Corners:

With the CSS border-radius property, you can give any element "rounded
corners".
CSS border-radius Property
The CSS border-radius property defines the radius of an element's corners.
#rcorners {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;}
Tip: The border-radius property is actually a shorthand property for

the border-top-left-radius, border-top-right-radius, border-bottom-
right-radius and border-bottom-left-radius properties.
CSS border-radius - Specify Each Corner

The border-radius property can have from one to four values. Here are the
rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to
top-left corner, second value applies to top-right corner, third value applies to
bottom-right corner, and fourth value applies to bottom-left corner).
Three values - border-radius: 15px 50px 30px; (first value applies to top-
left corner, second value applies to top-right and bottom-left corners, and third
value applies to bottom-right corner).
Two values - border-radius: 15px 50px; (first value applies to top-left and
bottom-right corners, and the second value applies to top-right and bottom-left
corners).
One value - border-radius: 15px; (the value applies to all four corners, which
are rounded equally.
You could also create elliptical corners:
border-radius: 50px / 15px;

Rounded Images
Use the border-radius property to create rounded images:
Rounded Image:
img {border-radius: 8px;}
Circled Image:
img {border-radius: 50%;}
CSS Shadow Effects:

With CSS you can add shadow to text and to elements.
In this chapter you will learn about the following properties:
 text-shadow
 box-shadow
CSS Text Shadow

The CSS text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px):
h1 {text-shadow: 2px 2px;}
Next, add a color to the shadow:
h1 {text-shadow: 2px 2px red;}
Then, add a blur effect to the shadow:
h1 {text-shadow: 2px 2px 5px red;}

The following example shows a white text with black shadow:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;}
Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list
of shadows.
The following example shows a red and blue neon glow shadow:
h1 {text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;}
You can also use the text-shadow property to create a plain border around
some text (without shadows):
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
CSS box-shadow Property

The CSS box-shadow property applies shadow to elements.
In its simplest use, you only specify the horizontal shadow and the vertical
shadow:
div {box-shadow: 10px 10px;}
Next, add a color to the shadow:
div {box-shadow: 10px 10px grey;}
Next, add a blur effect to the shadow:
div {box-shadow: 10px 10px 5px grey;}
You can also add shadows to the ::before and ::after pseudo-elements, to
create an interesting effect.
Cards
An example of using the box-shadow property to create paper-like cards:
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
CSS Text Effects:

In this chapter you will learn about the following properties:
 text-overflow
 word-wrap
 word-break
 writing-mode
 The CSS text-overflow property specifies how overflowed content that is

not displayed should be signaled to the user.
 It can be clipped or it can be rendered as an ellipsis (...).
 The CSS code is as follows:
p.test1 {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: clip;}
p.test2 {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;}
CSS Word Wrapping
The CSS word-wrap property allows long words to be able to be broken and wrap
onto the next line.
If a word is too long to fit within an area, it expands outside.
The word-wrap property allows you to force the text to wrap - even if it means
splitting it in the middle of a word.
The CSS code is as follows:
p {word-wrap: break-word;}
CSS Word Breaking

The CSS word-break property specifies line breaking rules.
p.test1 {word-break: keep-all;}
p.test2 {word-break: break-all;}
Note: The word-break property is not supported in Opera 12 and earlier versions.
CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out
horizontally or vertically.
The following example shows some different writing modes:
p.test1 {writing-mode: horizontal-tb;}
span.test2 {writing-mode: vertical-rl;}
p.test2 {writing-mode: vertical-rl;}

CSS Transitions:
CSS transitions allows you to change property values smoothly, over a given
duration.
Browser Specific Prefixes

Some older browsers need specific prefixes (-webkit-) to understand the
transition properties.
-webkit-transition: width 2s; /* Safari prior 6.1 */

transition: width 2s;
Note: CSS Transitions does not work in Internet Explorer 9 and earlier versions.
How to Use CSS Transitions?

To create a transition effect, you must specify two things:
 the CSS property you want to add an effect to

 the duration of the effect
Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a
duration of 2 seconds:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
The transition effect will start when the specified CSS property (width) changes
value.
Now, let us specify a new value for the width property when a user mouses over
the <div> element:
div:hover {width: 300px;}
Notice that when the cursor mouses out of the element, it will gradually change
back to its original style.
Change Several Property Values

The following example adds a transition effect for both the width and height
property, with a duration of 2 seconds for the width and 4 seconds for the
height:
div {transition: width 2s, height 4s;}
Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the
transition effect.
The transition-timing-function property can have the following values:
 ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
 linear - specifies a transition effect with the same speed from start to
end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function
The following example shows the some of the different speed curves that can be
used:
#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition
effect.
The following example has a 1 second delay before starting:
div {transition-delay: 1s;}
Transition + Transformation
The following example adds a transition effect to the transformation:
div {transition: width 2s, height 2s, transform 2s;}
More Transition Examples

The CSS transition properties can be specified one by one, like this:
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;}
or by using the shorthand property transition:
div {transition: width 2s linear 1s;}
CSS Image Sprites:

An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates
multiple server requests.
Using image sprites will reduce the number of server requests and save
bandwidth.
Image Sprites - Simple Example

Instead of using three separate images, we use this single image
("img_navsprites.gif"):
With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the

"img_navsprites.gif" image to show:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;}
In the body:
<img id="home" src="img_trans.gif" width="1" height="1">
Example explained:
 <img id="home" src="img_trans.gif"> - Only defines a small

transparent image because the src attribute cannot be empty. The
displayed image will be the background image we specify in CSS
 width: 46px; height: 44px; - Defines the portion of the image we want
to use
 background: url(img_navsprites.gif) 0 0; - Defines the background
image and its position (left 0px, top 0px)
Image Sprites - Hover Effect
Because this is one single image, and not six separate files, there will be no
loading delay when a user hovers over the image.
We only add three lines of code to add the hover effect:
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover {background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover {background: url('img_navsprites_hover.gif') -91px -45px;}
CSS Attribute Selectors:

Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes or attribute
values.
CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
a[target] {background-color: yellow;}
CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example selects all <a> elements with a target="_blank"

attribute:
a[target="_blank"] {background-color: yellow;}

CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute
value containing a specified word.
The following example selects all elements with a title attribute that contains a
space-separated list of words, one of which is "flower":
[title~="flower"] {border: 5px solid yellow;}
The example above will match elements with title="flower", title="summer

flower", and title="flower new", but not title="my-flower" or title="flowers".
CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified
attribute starting with the specified value.
The following example selects all elements with a class attribute value that
begins with "top":
Note: The value has to be a whole word, either alone, like class="top", or
followed by a hyphen( - ), like class="top-text"!
[class|="top"] {background: yellow;}
CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute
value begins with a specified value.
begins with "top":
Note: The value does not have to be a whole word!
[class^="top"] {background: yellow;}

CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.
The following example selects all elements with a class attribute value that ends
with "test":
[class$="test"] {background: yellow;}
CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute
value contains a specified value.
contains "te":
[class*="te"] {background: yellow;}
Styling Forms
The attribute selectors can be useful for styling forms without class or ID.
CSS Forms:
Styling Input Fields
Use the width property to determine the width of the input field:
input {width: 100%;}

The example above applies to all <input> elements. If you only want to style a
specific input type, you can use attribute selectors:
 input[type=text] - will only select text fields

 input[type=password] - will only select password fields
 input[type=number] - will only select number fields
 etc..
Padded Inputs
Use the padding property to add space inside the text field.
Tip: When you have many inputs after each other, you might also want to add
some margin, to add more space outside of them:
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;}
Note that we have set the box-sizing property to border-box. This makes sure
that the padding and eventually borders are included in the total width and
height of the elements.
Bordered Inputs
Use the border property to change the border size and color, and use
the border-radius property to add rounded corners:
input[type=text] {
border-radius: 4px;}
If you only want a bottom border, use the border-bottom property.
input[type=text] {
border: none;
border-bottom: 2px solid red;}
Colored Inputs
Use the background-color property to add a background color to the input, and
the color property to change the text color:
input[type=text] {
background-color: #3CBC8D;
color: white;}
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding outline: none; to
the input.
Use the :focus selector to do something with the input field when it gets focus:
input[type=text]:focus {border: 3px solid #555;}
Input with icon/image

If you want an icon inside the input, use the background-image property and
position it with the background-position property. Also notice that we add a
large left padding to reserve the space of the icon:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;}
Animated Search Input

In this example we use the CSS transition property to animate the width of
the search input when it gets focus.
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;}
input[type=text]:focus {width: 100%;}
Styling Textareas
Tip: Use the resize property to prevent textareas from being resized (disable
the "grabber" in the bottom right corner):
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Styling Select Menus

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
}
Styling Input Buttons

input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */

CSS Navigation Bar:
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation
bars.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
ul {
margin: 0;
padding: 0;}
Example explained:
 list-style-type: none; - Removes the bullets. A navigation bar does

not need list markers
 Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and
horizontal navigation bars.
Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the
list, in addition to the code above:
li a {
display: block;
width: 60px;}
Example explained:
 display: block; - Displaying the links as block elements makes the

whole link area clickable (not just the text), and it allows us to specify the
width (and padding, margin, height, etc. if you want)
 width: 60px; - Block elements take up the full width available by default.
We want to specify a 60 pixels width
You can also set the width of <ul>, and remove the width of <a>, as they will
take up the full width available when displayed as block elements. This will
produce the same result as our previous example.
Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change
the background color of the links when the user moves the mouse over them:
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;}
Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she
is on:
li a.active {
color: white;}
To exclude it from hover effect Add :not(.active) like this:
li a:hover:not(.active) {
background-color: #555;
color: white;}
Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also
want borders inside the navbar, add a border-bottom to all <li> elements,
except for the last one:
ul {
border: 1px solid #555;}
li {
text-align: center;
border-bottom: 1px solid #555;}
li:last-child {
border-bottom: none;}
Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar.
Using inline or floating list items.
One way to build a horizontal navigation bar is to specify the <li> elements as
inline, in addition to the "standard" code above:
li {display: inline;}
Floating List Items

Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
li {
float: left;}
a {
display: block;
padding: 8px;
background-color: #dddddd;}
Example explained:
 float: left; - use float to get block elements to slide next to each other
 display: block; - Displaying the links as block elements makes the
whole link area clickable (not just the text), and it allows us to specify
padding (and height, width, margins, etc. if you want)
 padding: 8px; - Since block elements take up the full width available,
they cannot float next to each other. Therefore, specify some padding to
make them look good
 background-color: #dddddd; - Add a gray background-color to each a
element
Tip: Add the background-color to <ul> instead of each <a> element if you
want a full-width background color:
ul {background-color: #dddddd;}
Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and
change the background color of the links when the user moves the mouse over
them:
ul {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
/* Change the link color to #111 (black) on hover */
li a:hover {background-color: #111;}
Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she
is on:
.active {background-color: #4CAF50;}
Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<li style="float:right"><a class="active" href="#about">About</a></li>
Border Dividers
Add the border-right property to <li> to create link dividers:
/* Add a gray right border to all list items, except the last item (last-
child) */
li {border-right: 1px solid #bbb;}
li:last-child {border-right: none;}
Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when
the user scrolls the page:
Fixed Top
ul {
position: fixed;
top: 0;
width: 100%;}
Fixed Bottom
ul {
position: fixed;
bottom: 0;
width: 100%;}
Note: Fixed position might not work properly on mobile devices.
Sticky Navbar
Add position: sticky; to <ul> to create a sticky navbar.
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
Note: Internet Explorer, Edge 15 and earlier versions do not support sticky
positioning. Safari requires a -webkit- prefix (see example above). You must
also specify at least one of top, right, bottom or left for sticky positioning to
work.
CSS Dropdowns:
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an
element.
<style>
.dropdown {
position: relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;}
.dropdown:hover .dropdown-content {display: block;}

</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Example Explained
HTML) Use any element to open the dropdown content, e.g. a <span>, or a
<button> element.
Use a container element (like <div>) to create the dropdown content and add
whatever you want inside of it.
Wrap a <div> element around the elements to position the dropdown content
correctly with CSS.
CSS) The .dropdown class uses position:relative, which is needed when we want
the dropdown content to be placed right below the dropdown button
(using position:absolute).
The .dropdown-content class holds the actual dropdown content. It is hidden by

default, and will be displayed on hover (see below). Note the min-width is set to
160px. Feel free to change this. Tip: If you want the width of the dropdown
content to be as wide as the dropdown button, set the width to 100%
(and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the CSS box-shadow property to make
the dropdown menu look like a "card".
The :hover selector is used to show the dropdown menu when the user moves
the mouse over the dropdown button.
Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:
This example is similar to the previous one, except that we add links inside the
dropdown box and style them to fit a styled dropdown button:
<style>
/* Style The Dropdown Button */
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;}
/* The container <div> - needed to position the dropdown content */

.dropdown {
position: relative;
display: inline-block;}
/* Dropdown Content (Hidden by Default) */

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;}
/* Links inside the dropdown */

.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;}
/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a></div></div>
Right-aligned Dropdown Content

If you want the dropdown menu to go from right to left, instead of left to right,
add right: 0;
.dropdown-content {right: 0;}
CSS Tooltip:
Create a tooltip that appears when the user moves the mouse over an element:
<style>
/* Tooltip container */
.tooltip {
position: relative;
border-bottom: 1px dotted black; /* If you want dots under the hoverable
text */}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {visibility: visible;}
</style>
<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>
Positioning Tooltips
In this example, the tooltip is placed to the right (left:105%) of the "hoverable"
text (<div>). Also note that top:-5px is used to place it in the middle of its
container element. We use the number 5 because the tooltip text has a top and
bottom padding of 5px. If you increase its padding, also increase the value of
the top property to ensure that it stays in the middle (if this is something you
want). The same applies if you want the tooltip placed to the left.
Right Tooltip
top: -5px;
left: 105%;}
Left Tooltip
top: -5px;
right: 105%;}
If you want the tooltip to appear on top or on the bottom, see examples below.
Note that we use the margin-left property with a value of minus 60 pixels. This
is to center the tooltip above/below the hoverable text. It is set to the half of
the tooltip's width (120/2 = 60).
Top Tooltip
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the
tooltip */}
Bottom Tooltip
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the
tooltip */}
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add
"empty" content after tooltip, with the pseudo-element class ::after together
with the content property. The arrow itself is created using borders. This will
make the tooltip look like a speech bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;}
Note: The border-color is used to transform the content into an arrow. We set
the top border to black, and the rest to transparent. If all sides were black, you
would end up with a black square box.
CSS Media Queries:
CSS2 Introduced Media Types
The @media rule, introduced in CSS2, made it possible to define different style
rules for different media types.
Examples: You could have one set of style rules for computer screens, one for
printers, one for handheld devices, one for television-type devices, and so on.
Unfortunately these media types never got a lot of support by devices, other
than the print media type.
CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking
for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
 width and height of the viewport

 width and height of the device
 orientation (is the tablet/phone in landscape or portrait mode?)
 resolution
Using media queries are a popular technique for delivering a tailored style sheet
to desktops, laptops, tablets, and mobile phones (such as iPhone and Android
phones).
Media Query Syntax

A media query consists of a media type and can contain one or more
expressions, which resolve to either true or false.
@media not|only mediatype and (expressions) {

CSS-Code;
}
The result of the query is true if the specified media type matches the type of
device the document is being displayed on and all expressions in the media
query are true. When a media query is true, the corresponding style sheet or
style rules are applied, following the normal cascading rules.
Unless you use the not or only operators, the media type is optional and
the all type will be implied.
You can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only

(expressions)" href="print.css">
Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside
your style sheet.
The following example changes the background-color to lightgreen if the

viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the
background-color will be pink):
@media screen and (min-width: 480px) {

body {background-color: lightgreen;}
}
The following example shows a menu that will float to the left of the page if the
viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the
menu will be on top of the content):
@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
CSS Website Layout:
A website is often divided into headers, menus, content and a footer:
There are tons of different layout designs to choose from. However, the
structure above, is one of the most common, and we will take a closer look at it
in this tutorial.
Header
A header is usually located at the top of the website (or right below a top
navigation menu). It often contains a logo or the website name:
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;}
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your
website.
Content
The layout in this section, often depends on the target users. The most common
layout is one (or combining them) of the following:
 1-column (often used for mobile browsers)

 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)
/* Create three equal columns that floats next to each other */

.column {
float: left;
width: 33.33%;}
/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {width: 100%;}}
Tip: To create a 2-column layout, change the width to 50%. To create a 4-

column layout, use 25%, etc.
Tip: A more modern way of creating column layouts, is to use CSS Flexbox.
However, it is not supported in Internet Explorer 10 and earlier versions. If you
require IE6-10 support, use floats (as shown above).
Unequal Columns
The main content is the biggest and the most important part of your site.
It is common with unequal column widths, so that most of the space is

reserved for the main content. The side content (if any) is often used as an
alternative navigation or to specify information relevant to the main content.
Change the widths as you like, only remember that it should add up to 100% in
total:
.column {float: left;}
/* Left and right column */

.column.side {
width: 25%;}
/* Middle column */
.column.middle {
width: 50%;}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {width: 100%;}}
Footer
The footer is placed at the bottom of your page. It often contains information
like copyright and contact info:
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;}
CSS Specificity:
What is Specificity? If there are two or more conflicting CSS rules that point to
the same element, the browser follows some rules to determine which one is
most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are

ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly
specific!
Note: Specificity is a common reason why your CSS-rules don't apply to some
elements, although you think they should.
Specificity Hierarchy
Every selector has its place in the specificity hierarchy. There are four
categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled.

Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes,

[attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and

pseudo-elements, such as h1, div, :before and :after.
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
The specificity of A is 1 (one element)

The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
Since 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and
therefore will be applied.
Specificity Rules
Equal specificity: the latest rule counts - If the same rule is written twice
into the external style sheet, then the lower rule in the style sheet is closer to
the element to be styled, and therefore will be applied:
h1 {background-color: yellow;}
h1 {background-color: red;}
the latter rule is always applied.
ID selectors have a higher specificity than attribute selectors - Look at

the following three code lines:
div#a {background-color: green;}

#a {background-color: yellow;}
div[id=a] {background-color: blue;}
the first rule is more specific than the other two, and will be applied.
Contextual selectors are more specific than a single element selector

- The embedded style sheet is closer to the element to be styled. So in the
following situation
From external CSS file:

#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color: yellow;}
</style>
the latter rule will be applied.
A class selector beats any number of element selectors - a class selector

such as .intro beats h1, p, div, etc:
.intro {background-color: yellow;}

h1 {background-color: red;}
The universal selector and inherited values have a specificity of 0 - *,

body * and similar have a zero specificity. Inherited values also have a
specificity of 0.

CSS Tutorial

Uploaded by

Copyright:

Available Formats

CSS Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Tutorial

Uploaded by

Copyright:

Available Formats

CSS Tutorial

Why Use CSS?

CSS Solved a Big Problem

HTML was created to describe the content of a web page, like:

CSS removed the style formatting from the HTML page!

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by

Each declaration includes a CSS property name and a value, separated by a

Comments are ignored by browsers.

/* This is a single-line comment */ /* This is

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

The CSS element Selector

The id of an element is unique within a page, so the id selector is used to select

The CSS class Selector

In this example only <p> elements with class="center" will be center-aligned:

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

The CSS Universal Selector

The CSS Grouping Selector

To group selectors, separate each selector with a comma.

How To Add CSS:

<h1 style="color:blue;text-align:center;">This is a heading</h1>

Multiple Style Sheets

1. Inline style (inside an HTML element)

CSS Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<h1 style="color:Tomato;">Hello World</h1>

CSS Border Color

<h1 style="border:2px solid Tomato;">Hello World</h1>

CSS Color Values

CSS RGB Value

rgb(red, green, blue)

rgb(255, 0, 0) rgb(0, 0, 255) rgb(60, 179, 113)

rgb(0, 0, 0) rgb(180, 180, 180) rgb(255, 255, 255)

CSS HEX Value

#ff0000 #0000ff #3cb371 #ee82ee #ffa500 #6a5acd

#000000 #3c3c3c #787878 #b4b4b4 #f0f0f0 #ffffff

hsl(hue, saturation, lightness)

Saturation is a percentage value, 0% means a shade of gray, and 100% is the

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100%

hsl(0, 100%, 50%) hsl(0, 40%, 50%) hsl(0, 0%, 50%)

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

rgba(255, 99, 71, 0.2)

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

hsla(9, 100%, 64%, 0.2)

By default, the image is repeated so it covers the entire element.

Tip: To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Position the background image in the top-right corner:

background-position: right top;

Specify that the background image should be fixed:

The shorthand property for background is background.

background: #ffffff url("img_tree.png") no-repeat right top;

The following values are allowed:

 dotted - Defines a dotted border

p.dotted {border-style: dotted;}

p.mix {border-style: dotted dashed solid double;}

/* This is a single-line comment / / This is