CSS (Cascading Style Sheets) is the language used to style HTML documents. This guide covers the essential concepts and techniques for mastering CSS.

CSS Syntax

The basic syntax consists of a selector and declaration block:

selector {
    property: value;
    property: value;
}

Example:

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

Linking CSS to HTML

Inline Style

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

Internal Style (Embedded)

<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>

CSS Cascade Rules

When multiple styles apply to the same element:

  • If properties are different, all styles are applied
  • If properties conflict, the last processed style takes precedence

Selectors

Reference: W3Schools CSS Selectors

ID Selector

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

Class Selector

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

Element Selector

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

State Selector

a:link {
    color: red;
}

Multiple Selectors

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

Tag + Class Combination

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

Descendant Selector

Selects all descendants (not just direct children):

div p {
    background-color: yellow;
}

Child Selector

Selects only direct children:

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector

Selects the element immediately following:

div + p {
    background-color: yellow;
}

General Sibling Selector

Selects all siblings:

div ~ p {
    background-color: yellow;
}

Attribute Selector

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

Attribute Contains Selector

Matches when title contains “flower”:

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

Attribute Starts With Selector

Matches “top” or “top-xxx” (hyphen-separated):

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

Without hyphen requirement:

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

Pseudo-classes

Pseudo-classes select elements based on their state.

Hover State

a:hover {
    color: blue;
}

First Child

Selects elements that are the first child among siblings:

p:first-child {
    color: blue;
}

nth-child for Alternating Styles

Perfect for creating striped tables:

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

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

Pseudo-elements

Reference: W3Schools Pseudo-elements

Pseudo-elements style specific parts of an element.

First Letter

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

First Line

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

Before - Add Content Before Element

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

After - Add Content After Element

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

Selection Styling

Style text when selected by user:

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

CSS Counters

Reference: W3Schools CSS Counters

Automatically number elements:

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

Common Properties

Background Properties

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

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

Text Color

p {
    color: blue;
}

Margins

div {
    margin-left: 20px;
}

CSS Values

Colors

/* RGB */
color: rgb(255, 165, 0);

/* Named colors */
color: blue;

/* Hexadecimal */
color: #FF0000;

Images

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

Repeat Values

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

Position Values

background-position: right top;

Border Styling

Basic Border

border: 1px solid grey;

Collapsed Borders (for tables)

table {
    border-collapse: collapse;
}

Padding

td {
    padding: 5px;
}

Complete Striped Table Example

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;
}

Practical Styling Techniques

Fixed Width with Word Wrap

.fixed-width {
    display: block;
    max-width: 500px;
    word-wrap: break-word;
}

Common Mistakes to Avoid

Do not add space between value and unit:

/* Wrong */
margin-left: 20 px;

/* Correct */
margin-left: 20px;

Resources