Basic Syntax

selector {
    property: value;
    property: value;
}

Example:

p {
    color: red;
    text-align: center;
}

Including CSS

Inline Style

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Internal Style

<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>

External Style

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

Style Cascading Rules

When the same tag or ID has duplicate styles:

  • If properties are different, all are applied
  • If properties are the same, the last processed style is applied

Comments

p {
    color: red;  /* This is a single-line comment */
    text-align: center;
}

/* This is
   a multi-line
   comment */

Selectors

Reference: W3Schools CSS Selectors

ID Selector

#para1 {
    text-align: center;
    color: red;
}

Class Selector

.center {
    text-align: center;
    color: red;
}

Tag Selector

h1 {
    text-align: center;
    color: red;
}

State Selector

a:link {
    color: red;
}

Multiple Selector

h1, h2, p {
    text-align: center;
    color: red;
}

Tag + Class Combination

Only <p> elements with class center:

p.center {
    text-align: center;
    color: red;
}

Descendant Selector

All <p> inside <div> (not just direct children):

div p {
    background-color: yellow;
}

Child Selector

Only direct child <p> elements:

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector

<p> immediately after <div>:

div + p {
    background-color: yellow;
}

General Sibling Selector

All <p> siblings of <div>:

div ~ p {
    background-color: yellow;
}

Attribute Selector

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

Attribute Contains Selector

Elements where title contains “flower”:

[title~="flower"] {
    border: 5px solid yellow;
}

Attribute Starts With Selector

Class starting with “top” (word-separated like “top” or “top-aa”):

[class|="top"] {
    background: yellow;
}

Class starting with “top” (any prefix like “topaa”):

[class^="top"] {
    background: yellow;
}

Pseudo-classes

Reference: Selectors for element states

Hover

a:hover {
    color: blue;
}

First Child

First child among siblings:

p:first-child {
    color: blue;
}

Pseudo-elements

Reference: W3Schools CSS Pseudo-elements

First Letter

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

First Line

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

Before Element

Add image before tag:

h1::before {
    content: url(smiley.gif);
}

After Element

Add image after tag:

h1::after {
    content: url(smiley.gif);
}

Selection Style

Style for selected text:

::selection {
    color: red;
    background: yellow;
}

CSS Values

Colors

color: rgb(255, 165, 0);
color: blue;
color: #FF0000;

Images

background-image: url("paper.gif");

Repeat

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Position

background-position: right top;

Properties

Background

body {
    background-color: #ffffff;
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;  /* Does not move on scroll */
}

/* Shorthand */
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Text

color: red;  /* text color */

Margin

margin-left: 20px;

Border

Basic Border

border: 1px solid grey;

Collapse Borders

border-collapse: collapse;

Padding

padding: 5px;

Table Styling

Striped Rows

table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}

table tr:nth-child(odd) {
    background-color: #f1f1f1;
}

table tr:nth-child(even) {
    background-color: #ffffff;
}

CSS Counter

Reference: W3Schools CSS Counters

Auto-incrementing numbers before tags:

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

Useful Style Techniques

Fixed Width with Word Wrap

style="display: block; max-width: 500px; word-wrap: break-word"

Common Errors

Important: Do not add a space between the property value and the unit.

Wrong: margin-left: 20 px;

Correct: margin-left: 20px;

Reference