Contents

About .....................................................................................................................................................Error! Bookmark not defined.

Chapter 1: Getting started with CSS .................................................................................................................................................... 5
Section 1.1: External Stylesheet................................................................................................................................................... 5
Section 1.2: Internal Styles........................................................................................................................................................... 6
Section 1.3: CSS @import rule (one of CSS at-rule) ..................................................................................................................... 7
Section 1.4: Inline Styles .............................................................................................................................................................. 7
Section 1.5: Changing CSS with JavaScript ................................................................................................................................... 8
Section 1.6: Styling Lists with CSS ................................................................................................................................................ 9
Chapter 2: Structure and Formatting of a CSS Rule ........................................................................................................................... 10
Section 2.1: Property Lists.......................................................................................................................................................... 10
Section 2.2: Multiple Selectors .................................................................................................................................................. 10
Section 2.3: Rules, Selectors, and Declaration Blocks ................................................................................................................ 10
Chapter 3: Comments ....................................................................................................................................................................... 10
Section 3.1: Single Line .............................................................................................................................................................. 10
Section 3.2: Multiple Line .......................................................................................................................................................... 11
Chapter 4: Selectors .......................................................................................................................................................................... 12
Section 4.1: Basic selectors ........................................................................................................................................................ 12
Section 4.2: Attribute Selectors ................................................................................................................................................. 12
Section 4.3: Combinators ........................................................................................................................................................... 15
Section 4.4: Pseudo-classes ....................................................................................................................................................... 17
Section 4.5: Child Pseudo Class .................................................................................................................................................. 20
Section 4.6: Class Name Selectors ............................................................................................................................................. 20
Section 4.7: Select element using its ID without the high specificity of the ID selector ............................................................ 21
Section 4.8: The :last-of-type selector ....................................................................................................................................... 21
Section 4.9: CSS3 :in-range selector example ............................................................................................................................ 22
Section 4.10: A. The :not pseudo-class example & B. :focuswithin CSS pseudo-class ............................................................... 22
Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator) ....................................................... 24
Section 4.12: ID selectors ........................................................................................................................................................... 25
Section 4.13: How to style a Range input .................................................................................................................................. 25
Section 4.14: The :only-child pseudo-class selector example .................................................................................................... 26
Chapter 5: Backgrounds .................................................................................................................................................................... 26
Section 5.1: Background Color ................................................................................................................................................... 26
Section 5.2: Background Gradients ............................................................................................................................................ 29
Section 5.3: Background Image.................................................................................................................................................. 30
Section 5.4: Background Shorthand........................................................................................................................................... 31
Section 5.5: Background Size ..................................................................................................................................................... 32
Section 5.6: Background Position .............................................................................................................................................. 37
Section 5.7: The background-origin property ............................................................................................................................ 38
Section 5.8: Multiple Background Image ................................................................................................................................... 40
 Section 5.9: Background Attachment ......................................................................................................................................... 41
Section 5.10: Background Clip ................................................................................................................................................... 42
Section 5.11: Background Repeat .............................................................................................................................................. 43
Section 5.12: background-blend-mode Property....................................................................................................................... 44
Section 5.13: Background Color with Opacity............................................................................................................................ 44
Chapter 6: Centering ......................................................................................................................................................................... 46
Section 6.1: Using Flexbox ......................................................................................................................................................... 46
Section 6.2: Using CSS transform ............................................................................................................................................... 47
Section 6.3: Using margin: 0 auto; ............................................................................................................................................. 48
Section 6.4: Using text-align....................................................................................................................................................... 49
Section 6.5: Using position: absolute ......................................................................................................................................... 50
Section 6.6: Using calc() ............................................................................................................................................................. 51
Section 6.7: Using line-height .................................................................................................................................................... 51
Section 6.8: Vertical align anything with 3 lines of code ............................................................................................................ 51
Section 6.9: Centering in relation to another item .................................................................................................................... 52
Section 6.10: Ghost element technique (Michał Czernow's hack) ............................................................................................. 53
Section 6.11: Centering vertically and horizontally without worrying about height or width ................................................... 54
Section 6.12: Vertically align an image inside div ...................................................................................................................... 55
Section 6.13: Centering with fixed size ...................................................................................................................................... 55
Section 6.14: Vertically align dynamic height elements ............................................................................................................. 57
Section 6.15: Horizontal and Vertical centering using table layout ........................................................................................... 58
Chapter 7: The Box Model ................................................................................................................................................................. 59
Section 7.1: What is the Box Model? ......................................................................................................................................... 59
Section 7.2: box-sizing................................................................................................................................................................ 61
Chapter 8: Margins ............................................................................................................................................................................ 63
Section 8.1: Margin Collapsing ................................................................................................................................................... 63
Section 8.2: Apply Margin on a Given Side ................................................................................................................................ 65
Section 8.3: Margin property simplification .............................................................................................................................. 66
Section 8.4: Horizontally center elements on a page using margin ........................................................................................... 67
Section 8.5: Example 1: .............................................................................................................................................................. 67
Section 8.6: Negative margins.................................................................................................................................................... 68
Chapter 9: Padding ............................................................................................................................................................................ 69
Section 9.1: Padding Shorthand ................................................................................................................................................. 69
Section 9.2: Padding on a given side .......................................................................................................................................... 70
Chapter 10: Border ............................................................................................................................................................................ 70
Section 10.1: border-radius........................................................................................................................................................ 70
Section 10.2: border-style .......................................................................................................................................................... 72
Section 10.3: Multiple Borders .................................................................................................................................................. 72
Section 10.4: border (shorthands) ............................................................................................................................................. 74
Section 10.5: border-collapse .................................................................................................................................................... 74
Section 10.6: border-image........................................................................................................................................................ 75
Section 10.7: Creating a multi-colored border using borderimage ............................................................................................ 75
Section 10.8: border-[left|right|top|bottom] ........................................................................................................................... 76
Chapter 11: Outlines ......................................................................................................................................................................... 76
Section 11.1: Overview .............................................................................................................................................................. 77
Section 11.2: outline-style ......................................................................................................................................................... 77
Chapter 12: Overflow ........................................................................................................................................................................ 78
Section 12.1: overflow-wrap ...................................................................................................................................................... 79
Section 12.2: overflow-x and overflow-y ................................................................................................................................... 80
Section 12.3: overflow: scroll ..................................................................................................................................................... 81
Section 12.4: overflow: visible ................................................................................................................................................... 81
Section 12.5: Block Formatting Context Created with Overflow ................................................................................................ 82
Chapter 13: Media Queries ............................................................................................................................................................... 84
Section 13.1: Terminology and Structure ................................................................................................................................... 85
Section 13.2: Basic Example ....................................................................................................................................................... 85
Section 13.3: mediatype ............................................................................................................................................................ 86
Section 13.4: Media Queries for Retina and Non Retina Screens .............................................................................................. 86
Section 13.5: Width vs Viewport ............................................................................................................................................... 87
Section 13.6: Using Media Queries to Target Di erent Screen Sizes ..................................................................................... 88
Section 13.7: Use on link tag ...................................................................................................................................................... 88
Section 13.8: Media queries and IE8 ......................................................................................................................................... 88
Chapter 14: Floats ............................................................................................................................................................................. 89
Section 14.1: Float an Image Within Text................................................................................................................................... 89
Section 14.2: clear property ....................................................................................................................................................... 90
Section 14.3: Clearfix ................................................................................................................................................................. 91
Section 14.4: In-line DIV using float ........................................................................................................................................... 92
Section 14.5: Use of overflow property to clear floats .............................................................................................................. 94
Section 14.6: Simple Two Fixed-Width Column Layout ............................................................................................................. 94
Section 14.7: Simple Three Fixed-Width Column Layout ........................................................................................................... 95
Section 14.8: Two-Column Lazy/Greedy Layout ........................................................................................................................ 96
Chapter 15: Typography .................................................................................................................................................................... 97
Section 15.1: The Font Shorthand.............................................................................................................................................. 97
Section 15.2: Quotes .................................................................................................................................................................. 98
Section 15.3: Font Size ............................................................................................................................................................... 98
Section 15.4: Text Direction ....................................................................................................................................................... 99
Section 15.5: Font Stacks ........................................................................................................................................................... 99
Section 15.6: Text Overflow ....................................................................................................................................................... 99
Section 15.7: Text Shadow ....................................................................................................................................................... 100
Section 15.8: Text Transform .................................................................................................................................................... 100
Section 15.9: Letter Spacing ..................................................................................................................................................... 101
Section 15.10: Text Indent ....................................................................................................................................................... 101
Section 15.11: Text Decoration ................................................................................................................................................ 102
Section 15.12: Word Spacing ................................................................................................................................................... 102
Section 15.13: Font Variant ...................................................................................................................................................... 103
Chapter 16: Flexible Box Layout (Flexbox) ....................................................................................................................................... 104
Section 16.1: Dynamic Vertical and Horizontal Centering (alignitems, justify-content) .......................................................... 104
 Section 16.2: Sticky Variable-Height Footer ............................................................................................................................. 110
Section 16.3: Optimally fit elements to their container ........................................................................................................... 111
Section 16.4: Holy Grail Layout using Flexbox .......................................................................................................................... 112
Section 16.5: Perfectly aligned buttons inside cards with flexbox ........................................................................................... 114
Section 16.6: Same height on nested containers ..................................................................................................................... 116
Chapter 17: Cascading and Specificity ............................................................................................................................................. 117
Section 17.1: Calculating Selector Specificity........................................................................................................................... 117
Section 17.2: The !important declaration ................................................................................................................................ 119
Section 17.3: Cascading ........................................................................................................................................................... 120
Section 17.4: More complex specificity example ..................................................................................................................... 122
Chapter 18: Colors ........................................................................................................................................................................... 123
Section 18.1: currentColor ....................................................................................................................................................... 123
Section 18.2: Color Keywords .................................................................................................................................................. 124
Chapter 1: Getting started with CSS
Version Release Date
1 1996-12-17
2 1998-05-12
3 2015-10-13

Section 1.1: External Stylesheet

An external CSS stylesheet can be applied to any number of HTML documents by placing a > element in <link
each HTML document.

The attribute rel of the > <link tag has to be set to "stylesheet", and the href attribute to the relative or
absolute path to the stylesheet. While using relative URL paths is generally considered good practice, absolute
paths can be used, too. In HTML5 the type attribute can be omitted.

It is recommended that the > <link > tag be placed in the HTML file's <head tag so that the styles are
loaded before the elements they style. Otherwise, users will see a flash of unstyled content.

Example

hello-

world.ht

ml

style.css

Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your
HTML file then no path is required (like the example above) but if it's saved in a folder, then specify it like this
href = "foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">

External stylesheets are considered the best way to handle your CSS. There's a very simple reason for this:
when you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change
your link colors from blue to green, it's a lot easier to make the change in your CSS file and let the changes
"cascade" throughout all 100 pages than it is to go into 100 separate pages and make the same change 100
times. Again, if you want to completely change the look of your website, you only need to update this one file.

You can load as many CSS files in your HTML page as needed.

<link rel="stylesheet" type="text/css" href="main.css">

<link rel="stylesheet" type="text/css" href="override.css">

CSS rules are applied with some basic rules, and order does matter. For example, if you have a main.css file
with some code in it:

All your paragraphs with the 'green' class will be written in light green, but you can override this with another
.css file just by including it after main.css. You can have override.css with the following code follow main.css,
for example:

Now all your paragraphs with the 'green' class will be written in darker green rather than light green.

Other principles apply, such as the '!important' rule, specificity, and inheritance.

When someone first visits your website, their browser downloads the HTML of the current page plus the linked
CSS file. Then when they navigate to another page, their browser only needs to download the HTML of that
page; the CSS file is cached, so it does not need to be downloaded again. Since browsers cache the external
stylesheet, your pages load faster.

Section 1.2: Internal Styles

CSS enclosed in > <style > </style tags within an HTML document functions like an external stylesheet,
except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be
applied to the document in which it lives. Note that this element must be <head inside the > element for
HTML validation (though it will work in all current browsers if placed in body).
Section 1.3: CSS @import rule (one of CSS at-rule)
The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all
other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside
conditional group at-rules. @import.

How to use @import

You can use @import rule in following ways:

A. With internal style tag

B. With external stylesheet

The following line imports a CSS file named additional-styles.css in the root directory into the CSS file in which it
appears:

Importing external CSS is also possible. A common use case are font files.

An optional second argument to @import rule is a list of media queries:

Section 1.4: Inline Styles

Use inline styles to apply styling to a specific element. Note that this is not optimal. Placing style rules in a > tag <style
or external CSS file is encouraged in order to maintain a distinction between content and presentation.

Inline styles override any CSS in a > tag <style or external style sheet. While this can be useful in some
circumstances, this fact more often than not reduces a project's maintainability.
The styles in the following example apply directly to the elements to which they are attached.

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>

<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

Inline styles are generally the safest way to ensure rendering compatibility across various email clients,
programs and devices, but can be time-consuming to write and a bit challenging to manage.

Section 1.5: Changing CSS with JavaScript

Pure JavaScript

It's possible to add, remove or change CSS property values with JavaScript through an element's style property.

Note that style properties are named in lower camel case style. In the example you see that the css property
fontfamily becomes fontFamily in javascript.

As an alternative to working directly on elements, you can create a > <style > or <link element in
JavaScript and <body > or <head append it to the > of the HTML document.

jQuery

Modifying CSS properties with jQuery is even simpler.

If you need to change more than one style rule:

jQuery includes two ways to change css rules that have hyphens in them (i.e. font-size). You can put them in
quotes or camel-case the style rule name.

See also

JavaScript documentation – Reading and

Changing CSS Style. jQuery documentation –
CSS Manipulation
 Section 1.6: Styling Lists with
CSS
There are three different properties for styling list-items: list-style-type, list-style-image, and list-styleposition,
which should be declared in that order. The default values are disc, outside, and none, respectively. Each
property can be declared separately, or using the list-style shorthand property. list-style-type defines the shape
or type of bullet point used for each list-item.

(For an exhaustive list, see the W3C specification wiki)

To use square bullet points for each list-item, for example, you would use the following property-value pair:

The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of
none or a URL that points to an image.

The list-style-position property defines where to position the list-item marker, and it accepts one of two values:
"inside" or "outside".
Chapter 2: Structure and Formatting of a
CSS Rule
Section 2.1: Property Lists
Some properties can take multiple values, collectively known as a property list.

Section 2.2: Multiple Selectors

When you group CSS selectors, you apply the same styles to several different elements without repeating the
styles in your style sheet. Use a comma to separate multiple grouped selectors.

So the blue color applies to all <div> elements and all <p> elements. Without the comma only <p>
elements <div> that are a child of a would be red.

This also applies to all types of selectors.

This rule applies to:

<p>

elements of the blue class element with the ID first every

Section
<span> inside of a 2.3:<div> Rules,
Selectors, and Declaration Blocks
A CSS rule consists of a selector (e.g. h1) and declaration block ({}).

Chapter 3: Comments
Section 3.1: Single Line
Section 3.2: Multiple Line
Chapter 4: Selectors
CSS selectors identify specific HTML elements as targets for CSS styles. This topic covers how CSS selectors
target HTML elements. Selectors use a wide range of over 50 selection methods offered by the CSS language,
including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.

Section 4.1: Basic selectors

<div
Selector Description
* Universal selector (all elements)
div Tag selector (all > elements)
.blue Class selector (all elements with class blue)
.blue.red All elements with class blue and red (a type of Compound selector)
#headline ID selector (the element with "id" attribute set to headline)
:pseudo-class All elements with pseudo-class
::pseudo-element Element that matches pseudo-element
lang ( en ) Element that matches :lang declaration, for example<span lang = "en" :>

div > p child selector

Note: The value of an ID must be unique in a web page. It is a violation of the HTML standard to use
the value of an ID more than once in the same document tree.

A complete list of selectors can be found in the CSS Selectors Level 3 specification.

Section 4.2: Attribute Selectors

Overview

Attribute selectors can be used with various types of operators that change the selection criteria accordingly.
They select an element using the presence of a given attribute or attribute value.

Selector(1) Matched element Selects elements...

CSS attr Version
 <div attr []> With attribute attr
attr = 'val' "val" 2
[]=> Where attribute attr has value val 2
attr ~= 'val' <div attr "val val2 val3"
Where val appears in the
attr^='val' "val1 val2" []=> 2 whitespace-separated list of attr
<div attr
attr $= 'val' "sth aval" []=> Where attr's value begins with val 3
attr*='val' "somevalhere" []=> Where the attr's value
<div attr
ends with val 3 []=> Where
attr |= 'val' "val-sth etc"
attr contains val anywhere 3
<div attr
Where attr's value is exactly val,
[]=> or starts with val and immediately 2
<div attr followed by - (U+002D)
Where attr has value val,
attr = 'val' i ] <div attr = "val"
[> 4(2) ignoring val's letter
<div attr casing.

Notes:

1. The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may
also work, but it's not valid according to the CSS standard, and is discouraged.
2. There is no single, integrated CSS4 specification, because it is split into separate modules. However,
there are "level 4" modules. See browser support.

Details
attribute []

Selects elements with the given attribute.

Live Demo on JSBin

attribute = "value" []

Selects elements with the given attribute and value.

Live Demo on JSBin

attribute*="value" []
Selects elements with the given attribute and value where the given attribute contains the given value
anywhere (as a substring).

Live Demo on JSBin

attribute~ = "value" []

Selects elements with the given attribute and value where the given value appears in a whitespace-separated
list.

Live Demo on JSBin

attribute^="value" []

Selects elements with the given attribute and value where the given attribute begins with the value.

Live Demo on JSBin

attribute$ = "value" []

Selects elements with the given attribute and value where the given attribute ends with the given value.

Live Demo on JSBin

attribute| = "value" []
Selects elements with a given attribute and value where the attribute's value is exactly the given value or is
exactly the given value followed by - (U+002D)

Live Demo on JSBin

attribute = "value" i []

Selects elements with a given attribute and value where the attribute's value can be represented as Value,
VALUE, vAlUe or any other case-insensitive possibility.

Live Demo on JSBin

Specificity of attribute
selectors 0-1-0

Same as class selector and pseudoclass.

Note that this means an attribute selector can be used to select an element by its ID at a lower level of
specificity than if it was selected with an ID id = "my-ID" selector: [] targets the same element as #my-ID
but with lower specificity.

See the Syntax Section for more

details.

Section 4.3:
Combinators
Overview
Selector Description
div span Descendant selector (all >) <span >s that are descendants of a <div
div > span Child selector (all <span >s that are a direct child of a <div >)
a ~ span General Sibling selector (all >) <span >s that are siblings after an <a
a + span Adjacent Sibling selector (all <span >s that are immediately after an <a >)
 Note: Sibling selectors target elements that come after them in the source document. CSS, by its
nature (it cascades), cannot target previous or parent elements. However, using the flex order
property, a previous sibling selector can be simulated on visual media.

Descendant Combinator: selector selector

A descendant combinator, represented by at least one space character (), selects elements that are a
descendant of the defined element. This combinator selects all descendants of the element (from child
elements on down).

Live Demo on JSBin

In the above example, the first two >. <p > elements are selected since they are both descendants of the <div

Child Combinator: selector > selector

The child (>) combinator is used to select elements that are children, or direct descendants, of the specified
element.

Live Demo on JSBin

The above CSS selects only the first >. <p > element, as it is the only paragraph directly descended from a <div

The second <p > element is not selected because it is not a direct child of the <div >.

Adjacent Sibling Combinator: selector + selector

The adjacent sibling (+) combinator selects a sibling element that immediate follows a specified element.
Live Demo on JSBin

The above example selects only those > <p > elements which are directly preceded by another <p
element.

General Sibling Combinator: selector ~ selector

The general sibling (~) combinator selects all siblings that follow the specified element.

Live Demo on JSBin

The above example selects all > <p > elements that are preceded by another <p element, whether
or not they are immediately adjacent.

Section 4.4: Pseudo-classes

Pseudo-classes are keywords which allow selection based on information that lies outside of the document
tree or that cannot be expressed by other selectors or combinators. This information can be associated to a
certain state
(state and dynamic pseudo-classes), to locations (structural and target pseudo-classes), to negations of the
former
(negation pseudo-class) or to languages (lang pseudo-class). Examples include whether or not a link has been
followed (:), visited ), the mouse is over an element (: hover ), a checkbox is checked (: checked
etc.

Syntax

List of pseudo-classes:
Name Description
:active Applies to any element being activated (i.e. clicked) by the user.
 Allows you to build sets of related selectors by creating groups that the
:any included items will match. This is an alternative to repeating an entire selector.
Selects the current active #news element (clicked on a URL
:target containing that anchor name)
Applies to radio, checkbox, or option elements that are checked
:checked or toggled into an "on"
state.
Represents any user interface element that is the default among a group of
:default
similar elements.
:disabled Applies to any UI element which is in a disabled state.
:empty Applies to any element which has no children.
:enabled Applies to any UI element which is in an enabled state.
Used in conjunction with the @page rule, this selects the first page in a
:first printed document.
:first-child Represents any element that is the first child element of its parent.
Applies when an element is the first of the selected element type
:first-of-type inside its parent. This may or may not be the first-
child.
Applies to any element which has the user's focus. This can be given by the
:focus user's keyboard, mouse events, or other forms of input.
Can be used to highlight a whole section when one element inside it is focused. It
matches
:focus-within any element that the :focus pseudo-class matches or that has a descendant focused.
Applies to any element displayed in full-screen mode. It selects the whole stack
:full-screen of elements and not just the top level
element.
Applies to any element being hovered by the user's pointing device, but
:hover not
a
c
t
i
v
a
t
e
d
.
Applies radio or checkbox UI elements which are neither checked nor
:indeterminate unchecked, but are in an indeterminate state. This can be due to
an element's attribute or DOM manipulation.
The : in-range CSS pseudo-class matches when an element has
its value attribute inside the specified range limitations for this element.
:in-range
It allows the page to give a feedback that the value currently
defined using the element is inside the range limits.
Applies to > <input elements whose values are invalid according to
:invalid the type specified in the = attribute.
type
 Applies to any element who's wrapping > <body element has a properly
:lang designated = lang attribute. For the pseudo-class to be valid, it
must contain a valid two or three letter language code.
:last-child Represents any element that is the last child element of its parent.
Applies when an element is the last of the selected element type inside
:last-of-type its parent. This may or may not be the last-
child.
Used in conjunction with the @page rule, this selects all the left
:left
pages in a printed document.
:link Applies to any links which haven't been visited by the user.
Applies to all elements which do not match the value passed to
(:) for example. It not (p) or : not ( .class-name must have a value to be
not
:() not
valid and it can only contain one selector. However, you can chain multiple : selectors together.
Applies when an element is the n-th element of its parent, where n
:nth-child can be an integer, a mathematical expression (e.g n+3) or the
keywords odd or even.
Applies when an element is the n-th element of its parent of the
:nth-of-type same element type, where n can be an integer, a mathematical
expression (e.g n+3) or the keywords odd or even.
The : only-child CSS pseudo-class represents any
element which is the only child of its parent. This is
the same as
:only-child
first-child : last-child or : nth-child (1): nth-last-child
:(1), but with a lower specificity.
The : optional CSS pseudo-class represents any element
:optional that does not have the required attribute set on it. This allows
forms to easily indicate optional fields and to style them accordingly.
The : out-of-range CSS pseudo-class matches when an
element has its value attribute outside the specified range
limitations for this element.
:out-of-range It allows the page to give a feedback that the value currently defined
using the element is outside the range limits. A value can be outside of
a range if it is either smaller or larger than maximum and minimum set
values.
placeholder-shown :Experimental. Applies to any form element currently displaying placeholder text.
:read-only Applies to any element which is not editable by the user.
:read-write Applies to any element that is editable by a user, such as > elements. <input
Used in conjunction with the @page rule, this selects all the right pages in a
:right printed document.
:root matches the root element of a tree representing the document.
CSS pseudo-class matches the elements that are a reference
:scope point for selectors to match against.
Selects the current active #news element (clicked on a URL
:target containing that anchor name)
:visited Applies to any links which have has been visited by the user.
 The : visited pseudoclass can't be used for most styling in a lot of modern browsers anymore
because it's a security hole. See this link for reference.

Section 4.5: Child Pseudo Class

"The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the
document tree, for a given positive or zero value for n" - MDN :nth-child

pseudo-selector 1 2 3 4 5 6 7 8 9 10
:first-child ✔
nth-child :(3) ✔
nth-child :(n+3) ✔✔✔✔✔✔✔✔
nth-child ( 3n :) ✔ ✔ ✔
nth-child ( 3n :+1) ✔ ✔ ✔ ✔
nth-child ( -n :+3) ✔ ✔ ✔

nth-child ( odd :) ✔ ✔ ✔ ✔ ✔
nth-child ( even :) ✔ ✔ ✔ ✔ ✔

:last-child ✔
nth-last-child :(3) ✔

Section 4.6: Class Name Selectors

The class name selector select all elements with the targeted class name. For example, the class name .warning
would select the following > <div element:

You can also combine class names to target elements more specifically. Let's build on the example above to
showcase a more complicated class selection.

CSS

HTML
In this example, all elements with the .warning class will have a blue text color, elements with the .important
class with have an orange text color, and all elements that have both the .important and .warning class name will
have a red text color.

Notice that within the CSS, the .warning.important declaration did not have any spaces between the
two class names. This means it will only find elements which contain both class names warning and important in
their class attribute. Those class names could be in any order on the element.

If a space was included between the two classes in the CSS declaration, it would only select elements that have
parent elements with a .warning class names and child elements with .important class names.

Section 4.7: Select element using its ID without the high

specificity of the ID selector
This trick helps you select an element using the ID as a value for an attribute selector to avoid the high
specificity of the ID selector.

HTML:

CSS

Section 4.8: The :last-of-type selector

The :last-of-type selects the element that is the last child, of a particular type, of its parent. In the
example below, the css selects the last paragraph and the last heading h1.
jsFiddle

Section 4.9: CSS3 :in-range selector example

The : in-range CSS pseudo-class matches when an element has its value attribute inside the specified range
limitations for this element. It allows the page to give a feedback that the value currently defined using the
element is inside the range limits.[1]

Section 4.10: A. The :not pseudo-class example & B.

:focuswithin CSS pseudo-class
A. The syntax is presented above.

The following selector matches all > <input elements in an HTML document that are not disabled and
don't have the class .example:

HTML:
CSS:

The not :() pseudo-class will also support comma-separated selectors in Selectors Level 4:

CSS:

Live Demo on JSBin

See background syntax here.

B. The :focus-within CSS pseudo-classHTML:

CSS:
Section 4.11: Global boolean with checkbox:checked and ~
(general sibling combinator)
With the ~ selector, you can easily implement a global accessible boolean without using JavaScript.

Add boolean as a checkbox

To the very beginning of your document, add as much booleans as you want with a unique id and the hidden
attribute set:

Change the boolean's value

You can toggle the boolean by adding a label with the for attribute set:

Accessing boolean value with CSS

The normal selector (like .color-red) specifies the default properties. They can be overridden by following true /
false selectors:

Note that ] <checkbox >, [ sibling ... ] and <target > should be replaced by the proper selectors. [ sibling ...
can be a specific selector, (often if you're lazy) simply * or nothing if the target is already a sibling of the
checkbox.

Examples for the above HTML structure would be:

In action

See this fiddle for a implementation of these global booleans.

Section 4.12: ID selectors

ID selectors select DOM elements with the targeted ID. To select an element by a specific ID in CSS, the # prefix
is used.

For example, the following HTML div element…

Section 4.13: How to style a Range input

HTML
CSS

Effect
Pseudo Selector input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb,
input[type=range]::-ms-thumb
Thumb

input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track,
Track
input[type=range]::-ms-track
OnFocus
input[type=range]:focus
Lower part
input[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower
of (not
possible
the track in WebKit browsers currently - JS needed)

Section 4.14: The :only-child pseudo-class selector example

The :only-child CSS pseudo-class represents any element which is the only child of its parent.

HTML:

CSS:

The above example selects the . <p> element that is the unique child from its parent, in this case a <div>

Live Demo on JSBin

Chapter 5: Backgrounds
With CSS you can set colors, gradients, and images as the background of an element.

It is possible to specify various combinations of images, colors, and gradients, and adjust the size, positioning,
and repetition (among others) of these.

Section 5.1: Background Color

The background-color property sets the background color of an element using a color value or through
keywords, such as transparent, inherit or initial.
 transparent, specifies that the background color should be transparent. This

is default. inherit, inherits this property from its parent element. initial, sets

this property to its default value.

This can be applied to all elements, and ::first-letter /::first-line pseudo-elements.

Colors in CSS can be specified by different methods.

Color names

CSS

HTML

Hex color codes

Hex code is used to denote RGB components of a color in base-16 hexadecimal notation. #ff0000, for example,
is bright red, where the red component of the color is 256 bits (ff) and the corresponding green and blue
portions of the color is 0 (00).

If both values in each of the three RGB pairings (R, G, and B) are the same, then the color code can be
shortened into three characters (the first digit of each pairing). #ff0000 can be shortened to #f00, and #ffffff can
be shortened to #fff.

Hex notation is case-insensitive.

RGB / RGBa

Another way to declare a color is to use RGB or RGBa.

RGB stands for Red, Green and Blue, and requires of three separate values between 0 and 255, put between
brackets, that correspond with the decimal color values for respectively red, green and blue.

RGBa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.
HSL / HSLa

Another way to declare a color is to use HSL or HSLa and is similar to RGB and RGBa.

HSL stands for hue, saturation, and lightness, and is also often called HLS:

Hue is a degree on the color wheel (from 0 to 360).

Saturation is a percentage between 0% and 100%.
Lightness is also a percentage between 0% and 100%.

HSLa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.

Interaction with background-image

The following statements are all equivalent:

They will all lead to the red color being shown underneath the image, where the parts of the image are
transparent, or the image is not showing (perhaps as a result of background-repeat).
Note that the following is not equivalent:

Here, the value of background overrides your background-image.

For more info on the background property, see Background Shorthand

Section 5.2: Background Gradients

Gradients are new image types, added in CSS3. As an image, gradients are set with the background-image
property, or the background shorthand.

There are two types of gradient functions, linear and radial. Each type has a non-repeating variant and a
repeating variant:

linear-gradient ()
repeating-linear-gradient ()
radial-gradient ()
repeating-radial-gradient ()

linear-gradient()

A linear-gradient has the following syntax background: linear-gradient( <direction>?, <color-

stop-1>, <color-stop-2>, ...);

Value Meaning
Could be an argument like ; or an angle to top , to bottom , to right or to left as 0deg,
<direction > 90deg... . The angle starts from to top and rotates clockwise. Can be specified in deg,
grad, rad, or turn. If omitted, the gradient flows from top to bottom
List of colors, optionally
<color-stop-list
followed yellow 10% , rgba (0,0,0, .5 ) 40px , #fff 100% each one by a
percentage or length to display it at. For
> example, ...

For example, this creates a linear gradient that starts from the right and transitions from red to blue

You can create a diagonal gradient by declaring both a horizontal and vertical starting position.

It is possible to specify any number of color stops in a gradient by separating them with commas. The following
examples will create a gradient with 8 color stops
 Value Meaning
circle Shape of gradient. Values are circle or ellipse, default is ellipse.
Keywords describing how big the ending shape must be. Values are closest-side, farthest-
farthest-corner side, closest-corner, farthest-
corner
top left Sets the position of the gradient center, in the same way as background-position.

Repeating gradients

Repeating gradient functions take the same arguments as the above examples, but tile the gradient across the
background of the element.

Value Meaning
Angle unit. The angle starts from to top and rotates clockwise. Can be specified in deg, grad,
rad, or -45deg turn.
to bottom . Syntax: to [ y-axis ( top OR bottom x-axis ( left OR
to left
right )] ie to top right Direction of gradient, default is )] [
yellow 10%
Color, optionally followed by a percentage or length to display it at. Repeated two or more times.

Note that HEX, RGB, RGBa, HSL, and HSLa color codes may be used instead of color names. Color names were
used for the sake of illustration. Also note that the radial-gradient syntax is much more complex than linear-
gradient, and a simplified version is shown here. For a full explanation and specs, see the MDN Docs

Section 5.3: Background Image

The background-image property is used to specify a background image to be applied to all matched elements. By
default, this image is tiled to cover the entire element, excluding margin.
To use multiple images as background-image, define comma separated () url

The images will stack according to their order with the first declared image on top of the others and so on.

Value Result
Specify background image's path(s) or an image resource specified with
url ( '/path/to/image.jpg'
data URI
)
schema (apostrophes can be omitted), separate multiples by comma
none No background image
initial Default value
inherit Inherit parent's value
More CSS for Background Image

This following attributes are very useful and almost essential too.

background-size: xpx ypx | x% y%; background-repeat: no-repeat | repeat | repeat-x | repeat-y; background-
position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Section 5.4: Background Shorthand

The background property can be used to set one or more background related properties:
Value Description CSS Ve
background-image Background image to use 1+
background-color Background color to apply 1+
background-position Background image's position 1+
background-size Background image's size 3+
background-repeat How to repeat background image 1+
How the background is positioned (ignored when background-attachment is fixed)
background-origin 3+

How the background is painted relative to the content-box, border-box, or the padding-box
background-clip 3+

How the background image behaves, whether it scrolls along with its containing
1+
background-attachment block or has a fixed position within the viewport
initial Sets the property to value to default 3+
inherit Inherits property value from parent 2+
The order of the values does not matter and every value is

optional Syntax

The syntax of the background shorthand declaration is:

background: [<background-image>] [<background-color>] [<background-position>]/[<background-size>]

[<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];
Examples
Simply setting a background-color with the redvalue.

Setting a background-clip to border-box and a background-color to red.

Sets a background-repeat to no-repeat, background-origin to center and a background-image to an image.

In this example, the background-color of the element would be set to green with pattern.png, if it is available,

overlayed on the colour, repeating as often as necessary to fill the element. If pattern.png includes any

transparency then the green colour will be visible behind it. background: #000000 url("picture.png") top left /
600px auto no-repeat;

In this example we have a black background with an image 'picture.png' on top, the image does not repeat in
either axis and is positioned in the top left corner. The / after the position is to be able to include the size of the
background image which in this case is set as 600px width and auto for the height. This example could work
well with a feature image that can fade into a solid colour.

NOTE: Use of the shorthand background property resets all previously set background property
values, even if a value is not given. If you wish only to modify a background property value previously
set, use a longhand property instead.

Section 5.5: Background Size

General overview

The background-size property enables one to control the scaling of the background-image. It takes up to two
values, which determine the scale/size of the resulting image in vertical and and horizontal direction. If the
property is missing, its deemed auto in both width and height.

auto will keep the image's aspect ratio, if it can be determined. The height is optional and can be considered
auto. Therefore, on a 256 px × 256 px image, all the following background-size settings would yield an image
with height and width of 50 px:

So if we started with the following picture (which has the mentioned size of 256 px × 256 px),
we'll end up with a 50 px × 50 px on the user's screen, contained in the background of our element:

One can also use percentage values to scale the image with respect of the element. The following example
would yield a 200 px × 133 px drawn image:

Keeping the aspect ratio

The last example in the previos section lost its original aspect ratio. The circle got into an ellipse, the square
into a rectangle, the triangle into another triangle.
The length or percentage approach isn't flexible enough to keep the aspect ratio at all times. auto doesn't help,
since you might not know which dimension of your element will be larger. However, to cover certain areas with
an image (and correct aspect ratio) completely or to contain an image with correct aspect ratio completely in a
background area, the values, contain and cover provide the additional functionality.

Eggsplanation for contain and cover

Sorry for the bad pun, but we're going to use a picture of the day by Biswarup Ganguly for demonstration. Lets
say that this is your screen, and the gray area is outside of your visible screen. For demonstration, We're going
to assume a 16 × 9 ratio.

We want to use the aforementioned picture of the day as a background. However, we cropped the image to
4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on
contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.

This makes sure that the background image is always completely contained in the background positioning area,
however, there could be some empty space filled with your background-color in this case:
This makes sure that the background image is covering everything. There will be no visible background-color,
however depending on the screen's ratio a great part of your image could be cut off:

Demonstration with actual code

Section 5.6: Background Position
The background-position property is used to specify the starting position for a background image or gradient

The position is set using an X and Y co-ordinate and be set using any of the units used within CSS.

Unit Description
A percentage for the horizontal offset is relative to (width of background positioning area -
width of background image).
value% value% A percentage for the vertical offset is relative to (height of background positioning area -
height of background image)
The size of the image is the size given by background-size.
Offsets background image by a length given in pixels relative to the top left of the
background valuepx valuepx positioning area

Units in CSS can be specified by different methods (see here).

Longhand Background Position Properties

In addition to the shorthand property above, one can also use the longhand background properties
backgroundposition-x and background-position-y. These allow you to control the x or y positions separately.

NOTE: This is supported in all browsers except Firefox (versions 31-48) 2. Firefox 49, to be released
September 2016, will support these properties. Until then, there is a Firefox hack within this Stack
Overflow answer.

Section 5.7: The background-origin property

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to fixed, this property has no effect.

Default value: padding-box

Possible values:

padding-box - The position is relative to the

padding box border-box - The position is
relative to the border box content-box -
The position is relative to the content box
initial inherit

CSS

HTML
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> Result:
More:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-

origin

Section 5.8: Multiple Background

Image
In CSS3, we can stack multiple background in the same element.
Images will be stacked atop one another with the first background on top and the last background in the back.
img_1 will be on top, the img_2 and img_3 is on bottom.
We can also use background shorthand property for this:

Section 5.9: Background Attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the
page.

Value Description
scroll The background scrolls along with the element.
This is default. fixed The background is fixed with
regard to the viewport. local The background scrolls
along with the element's contents. initial Sets this
property to its default value. inherit Inherits this property
from its parent element.
Examples
background-attachment: scroll

The default behaviour, when the body is scrolled the background scrolls with it:
background-attachment: fixed

The background image will be fixed and will not move when the body is scrolled:

background-attachment: local

The background image of the div will scroll when the contents of the div is scrolled.

Section 5.10: Background Clip

Definition and Usage: The background-clip property specifies the painting area of the background.

Default value: border-box

Values

border-box is the default value. This allows the background to extend all the way to the outside edge
of the element's border. padding-box clips the background at the outside edge of the element's
padding and does not let it extend into the border; content-box clips the background at the edge of
the content box.
inherit applies the setting of the parent to the selected element.

CSS

HTML
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

Section 5.11: Background Repeat

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Here's how a background-repeat: repeat-y looks like:

Section 5.12: background-blend-mode Property

See result here: https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS Syntax: background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-
dodge | saturation | color | luminosity;

Section 5.13: Background Color with Opacity

If you set opacity on an element it will affect all its child elements. To set an opacity just on the background of
an element you will have to use RGBA colors. Following example will have a black background with 0.6 opacity.
Chapter 6: Centering
Section 6.1: Using Flexbox
HTML:

CSS:

:
CSS:

View Result

See Dynamic Vertical and Horizontal Centering under the Flexbox documentation for more details on flexbox
and what the styles mean.

Browser Support

Flexbox is supported by all major browsers, except IE versions before 10.

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

For a quick way to generate prefixes there is Autoprefixer, a third-party tool.

For older browsers (like IE 8 & 9) a Polyfill is available.

For a more detailed look at flexbox browser support, see this answer.

Section 6.2: Using CSS transform

CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is,
you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and
upwards to center it vertically and horizontally.

Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary,
making it look blurry. See this answer in SO for a workaround.

HTML

CSS

View example in JSFiddle

CROSS BROWSER COMPATIBILITY

The transform property needs prefixes to be supported by older browsers. Prefixes are needed for
Chrome<=35, Safari<=8, Opera<=22, Android Browser<=4.4.4, and IE9. CSS transforms are not supported by
IE8 and older versions.

Here is a common transform declaration for the previous example:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */

-ms-transform: translate(-50%, -50%); /* IE 9 */ transform:
translate(-50%, -50%);

For more information see canIuse.

MORE INFORMATION

The element is being positioned according to the first non-static parent ( , absolute, position : relative
or fixed). Explore more in this fiddle and this documentation topic.

For horizontal-only centering, use ). left : 50% and transform : translateX ( -50% The same
goes for verticalonly centering: top : 50% and transform : translateY ( -50% center with ).

Using a non-static width/height elements with this method of centering can cause the centered
element to appear squished. This mostly happens with elements containing text, and can be fixed by
right : -50% ; and margin-bottom : -50% adding: margin;. View this fiddle for more information.

Section 6.3: Using margin: 0

auto;
Objects can be centered by using if margin: 0 auto; they are block elements and have a defined width.

HTML

CSS
Result:

JSFiddle example: Centering objects with margin: 0 auto;

Section 6.4: Using text-align

The most common and easiest type of centering is that of lines of text in an element. CSS has the rule : text-align
center for this purpose:
HTML

CSS

This does not work for centering entire block elements. text-align controls only alignment of inline content like
text in its parent block element.

See more about text-align in Typography section.

Section 6.5: Using position:

absolute
Working in old browsers (IE >= 8)

Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will center an
absolutely positioned elements within its parent.

View Result

HTML

CSS

Elements that don't have their own implicit width and height like images do, will need those values defined.

Other resources: Absolute Centering in CSS

Section 6.6: Using calc()
The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically) what
size/position your element occupies by using a variety of values like pixels, percentages,
calc ( 100% - 80px
etc. Note: Whenever you use this function, always take care of the space between two
values ). CSS

HTML

Section 6.7: Using line-height

You can also use line-height to center vertically a single line of text inside a container :

CSS

That's quite ugly, but can be useful inside an <input /> element. The line-height property works only
when the text to be centered spans a single line. If the text wraps into multiple lines, the resulting output
won't be centered.

Section 6.8: Vertical align anything with 3 lines of code

Supported by IE11+

View Result

Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply the code to
has a parent with a height.

CSS

HTML
Section 6.9: Centering in relation to another item
We will see how to center content based on the height of a near element.

Compatibility: IE8+, all other modern browsers.

HTML

CSS

Link to JSFiddle

The main points are the 3 .thumb, .details and .position-container containers:

The .position-container must have . display : table

The .details must have the real width set : middle. width : .... and display : table-cell , vertical-align

The .thumb must have width : 100% if you want that it will take all the remaining space and it
will be influenced by the .details width.

width : 100%
 The image (if you have an image) inside .thumb should have , but it is not necessary if you have
correct proportions.

Section 6.10: Ghost element technique (Michał Czernow's

hack)
This technique works even when the container's dimensions are unknown.

Set up a "ghost" element inside the container to be centered that is 100% height, then use : vertical-align
middle on both that and the element to be centered.

CSS

HTML
Section 6.11: Centering vertically and horizontally without
worrying about height or width
The following technique allows you to add your content to an HTML element and center it both horizontally
and vertically without worrying about its height or width.

The outer

display: table;
cont

ainer

shoul

have

The inner container

should have display: table-cell;

should have vertical-align: middle;
should have text-align: center;

The content box

should have display: inline-block;

should re-adjust the horizontal text-alignment to eg. , text-align: left; or text-align: right;
unless you want text to be centered

Demo

HTML

CSS
See also this Fiddle!

Section 6.12: Vertically align an image inside

div
HTML

CSS

Section 6.13: Centering with fixed size

If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of
your content's width and height:

HTML
CSS

Horizontal centering with only fixed width

You can center the element horizontally even if you don't know the height of the content:

HTML

CSS

Vertical centering with fixed height

You can center the element vertically if you know the element's height:

HTML

CSS
Section 6.14: Vertically align dynamic height elements
Applying css intuitively doesn't produce the desired results because

vertical-align:middle isn't applicable to block-level elements

margin-top:auto and margin-bottom:auto used values would
margin-top:-50% compute as zero
percentage-based margin values are calculated relative to the width of
containing block

For widest browser support, a workaround with helper elements:

HTML

CSS

jsfiddle from original question. This approach

works with
dynamic height
elements respects
content flow is
supported by legacy
browsers
Section 6.15: Horizontal and Vertical centering using table
layout
One could easily center a child element using table display property.

HTML

CSS
Chapter 7: The Box Model
Parameter Detail
content-box Width and height of the element only includes content area.
padding-box Width and height of the element includes content and padding.
border-box Width and height of the element includes content, padding and
border. initial Sets the box model to its default state. inherit
Inherits the box model of the parent element.

Section 7.1: What is the Box Model?

The Edges

The browser creates a rectangle for each element in the HTML document. The Box Model describes how the
padding, border, and margin are added to the content to create this rectangle.

Diagram from CSS2.2 Working Draft

The perimeter of each of the four areas is called an edge. Each edge defines a box.

The innermost rectangle is the content box. The width and height of this depends on the element's
rendered content (text, images and any child elements it may have).
Next is the padding box, as defined by the padding property. If there is no padding width defined, the
padding edge is equal to the content edge.
Then we have the border box, as defined by the border property. If there is no border width defined,
the border edge is equal to the padding edge.
The outermost rectangle is the margin box, as defined by the margin property. If there is no margin
width defined, the margin edge is equal to the border edge.
Example

div {

This CSS styles all div elements to have a top, right, bottom and left border of 5px in width; a top, right, bottom
and left margin of 50px; and a top, right, bottom, and left padding of 20px. Ignoring content, our generated box
will look like this:

Screenshot of Google Chrome's Element Styles panel

As there is no content, the content region (the blue box in the middle) has no height or width (0px by
0px). The padding box by default is the same size as the content box, plus the 20px width on all four
edges we're defining above with the padding property (40px by 40px).
The border box is the same size as the padding box, plus the 5px width we're defining above with the
border property (50px by 50px).
Finally the margin box is the same size as the border box, plus the 50px width we're defining above
with the margin property (giving our element a total size of 150px by 150px).

Now lets give our element a sibling with the same style. The browser looks at the Box Model of both elements
to work out where in relation to the previous element's content the new element should be positioned:

The content of each of element is separated by a 150px gap, but the two elements' boxes touch each other.

If we then modify our first element to have no right margin, the right margin edge would be in the same
position as the right border edge, and our two elements would now look like this:
Section 7.2: box-sizing
The default box model (content-box) can be counter-intuitive, since the width / height for an element will not
represent its actual width or height on screen as soon as you start adding padding and border styles to the
element.

The following example demonstrates this potential issue with content-box:

Since the padding will be added to the width of the textarea, the resulting element is a textarea that is wider
than 100%.

Fortunately, CSS allows us to change the box model with the box-sizing property for an element. There are three
different values for the property available:

content-box: The common box model - width and height only includes the content, not the padding or
border
To solve the textarea problem above, you could just change the box-sizing property to padding-box or borderbox.
border-box is most commonly used.

To apply a specific box model to every element on the page, use the following snippet:

In this coding ; box-sizing : border-box is not directly applied to *, so you can easily overwrite this
property on individual elements.
Chapter 8: Margins
Parameter Details
0 set margin to none
auto used for centering, by evenly setting values on
each side units (e.g. px) see parameter section in Units for
a list of valid units inherit inherit margin value from
parent element initial restore to initial value

Section 8.1: Margin Collapsing

When two margins are touching each other vertically, they are collapsed. When two margins touch
horizontally, they do not collapse.

Example of adjacent vertical margins:

Consider the following styles and markup:

They will be 10px apart since vertical margins collapse over one and other. (The spacing will not be the sum of
two margins.)

Example of adjacent horizontal margins:

Consider the following styles and markup:

They will be 20px apart since horizontal margins don't collapse over one and other. (The spacing will be the
sum of two margins.)

Overlapping with different sizes

These elements will be spaced 15px apart vertically. The margins overlap as much as they can, but the larger
margin will determine the spacing between the elements.

Overlapping margin gotcha

What will be the spacing between the two texts? (hover to see answer)

The spacing will be 25px. Since all four margins are touching each other, they will collapse, thus using
the largest margin of the four.

Now, what about if we add some borders to the markup above.

What will be the spacing between the two texts? (hover to see answer)
 The spacing will be 59px! Now only the margins of .outer-top and .outer-bottom touch each other,
and are the only collapsed margins. The remaining margins are separated by the borders. So we
have 1px +
10px + 1px + 15px + 20px + 1px + 25px + 1px. (The 1px's are the borders...)

Collapsing Margins Between Parent and Child Elements:

HTML:

CSS

In the example above, only the largest margin applies. You may have expected that the paragraph would be
located 60px from the h1 (since the div element has a margin-top of 40px and the p has a 20px margin-top). This
does not happen because the margins collapse together to form one margin.

Section 8.2: Apply Margin on a Given Side

Direction-Specific Properties

CSS allows you to specify a given side to apply margin to. The four properties provided for this purpose are:

margin-left
margin-
right
margin-
top
margin-
bottom

The following code would apply a margin of 30 pixels to the left side of the selected div. View Result

HTML
CSS

Parameter Details
margin-left The direction in which the margin should be applied.
30px The width of the margin.
Specifying Direction Using Shorthand Property

The standard margin property can be expanded to specify differing widths to each side of the selected
elements. The syntax for doing this is as follows:

The following example applies a zero-width margin to the top of the div, a 10px margin to the right side, a 50px
margin to the left side, and a 100px margin to the left side. View Result

HTML

CSS

Section 8.3: Margin property simplification

Another exapmle:
Section 8.4: Horizontally center elements on a page using
margin
As long as the element is a block, and it has an explicitly set width value, margins can be used to center block
elements on a page horizontally.
We add a width value that is lower than the width of the window and the auto property of margin then
distributes the remaining space to the left and the right:

In the example above we use the shorthand margin declaration to first set 0 to the top and bottom margin
values (although this could be any value) and then we use auto to let the browser allocate the space
automatically to the left and right margin values.

In the example above, the #myDiv element is set to 80% width which leaves use 20% leftover. The browser
distributes this value to the remaining sides so:

(100% - 80%) / 2 = 10%

Section 8.5:
Example 1:
It is obvious to assume that the percentage value of margin to margin-left and margin-right would be relative to
its parent element.

But that is not the case, when comes to margin-top and margin-bottom. Both these properties, in percentages,
aren't relative to the height of the parent container but to the width of the parent container.
So,

Section 8.6: Negative margins

Margin is one of a few CSS properties that can be set to negative values. This property can be used to overlap
elements without absolute positioning.
Chapter 9: Padding
Section 9.1: Padding Shorthand
The padding property sets the padding space on all sides of an element. The padding area is the space
between the content of the element and its border. Negative values are not allowed.

To save adding padding to each side individually (using padding-top, padding-left etc) can you write it as a
shorthand, as below:

Four values:

Three values:

Two values:

One value:
Section 9.2: Padding on a given side
The padding property sets the padding space on all sides of an element. The padding area is the space
between the content of the element and its border. Negative values are not allowed.

You can specify a side individually:

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

The following code would add a padding of 5px to the top of the div:

Chapter 10: Border

Section 10.1: border-radius
The border-radius property allows you to change the shape of the basic box model.

Every corner of an element can have up to two values, for the vertical and horizontal radius of that corner (for
a maximum of 8 values).
The first set of values defines the horizontal radius. The optional second set of values, preceded by a ‘/’ ,
defines the vertical radius. If only one set of values is supplied, it is used for both the vertical and horizontal
radius.

The 10px is the horizontal radius of the top-left-and-bottom-right. And the 5% is the horizontal radius of the
topright-and-bottom-left. The other four values after '/' are the vertical radii for top-left, top-right, bottom-
right and bottom-left.

As with many CSS properties, shorthands can be used for any or all possible values. You can therefore specify
anything from one to eight values. The following shorthand allows you to set the horizontal and vertical radius
of every corner to the same value:

HTML:

CSS:

Border-radius is most commonly used to convert box elements into circles. By setting the border-radius to half
of the length of a square element, a circular element is created:

Because border-radius accepts percentages, it is common to use 50% to avoid manually calculating the
borderradius value:

If the width and height properties are not equal, the resulting shape will be an oval rather than a circle.
Browser specific border-radius example:

Section 10.2: border-style

The border-style property sets the style of an element's border. This property can have from one to four

values (for every side of the element one value.) Examples:

border-style can also have the values none and hidden. They have the same effect, except hidden works for
border conflict resolution for > <table > elements. In a <table with multiple borders, none has the
lowest priority
(meaning in a conflict, the border would show), and hidden has the highest priority (meaning in a conflict, the
border would not show).

Section 10.3: Multiple Borders

Using outline:
Using box-shadow:

Using a pseudo element:

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Section 10.4: border

(shorthands)
In most cases you want to define several border properties ( border-width, border-style and border-color) for all
sides of an element.

Instead of writing:

You can simply write:

These shorthands are also available for every side of an element: border-top, border-left, border-right and border-
bottom. So you can do:

Section 10.5: border-collapse

The border-collapse property applies only to tables (and elements displayed as or inlinetable) display : table
and sets whether the table borders are collapsed into a single border or detached as in standard HTML.
Also see Tables - border-collapse documentation entry

Section 10.6: border-image

With the border-image property you have the possibility to set an image to be used instead of normal border
styles.

A border-image essentially consist of a

border-image-source: The path to the image to be used border-image-slice: Specifies the offset that is
used to divide the image into nine regions (four corners, four edges and a middle)
border-image-repeat: Specifies how the images for the sides and the middle of the border image are
scaled

Consider the following example wheras border.png is a image of 90x90 pixels:

border-image : url ( "border.png" ) 30 stretch ;

The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners of the border
while the side will be used in between. If the element is higher / wider than 30px this part of the image will be
stretched. The middle part of the image defaults to be transparent.

Section 10.7: Creating a multi-colored border using

borderimage
CSS

HTML

The above example would produce a border that comprises of 5 different colors. The colors are defined
through a linear-gradient (you can find more information about gradients in the docs). You can find more
information about border-image-slice property in the border-image example in same page.

(Note: Additional properties were added to the element for presentational purpose.)

You'd have noticed that the left border has only a single color (the start color of the gradient) while the right
border also has only a single color (the gradient's end color). This is because of the way that border image
property works. It is as though the gradient is applied to the entire box and then the colors are masked from
the padding and content areas, thus making it look as though only the border has the gradient.
Which border(s) have a single color is dependant on the gradient definition. If the gradient is a gradient, the to right
left border would be the start color of the gradient and right border would be the end color. If it was a to
bottom gradient the top border would be the gradient's start color and bottom border would be end color.
Below is the to bottom output of a 5 colored gradient.

If the border is required only on specific sides of the element then the border-width property can be used just
like with any other normal border. For example, adding the below code would produce a border only on the
top of the element.

Note that, any element that has border-image property won't respect the border-radius (that is the border won't
curve). This is based on the below statement in the spec:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by
‘background-clip’).

Section 10.8: border-[left|right|top|bottom]

The border- [ left | right | top | bottom ] property is used to add a border to a specific side of an element.

For example if you wanted to add a border to the left side of an element, you could do:

Chapter 11: Outlines

Parameter Details
dotted dotted outline
dashed dashed outline
solid solid outline
double double outline
groove 3D grooved outline, depends on the outline-color value
ridge 3D ridged outline, depends on the outline-color value
inset 3D inset outline, depends on the outline-color value
outset 3D outset outline, depends on the outline-color value
none no outline
hidden hidden outline

Section 11.1: Overview

Outline is a line that goes around the element, outside of the border. In contrast to border, outlines do not take
any space in the box model. So adding an outline to an element does not affect the position of the element or
other elements.

In addition, outlines can be non-rectangular in some browsers. This can happen if outline is applied on a span
element that has text with different font-size properties inside it. Unlike borders, outlines cannot have rounded
corners.

The essential parts of outline are outline-color, outline-style and outline-width.

The definition of an outline is equivalent to the definition of a border:

Section 11.2: outline-style

The outline-style property is used to set the style of the outline of an element.
HTML

Chapter 12: Overflow

Overflow Value Details
visible Shows all overflowing content outside the element
scroll Hides the overflowing content and adds a scroll bar
hidden Hides the overflowing content, both scroll bars disappear and the page becomes fixed
auto Same as scroll if content overflows, but doesn't add scroll bar if content fits
inherit Inherit's the parent element's value for this property

Section 12.1: overflow-wrap

overflow-wrap tells a browser that it can break a line of text inside a targeted element onto multiple lines in an
otherwise unbreakable place. Helpful in preventing an long string of text causing layout problems due to
overflowing it's container.

CSS

HTML
overflow-wrap – Value Details
normal Lets a word overflow if it is longer than the line break-word
Will split a word into multiple lines, if necessary inherit
Inherits the parent element's value for this property

Section 12.2: overflow-x and overflow-y

These two properties work in a similar fashion as the overflow property and accept the same values. The
overflow-x parameter works only on the x or left-to-right axis. The overflow-y works on the y or top-to-bottom
axis.

HTML

CSS
Section 12.3: overflow: scroll
HTML

CSS

Result

The content above is clipped in a 100px by 100px box, with scrolling available to view overflowing content.

Most desktop browsers will display both horizontal and vertical scrollbars, whether or not any content is
clipped. This can avoid problems with scrollbars appearing and disappearing in a dynamic environment.
Printers may print overflowing content.

Section 12.4: overflow: visible

HTML

CSS
Result

Content is not clipped and will be rendered outside the content box if it exceeds its container size.

Section 12.5: Block Formatting Context Created with

Overflow
Using the overflow property with a value different to visible will create a new block formatting context. This is
useful for aligning a block element next to a floated element.

CSS

HTML

Result
This example shows how paragraphs within a div with the overflow property set will interact with a floated
image.
Chapter 13: Media Queries
Parameter Details
mediatype (Optional) This is the type of media. Could be anything in the range of all to screen.
(Optional) Doesn't apply the CSS for this particular media type and applies for everything else.
not

media feature Logic to identify use case for CSS. Options outlined below.
Media Feature Details
aspect-ratio Describes the aspect ratio of the targeted display area of the output device.
Indicates the number of bits per color component of the output device. If the device is not a color
color
device, this value is zero.
color-index Indicates the number of entries in the color look-up table for the output device.
grid Determines whether the output device is a grid device or a bitmap device.
height The height media feature describes the height of the output device's rendering surface.
max-width CSS will not apply on a screen width wider than specified.
min-width CSS will not apply on a screen width narrower than specified.
max-height CSS will not apply on a screen height taller than specified.
min-height CSS will not apply on a screen height shorter than specified.
monochrome Indicates the number of bits per pixel on a monochrome (greyscale) device.
orientation CSS will only display if device is using specified orientation. See remarks for more details.
resolution Indicates the resolution (pixel density) of the output device.
scan Describes the scanning process of television output devices.
The width media feature describes the width of the rendering surface of the output device (such as the
width
width of the document window, or the width of the page box on a printer).
Deprecated Features Details
Deprecated CSS will only display on devices whose height/width ratio matches the
specified
device-aspect-ratio ratio. This is adeprecatedfeature and is not guaranteed to
work.
Deprecated Same as max-width but measures the physical screen width, rather than
the
max-device-width display width of the
browser.
Deprecated Same as min-width but measures the physical screen width, rather than
the
min-device-width display width of the
browser.
Deprecated Same as max-height but measures the physical screen width, rather than
the
max-device-height display width of the
browser.
Deprecated Same as min-height but measures the physical screen width, rather than
the
min-device-height
display width of the browser.
Section 13.1: Terminology and Structure
Media queries allow one to apply CSS rules based on the type of device / media (e.g. screen, print or
handheld) called media type, additional aspects of the device are described with media features such as the
availability of color or viewport dimensions.

General Structure of a Media Query

A Media Query containing a Media Type

Section 13.2: Basic Example

The above media query specifies two conditions:

1. The page must be viewed on a normal screen (not a printed page, projector, etc).
2. The width of the user's view port must be at least 720 pixels.

If these conditions are met, the styles inside the media query will be active, and the background color of the
page will be sky blue.

Media queries are applied dynamically. If on page load the conditions specified in the media query are met,
the CSS will be applied, but will be immediately disabled should the conditions cease to be met. Conversely, if
the conditions are initially not met, the CSS will not be applied until the specified conditions are met.

In our example, if the user's view port width is initially greater than 720 pixels, but the user shrinks the
browser's width, the background color will cease to be sky blue as soon as the user has resized the view port
to less than 720 pixels in width.
Section 13.3: mediatype
Media queries have an optional mediatype parameter. This parameter is placed directly after the @media
declaration (), @media mediatype for example:

The above CSS code will give the DOM HTML element a white background color when being printed.

The mediatype parameter has an optional not or only prefix that will apply the styles to everything except the
specified mediatype or only the specified media type, respectively. For example, the following code example
will apply the style to every media type except print.

And the same way, for just showing it only on the screen, this can be used:

The list of mediatype can be understood better with the following table:

Media Type Description

all Apply to all
devices screen
Default
computers
print Printers in general. Used to style print-versions of websites
handheld PDA's, cellphones and hand-held devices with a small screen
projection For projected presentation, for example projectors
aural Speech Systems
braille Braille tactile devices embossed Paged braille printers tv
Television-type devices tty Devices with a fixed-pitch
character grid. Terminals, portables.

Section 13.4: Media Queries for Retina and Non Retina

Screens
Although this works only for WebKit based browsers, this is helpful:
Background Information

There are two types of pixels in the display. One is the logical pixels and the other is the physical pixels. Mostly,
the physical pixels always stay the same, because it is the same for all the display devices. The logical pixels
change based on the resolution of the devices to display higher quality pixels. The device pixel ratio is the ratio
between physical pixels and logical pixels. For instance, the MacBook Pro Retina, iPhone 4 and above report a
device pixel ratio of 2, because the physical linear resolution is double the logical resolution.

The reason why this works only with WebKit based browsers is because of:
The vendor prefix -webkit- before the rule.
This hasn't been implemented in engines other than WebKit and Blink.

Section 13.5: Width vs Viewport

When we are using "width" with media queries it is important to set the meta tag correctly. Basic meta tag
looks like this and it needs to be put <head inside the > tag.

<meta name="viewport" content="width=device-width,initial-scale=1">

Why this is important?

Based on MDN's definition "width" is

The width media feature describes the width of the rendering surface of the output device (such as
the width of the document window, or the width of the page box on a printer).

What does that mean?

View-port is the width of the device itself. If your screen resolution says the resolution is 1280 x 720, your
view-port width is "1280px".

More often many devices allocate different pixel amount to display one pixel. For an example iPhone 6 Plus has
1242 x 2208 resolution. But the actual viewport-width and viewport-height is 414 x 736. That means 3 pixels
are used to create 1 pixel.

But if you did not set the meta tag correctly it will try to show your webpage with its native resolution which
results in a zoomed out view (smaller texts and images).
Section 13.6: Using Media Queries to Target Di erent Screen
Sizes
Often times, responsive web design involves media queries, which are CSS blocks that are only executed if a
condition is satisfied. This is useful for responsive web design because you can use media queries to specify
different CSS styles for the mobile version of your website versus the desktop version.

Section 13.7: Use on link tag

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

This stylesheet is still downloaded but is applied only on devices with screen width larger than 600px.

Section 13.8: Media queries and IE8

Media queries are not supported at all in IE8 and below.

A Javascript based workaround

To add support for IE8, you could use one of several JS solutions. For example, Respond can be added to add
media query support for IE8 only with the following code :
CSS Mediaqueries is another library that does the same thing. The code for adding that library to your HTML
would be identical :

The alternative

If you don't like a JS based solution, you should also consider adding an IE<9 only stylesheet where you adjust
your styling specific to IE<9. For that, you should add the following HTML to your code:

Note :

Technically it's one more alternative: using CSS hacks to target IE<9. It has the same impact as an IE<9 only
stylesheet, but you don't need a separate stylesheet for that. I do not recommend this option, though, as they
produce invalid CSS code (which is but one of several reasons why the use of CSS hacks is generally frowned
upon today).

Chapter 14: Floats

Section 14.1: Float an Image Within Text
The most basic use of a float is having text wrap around an image. The below code will produce two
paragraphs and an image, with the second paragraph flowing around the image. Notice that it is always
content after the floated element that flows around the floated element.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus
diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p> <img src="http://lorempixel.com/200/100/"
/>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in
libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> CSS:

This will be the output

Codepen Link

Section 14.2: clear

property
The clear property is directly related to floats. Property Values:
Section 14.3: Clearfix

The clearfix hack is a popular way to contain floats (N. Gallagher aka @necolas)

Not to be confused with the clear property, clearfix is a concept (that is also related to floats, thus the possible
confusion). To contain floats, you've to add .cf or .clearfix class on the container (the parent) and style this class
with a few rules described below.

3 versions with slightly different effects (sources :A new micro clearfix hack by N. Gallagher and clearfix
reloaded by T. J. Koblentz):

Clearfix (with top margin collapsing of contained floats still occurring)

Clearfix also preventing top margin collapsing of contained floats

Clearfix with support of outdated browsers IE6 and IE7

Codepen showing clearfix effect

Other resource: Everything you know about clearfix is wrong (clearfix and BFC - Block Formatting Context
while hasLayout relates to outdated browsers IE6 maybe 7)

Section 14.4: In-line DIV using float

The div is a block-level element, i.e it occupies the whole of the page width and the siblings are place one
below the other irrespective of their width.
The output of the following code will be

We can make them in-line by adding a float css property to the div.

HTML:

CSS
Codepen Link

Section 14.5: Use of overflow property to clear

floats
Setting overflow value to hidden,auto or scroll to an element, will clear all the floats within that element.

Note: using overflow:scroll will always show the scrollbox

Section 14.6: Simple Two Fixed-Width Column

Layout
A simple two-column layout consists of two fixed-width, floated elements. Note that the sidebar and content
area are not the same height in this example. This is one of the tricky parts with multi-column layouts using
floats, and requires workarounds to make multiple columns appear to be the same height.

HTML:

CSS:
Section 14.7: Simple Three Fixed-Width Column Layout
HTML:

CSS:
Section 14.8: Two-Column Lazy/Greedy Layout
This layout uses one floated column to create a two-column layout with no defined widths. In this example the
left sidebar is "lazy," in that it only takes up as much space as it needs. Another way to say this is that the left
sidebar is "shrink-wrapped." The right content column is "greedy," in that it takes up all the remaining space.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p> <p>Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce
ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div> CSS:
Fiddle

Chapter 15: Typography

Parameter Details

hsl ( 240 , 100% , 50%

font-style italics or oblique
font-variant normal or small-caps
font-weight normal, bold or numeric from 100 to 900.
font-size The font size given in %, px, em, or any other valid CSS measurement
line-height The line height given in %, px, em, or any other valid CSS measurement
font-family This is for defining the family's name.
color Any valid CSS color representation, like red, #00FF00, ) etc.
Whether or not to use a confenced or expanded face from font. Valid values are normal, ultracondensed, extra-
font-stretch condensed, condensed, semi-condensed, semi-expanded, expanded, extraexpanded or ultra-expanded

text-align start, end, left, right, center, justify, match-parent

text-decoration none, underline, overline, line-through, initial, inherit;

Section 15.1: The Font Shorthand

With the syntax:

You can have all your font-related styles in one declaration with the font shorthand. Simply use the font
property, and put your values in the correct order.

For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you
would code it as follows:
However with the font shorthand it can be condensed as follows:

Note: that since font-style, font-variant, font-weight and line-height are optional, the three of them are skipped in
this example. It is important to note that using the shortcut resets the other attributes not given. Another
important point is that the two necessary attributes for the font shortcut to work are font-size and fontfamily. If
they are not both included the shortcut is ignored.

Initial value for each of the properties:

font-style : normal ;
font-variant : normal ;
font-weight : normal ;
font-stretch : normal ;
font-size : medium ;
line-height : normal ;
font-family – depends on user agent

Section 15.2: Quotes

The quotes property is used to customize the opening and closing quotation marks of the > tag. <q

« »

Section 15.3: Font Size

HTML:

CSS:

The text inside #element-one will be 30px in size, while the text in #element-two will be 10px in size.
Section 15.4: Text Direction

The direction property is used to change the horizontal text direction of an element.

Syntax: ; direction : ltr | rtl | initial | inherit

The writing-mode property changes the alignment of text so it can be read from top-to-bottom or from left-to-
right, depending on the language.
Syntax: ; direction : horizontal-tb | vertical-rl | vertical-lr

Section 15.5: Font Stacks

The browser will attempt to apply the font face "Segoe UI" to the characters within the elements targeted by
the above property. If this font is not available, or the font does not contain a glyph for the required character,
the browser will fall back to Tahoma, and, if necessary, any sans-serif font on the user's computer. Note that
any font names with more than one word such as "Segoe UI" need to have single or double quotes around
them.

The browser will attempt to apply the font face "Consolas" to the characters within the elements targeted
by the above property. If this font is not available, or the font does not contain a glyph for the required
character, the browser will fall back to "Courier New," and, if necessary, any monospace font on the user's
computer.

Section 15.6: Text Overflow

The text-overflow property deals with how overflowed content should be signaled to users. In this example, the
ellipsis represents clipped text.
Unfortunately, text-overflow : ellipsis only works on a single line of text. There is no way to support
ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation
of flexboxes.

Example (open in Chrome or Safari):

http://jsfiddle.net/csYjC/1131/

Resources:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-
overflow0

Section 15.7: Text Shadow

To add shadows to text, use the text-shadow property. The syntax is as follows:

Shadow without blur radius

This creates a blue shadow effect around a heading

Shadow with blur radius

To add a blur effect, add an option blur radius argument

Multiple Shadows

To give an element multiple shadows, separate them with commas

Section 15.8: Text Transform

The text-transform property allows you to change the capitalization of text. Valid values are: uppercase, capitalize,
lowercase, initial, inherit, and none
CSS

HTML

Section 15.9: Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

! letter-spacing also supports negative values:

Resources: https://developer.mozilla.org/en-
US/docs/Web/CSS/letter-spacing

Section 15.10: Text Indent

The text-indent property specifies how much horizontal space text should be moved before the beginning of the
first line of the text content of an element.

Resources:
 Indenting only the first line of text in a paragraph?
https://www.w3.org/TR/CSS21/text.html#propdef-text-
indent https://developer.mozilla.org/en-
US/docs/Web/CSS/text-indent

Section 15.11: Text Decoration

The text-decoration property is used to set or remove decorations from text.

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a

shorthand property:

This is a shorthand version of

It should be noted that the following properties are only supported in Firefox

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-skip

Section 15.12: Word Spacing

The word-spacing property specifies the spacing behavior between tags and words.

Possible values

a positive or negative length (using em px vh cm etc.) or

percentage (using %) the keyword normal uses the font's default
word spacing the keyword inherit takes the value from the
parent element

CSS

HTML

<p>
<span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
<span class="narrow">This is an example, showing the effect of "word-spacing".</span><br> <span
class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
 </p>

Online-Demo

Try it yourself

Further reading:

word-spacing – MDN
word-spacing – w3.org

Section 15.13:
Font Variant
Attributes:

normal

Default attribute of

fonts. small-caps

Sets every letter to uppercase, but makes the lowercase letters(from original text) smaller in size than the
letters that originally uppercase.

CSS:

HTML:

Output:

Note: The font-variant property is a shorthand for the properties: font-variant-caps, font-variant-numeric,
fontvariant-alternates, font-variant-ligatures, and font-variant-east-asian.
Chapter 16: Flexible Box Layout (Flexbox)
The Flexible Box module, or just 'flexbox' for short, is a box model designed for user interfaces, and it allows
users to align and distribute space among items in a container such that elements behave predictably when
the page layout must accommodate different, unknown screen sizes. A flex container expands items to fill
available space and shrinks them to prevent overflow.

Section 16.1: Dynamic Vertical and Horizontal Centering

(alignitems, justify-content)
Simple Example (centering a single element)
HTML

CSS

Here is a demo.

Reasoning
Property Value Description
This centers the elements along the axis other than the one specified by flex-direction,
align-items center i.e., vertical centering for a horizontal flexbox and horizontal centering for a
vertical flexbox.
This centers the elements along the axis specified by flex-direction. I.e., for a
justify-contentcenter horizontal () flexbox, flex-direction : row this centers
horizontally, and for a vertical flexbox flex-direction : column () flexbox,
this centers vertically)

Individual Property Examples

All of the below styles are applied onto this simple layout:
Example: justify-content : center on a horizontal flexbox

CSS:

Outcome:

Here is a demo.
Example: justify-content : center on a vertical flexbox

CSS:

Outcome:

Here is a demo.

Example: align-content : center on a horizontal flexbox

CSS:
Outcome:

Here is a demo.

Example: align-content : center on a vertical flexbox

CSS:
Outcome:

Here is a demo.

Example: Combination for centering both on horizontal flexbox

Outcome:
Here is a demo.

Example: Combination for centering both on vertical flexbox

Outcome:
Here is a demo.

Section 16.2: Sticky Variable-Height

Footer
This code creates a sticky footer. When the content doesn't reach the end of the viewport, the footer sticks to
the bottom of the viewport. When the content extends past the bottom of the viewport, the footer is also
pushed out of the viewport. View Result

HTML:
CSS:

Section 16.3: Optimally fit elements to their container

One of the nicest features of flexbox is to allow optimally fitting containers to their parent element.

Live demo.

HTML:

CSS:
Outcome:

Columns adapt as screen is resized.

Section 16.4: Holy Grail Layout using Flexbox

Holy Grail layout is a layout with a fixed height header and footer, and a center with 3 columns. The 3 columns
include a fixed width sidenav, a fluid center, and a column for other content like ads (the fluid center appears
first in the markup). CSS Flexbox can be used to achieve this with a very simple markup:

HTML Markup:
CSS:

Demo
Section 16.5: Perfectly aligned buttons inside cards with
flexbox
It's a regular pattern in design these days to vertically align call to actions inside its containing cards like this:

This can be achieved using a special trick with flexbox

HTML
<div class="cards">
<div class="card"> <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse
enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p> <p><button>Action</button></p>
</div>
<div class="card"> <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse
enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p> <p>Lorem ipsum Magna proident ex anim
dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui
minim.</p> <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p> <p>Lorem ipsum Magna proident ex anim dolor
ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p><button>Action</button></p>
</div>
</div>

First of all, we use CSS to apply ; to display : flex the container. This will create 2 columns equal in height
with the content flowing naturally inside it

CSS
The layout will change and become like this:

In order to move the buttons to the bottom of the block, we need to apply ; to the display : flex card
itself with the direction set to column. After that, we should select the last element inside the card and set the
margin-top to auto. This will push the last paragraph to the bottom of the card and achieve the required result.

Final CSS:
Section 16.6: Same height on nested containers
This code makes sure that all nested containers are always the same height. This is done by assuring that all

nested elements are the same height as the containing parent div. See working example:

https://jsfiddle.net/3wwh7ewp/ This effect is achieved due to the property align-items being set to stretch by

default.

HTML

CSS

Note: Does not work on IE versions under 10

Chapter 17: Cascading and Specificity
Section 17.1: Calculating Selector Specificity
Each individual CSS Selector has its own specificity value. Every selector in a sequence increases the sequence's
overall specificity. Selectors fall into one of three different specificity groups: A, B and c. When multiple
selector sequences select a given element, the browser uses the styles applied by the sequence with the
highest overall specificity.

Group Comprised of Examples

A id selectors #foo class
selectors .bar
B attribute selectors [], [] title colspan = "2"
pseudo-classes :, hover nth-child
:(2)

type selectors div, li

c pseudo-elements
::before , ::first-letter

Group A is the most specific, followed by Group B, then finally Group c.

The universal selector (*) and combinators (like > and ~) have no specificity.

Example 1: Specificity of various selector sequences

Example 2: How specificity is used by the browser

Imagine the following CSS implementation:

Here we have an ID selector which declares color as blue, and a class selector which declares color as red and
background as black.

An element with an ID of #foo and a class of .bar will be selected by both declarations. ID selectors have a
Group A specificity and class selectors have a Group B specificity. An ID selector outweighs any number of class
selectors.
Because of this, ; color : blue ; from the #foo selector and the background : black from the .bar
selector will be
applied to the element. The higher specificity of the ID selector will cause the browser to ignore the .bar
selector's color declaration.

Now imagine a different CSS implementation:

Here we have two class selectors; one of which declares color as red and background as black, and the other
declares background as white.

An element with both the .bar and .baz classes will be affected by both of these declarations, however the
problem we have now is that both .bar and .baz have an identical Group B specificity. The cascading nature of
CSS resolves this for us: as .baz is defined after .bar, our element ends up with the red color from .bar but the
white background from .baz.

Example 3: How to manipulate specificity

The last snippet from Example 2 above can be manipulated to ensure our .bar class selector's color declaration
is used instead of that of the .baz class selector.

The most common way to achieve this would be to find out what other selectors can be applied to the .bar
selector sequence. For example, if the .bar class was only ever applied to span elements, we could modify the
.bar selector to span.bar. This would give it a new Group C specificity, which would override the .baz selector's
lack thereof:
However it may not always possible to find another common selector which is shared between any element
which uses the .bar class. Because of this, CSS allows us to duplicate selectors to increase specificity. Instead of
just .bar, we .bar.bar can use instead (See The grammar of Selectors, W3C Recommendation). This still
selects any element with a class of .bar, but now has double the Group B specificity:

!important and inline style declarations

The !important flag on a style declaration and styles declared by the HTML style attribute are considered to have
a greater specificity than any selector. If these exist, the style declaration they affect will overrule other
declarations regardless of their specificity. That is, unless you have more than one declaration that contains an
!important flag for the same property that apply to the same element. Then, normal specificity rules will apply
to those properties in reference to each other.

Because they completely override specificity, the use of !important is frowned upon in most use cases. One
should use it as little as possible. To keep CSS code efficient and maintainable in the long run, it's almost always
better to increase the specificity of the surrounding selector than to use !important.

One of those rare exceptions where !important is not frowned upon, is when implementing generic helper
classes like a .hidden or .background-yellow class that are supposed to always override one or more properties
wherever they are encountered. And even then, you need to know what you're doing. The last thing you want,
when writing maintainable CSS, is to have !important flags throughout your CSS.

A final note

A common misconception about CSS specificity is that the Group A, B and c values should be combined with
each other b =5, c (a=1,=1 => 151). This is not the case. If this were the case, having 20 of a Group B or c
selector would be enough to override a single Group A or B selector respectively. The three
groups should be regarded as individual levels of specificity. Specificity cannot be represented by a single value.

When creating your CSS style sheet, you should maintain the lowest specificity as possible. If you need to make
the specificity a little higher to overwrite another method, make it higher but as low as possible to make it
higher. You shouldn't need to have a selector like this:

This makes future changes harder and pollutes that css page.

You can calculate the specificity of your selector here

Section 17.2: The !important

declaration
The !important declaration is used to override the usual specificity in a style sheet by giving a higher priority to
a
rule. Its usage is: ; property : value !important
Avoiding the usage of !important is strongly recommended (unless absolutely necessary), because it will disturb
the natural flow of css rules which can bring uncertainty in your style sheet. Also it is important to note that
when multiple !important declarations are applied to the same rule on a certain element, the one with the
higher specificity will be the ona applied.
Here are some examples where using !important declaration can be justified:

If your rules shouldn't be overridden by any inline style of the element which is written inside style
attribute of the html element.
To give the user more control over the web accessibility, like increasing or decreasing size of the font-
size, by overriding the author style using !important.
For testing and debugging using inspect element.

See also:

W3C - 6 Assigning property values, Cascading, and Inheritance -- 6.4.2 !important rules

Section 17.3: Cascading

Cascading and specificity are used together to determine the final value of a CSS styling property. They also
define the mechanisms for resolving conflicts in CSS rule sets.

CSS Loading order

Styles are read from the following sources, in this order:

1. User Agent stylesheet (The styles supplied by the browser vendor)

2. User stylesheet (The additional styling a user has set on his/her browser)
3. Author stylesheet (Author here means the creator of the webpage/website)
Maybe one or more .css files
In the <style > element of the HTML document
4. Inline styles (In the style attribute on an HTML element)

The browser will lookup the corresponding style(s) when rendering an element.

How are conflicts resolved?

When only one CSS rule set is trying to set a style for an element, then there is no conflict, and that rule set is
used.

When multiple rule sets are found with conflicting settings, first the Specificty rules, and then the Cascading
rules are used to determine what style to use.
Example 1 - Specificity rules

What color will the text be? (hover to see the answer)

blue

First the specificity rules are applied, and the one with the highest specificity "wins".

Example 2 - Cascade rules with identical selectors

External css file

Internal css (in HTML file)

In this case, where you have identical selectors, the cascade kicks in, and determines that the last one loaded
"wins".

red

After applying the specificity rules, there's still a conflict between blue and red, so the cascading rules are
applied on top of the specificity rules. Cascading looks at the load order of the rules, whether inside the same
.css file or in the collection of style sources. The last one loaded overrides any earlier ones. In this case, the .otherstyle > div
rule "wins".

A final note
 Selector specificity always take precedence.
Stylesheet order break ties.
Inline styles trump everything.

Section 17.4: More complex specificity example

What borders, colors, and font-sizes will the text

be? font-size:

font-size : 24 ;, since #elmnt1 rule set has the highest specificity for the <div
> in
question, every property here is set.

border:

border : 3px dotted red ;. The border-color red is taken from #elmnt1 rule set, since it has
the highest
specificity. The other properties of the border, border-thickness, and border-style are from the div
rule set.

background-color:
 background-color : green ;. The background-color is set in the div, body.mystyle > div.myotherstyle
.mystyle .myotherstyle , and rule sets. The specificities are (0, 0, 1) vs. (0, 2,
2) vs. (0, 2, 0), so the middle one "wins".

color:

color : red ;. The color is set in both the div and .mystyle .myotherstyle rule sets.
The latter has the higher specificity of (0, 2, 0) and "wins".

Chapter 18: Colors

Section 18.1: currentColor
currentColor returns the computed color value of the current element.

Use in same element

Here currentColor evaluates to red since the color property is set to red:

In this case, specifying currentColor for the border is most likely redundant because omitting it should produce
identical results. Only use currentColor inside the border property within the same element if it would be
overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second rule
overriding the first:

Inherited from parent element

The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's border-color
blue.

currentColor can also be used by other rules which normally would not inherit from the color property, such as
background-color. The example below shows the children using the color set in the parent as its background:
Possible Result:

Section 18.2: Color Keywords

Most browsers support using color keywords to specify a color. For example, to set the color of an element to
blue, use the blue keyword:

CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF.

Color Keywords
Color name Hex value RGB values Color
AliceBlue #F0F8FF rgb(240,248,255)

AntiqueWhite #FAEBD7 rgb(250,235,215)

Aqua #00FFFF rgb(0,255,255)

Aquamarine #7FFFD4 rgb(127,255,212)

Azure #F0FFFF rgb(240,255,255)

Beige #F5F5DC rgb(245,245,220)

Bisque #FFE4C4 rgb(255,228,196)

Black #000000 rgb(0,0,0)

BlanchedAlmond #FFEBCD rgb(255,235,205)

Blue #0000FF rgb(0,0,255)

BlueViolet #8A2BE2 rgb(138,43,226)

Brown #A52A2A rgb(165,42,42)

BurlyWood #DEB887 rgb(222,184,135)

CadetBlue #5F9EA0 rgb(95,158,160)

Chartreuse #7FFF00 rgb(127,255,0)

Chocolate #D2691E rgb(210,105,30)

Coral #FF7F50 rgb(255,127,80)

CornflowerBlue #6495ED rgb(100,149,237)

Cornsilk #FFF8DC rgb(255,248,220)

Crimson #DC143C rgb(220,20,60)

Cyan #00FFFF rgb(0,255,255)

DarkBlue #00008B rgb(0,0,139)

DarkCyan #008B8B rgb(0,139,139)

DarkGoldenRod #B8860B rgb(184,134,11)

DarkGray #A9A9A9 rgb(169,169,169)

DarkGrey #A9A9A9 rgb(169,169,169)

DarkGreen #006400 rgb(0,100,0)

DarkKhaki #BDB76B rgb(189,183,107)

DarkMagenta #8B008B rgb(139,0,139)

DarkOliveGreen #556B2F rgb(85,107,47)

DarkOrange #FF8C00 rgb(255,140,0)

DarkOrchid #9932CC rgb(153,50,204)

DarkRed #8B0000 rgb(139,0,0)

DarkSalmon #E9967A rgb(233,150,122)

DarkSeaGreen #8FBC8F rgb(143,188,143)

DarkSlateBlue #483D8B rgb(72,61,139)

DarkSlateGray #2F4F4F rgb(47,79,79)

DarkSlateGrey #2F4F4F rgb(47,79,79)

DarkTurquoise #00CED1 rgb(0,206,209)

DarkViolet #9400D3 rgb(148,0,211)

DeepPink #FF1493 rgb(255,20,147)

DeepSkyBlue #00BFFF rgb(0,191,255)

DimGray #696969 rgb(105,105,105)

DimGrey #696969 rgb(105,105,105)

DodgerBlue #1E90FF rgb(30,144,255)

FireBrick #B22222 rgb(178,34,34)

FloralWhite #FFFAF0 rgb(255,250,240)

ForestGreen #228B22 rgb(34,139,34)

Fuchsia #FF00FF rgb(255,0,255)

Gainsboro #DCDCDC rgb(220,220,220)

GhostWhite #F8F8FF rgb(248,248,255)

Gold #FFD700 rgb(255,215,0)

GoldenRod #DAA520 rgb(218,165,32)

Gray #808080 rgb(128,128,128)

Grey #808080 rgb(128,128,128)

Green #008000 rgb(0,128,0)

GreenYellow #ADFF2F rgb(173,255,47)

HoneyDew #F0FFF0 rgb(240,255,240)

HotPink #FF69B4 rgb(255,105,180)

IndianRed #CD5C5C rgb(205,92,92)

Indigo #4B0082 rgb(75,0,130)

Ivory #FFFFF0 rgb(255,255,240)

Khaki #F0E68C rgb(240,230,140)

Lavender #E6E6FA rgb(230,230,250)

LavenderBlush #FFF0F5 rgb(255,240,245)

LawnGreen #7CFC00 rgb(124,252,0)

LemonChiffon #FFFACD rgb(255,250,205)

LightBlue #ADD8E6 rgb(173,216,230)

LightCoral #F08080 rgb(240,128,128)

LightCyan #E0FFFF rgb(224,255,255)

LightGoldenRodYellow #FAFAD2 rgb(250,250,210)

LightGray #D3D3D3 rgb(211,211,211)

LightGrey #D3D3D3 rgb(211,211,211)

LightGreen #90EE90 rgb(144,238,144)

LightPink #FFB6C1 rgb(255,182,193)

LightSalmon #FFA07A rgb(255,160,122)

LightSeaGreen #20B2AA rgb(32,178,170)

LightSkyBlue #87CEFA rgb(135,206,250)

LightSlateGray #778899 rgb(119,136,153)

LightSlateGrey #778899 rgb(119,136,153)

LightSteelBlue #B0C4DE rgb(176,196,222)

LightYellow #FFFFE0 rgb(255,255,224)

Lime #00FF00 rgb(0,255,0)

LimeGreen #32CD32 rgb(50,205,50)

Linen #FAF0E6 rgb(250,240,230)

Magenta #FF00FF rgb(255,0,255)

Maroon #800000 rgb(128,0,0)

MediumAquaMarine #66CDAA rgb(102,205,170)

MediumBlue #0000CD rgb(0,0,205)

MediumOrchid #BA55D3 rgb(186,85,211)

MediumPurple #9370DB rgb(147,112,219)

MediumSeaGreen #3CB371 rgb(60,179,113)

MediumSlateBlue #7B68EE rgb(123,104,238)

MediumSpringGreen #00FA9A rgb(0,250,154)

MediumTurquoise #48D1CC rgb(72,209,204)

MediumVioletRed #C71585 rgb(199,21,133)

MidnightBlue #191970 rgb(25,25,112)

MintCream #F5FFFA rgb(245,255,250)

MistyRose #FFE4E1 rgb(255,228,225)

Moccasin #FFE4B5 rgb(255,228,181)

NavajoWhite #FFDEAD rgb(255,222,173)

Navy #000080 rgb(0,0,128)

OldLace #FDF5E6 rgb(253,245,230)

Olive #808000 rgb(128,128,0)

OliveDrab #6B8E23 rgb(107,142,35)

Orange #FFA500 rgb(255,165,0)

OrangeRed #FF4500 rgb(255,69,0)

Orchid #DA70D6 rgb(218,112,214)

PaleGoldenRod #EEE8AA rgb(238,232,170)

PaleGreen #98FB98 rgb(152,251,152)

PaleTurquoise #AFEEEE rgb(175,238,238)

PaleVioletRed #DB7093 rgb(219,112,147)

PapayaWhip #FFEFD5 rgb(255,239,213)

PeachPuff #FFDAB9 rgb(255,218,185)

Peru #CD853F rgb(205,133,63)

Pink #FFC0CB rgb(255,192,203)

Plum #DDA0DD rgb(221,160,221)

PowderBlue #B0E0E6 rgb(176,224,230)

Purple #800080 rgb(128,0,128)

RebeccaPurple #663399 rgb(102,51,153)

Red #FF0000 rgb(255,0,0)

RosyBrown #BC8F8F rgb(188,143,143)

RoyalBlue #4169E1 rgb(65,105,225)

SaddleBrown #8B4513 rgb(139,69,19)

Salmon #FA8072 rgb(250,128,114)

SandyBrown #F4A460 rgb(244,164,96)

SeaGreen #2E8B57 rgb(46,139,87)

SeaShell #FFF5EE rgb(255,245,238)

Sienna #A0522D rgb(160,82,45)

Silver #C0C0C0 rgb(192,192,192)

SkyBlue #87CEEB rgb(135,206,235)

SlateBlue #6A5ACD rgb(106,90,205)

SlateGray #708090 rgb(112,128,144)

SlateGrey #708090 rgb(112,128,144)

Snow #FFFAFA rgb(255,250,250)

SpringGreen #00FF7F rgb(0,255,127)

SteelBlue #4682B4 rgb(70,130,180)

Tan #D2B48C rgb(210,180,140)

Teal #008080 rgb(0,128,128)

Thistle #D8BFD8 rgb(216,191,216)

Tomato #FF6347 rgb(255,99,71)

Turquoise #40E0D0 rgb(64,224,208)

Violet #EE82EE rgb(238,130,238)

Wheat #F5DEB3 rgb(245,222,179)

White #FFFFFF rgb(255,255,255)

WhiteSmoke #F5F5F5 rgb(245,245,245)

Yellow #FFFF00 rgb(255,255,0)

YellowGreen #9ACD32 rgb(154,205,50)

In addition to the named colors, there is also the keyword transparent, which represents a fully-transparent
black:
rgba (0,0,0,0)