CSS HEAD
Header Paragraph Format Quotations Text Format Line List Links Images Medias

CSS Essentials

CSS stands for Cascading Style Sheets.

CSS can be added to HTML documents in 3 ways:

Inline - style attribute inside HTML elements (Not recommend)

Internal - style element in the head section

External - link element to link to an external CSS file

CSS Selectors

ID and Class

Use id when it is unique. Use class then you want to reuse the style.

Alternatively, always use class

Selector CSS HTML Description
.class .intro <div class="intro">item</div> Selects all elements with class="intro"
.class1.class2 .name1.name2 <div class="name1 name2">item</div> Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 <div class="name1">
<div class="name2">item</div></div>		 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

@import Rule

Import the style sheet into the current style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

@import url("substyle.css"); Using a url
@import "printstyle.css" print; ONLY if the media is print
@import "mobstyle.css" screen and (max-width: 768px); ONLY if the media is screen and the viewport is maximum 768 pixels

Body

Color

Colors value options:

Color Names
- With CSS, colors can be set by using color names.

color: Red;

RGB Colors
- An RGB color value is specified with: rgb( RED , GREEN , BLUE ).

color: rgb(255,0,0);

Hexadecimal Colors
A hexadecimal color is specified with: #RRGGBB.

color: #FF0000;

currentcolor
The currentcolor keyword refers to the value of the color property of an element.

color: blue; /* Blue text color */
border: 10px solid currentcolor; /* Blue border color */

Text Formatting Style

Start with the font you want, and end with a generic family.

Web Safe Font

property CSS result
font-family font-family: "Arial Black", Gadget, sans-serif; content
color color: orange; content
font-size font-size: 30px; content
font-weight
(normal, bold, italic)		 font-weight: bold; content
font font: normal 18px "Arial Black", Gadget; content
text-decoration text-decoration: underline; content
text-transform text-transform: uppercase; content
letter-spacing letter-spacing: 0.3em; content
word-spacing word-spacing: 1.5em; content content

Background

property CSS result
background-color
set background-color		 background-color: lightgreen; content

Paragraph

property CSS result
line-height
(em, px)		 line-height: 3em;
content1
content2
text-align
(center)		 text-align:center;
content
width
(px, %)		 width:50%;
one two three four five six seven eight nine ten

Box Model

In CSS, the term "box model" is used when talking about design and layout.

Margin
Border
Padding
Content

Box

property CSS result
border
border-top
border-right
border-bottom
border-left
border-width
border-top-width
border-top-style
 border: 1px solid gray;
solid

dashed

double

groove

ridge

inset

outset

none

hidden
border-radius
 border-radius: 15px;
border-radius
margin
margin-top
margin-right
margin-bottom
margin-left 		margin: 20px;;
content
padding
padding-top
padding-right
padding-bottom
padding-left 		padding: 20px;;
content

List style

property CSS result
list-style-type
(unordered list)		 Default

list-style-type: circle;

list-style-type: square;

list-style-type: none;
  • default
  • circle
  • square
  • none
list-style-type
(ordered list)		 Default

list-style-type: upper-roman;

list-style-type: lower-alpha;
  1. default
  1. upper-roman
  1. lower-alpha
list-style-image list-style-image: url('../resource/images/ani_smwcoin.gif');
  • list-style-image
list-style-position list-style-position: outside;

list-style-position: inside;
  • content
    new line
  • content
    new line

Links style

The four links states are:

  1. a:link - a normal, unvisited link
  2. a:visited - a link that user has visited
  3. a:hover - a link when the user mouses over it
  4. a:active - a link the moment it is clicked

property CSS result
text-decoration text-decoration: none;

text-decoration: underline; 		link

link
color color: orange; link
display border: 2px
display: inline-block;		 link