CSS (Cascading Style Sheets) is a language used to define the visual presentation of HTML documents. It enables developers to control typography, colors, layout dimensions, animation effects, and to create responsive designs for various devices.

Integrating CSS

CSS can be applied through three primary methods.

<!-- External Linking -->
<!-- Suitable for styles shared across multiple pages -->
<link rel="stylesheet" href="/assets/styles/main.css">

<!-- Embedded Styles -->
<!-- Useful for styles specific to a single page -->
<style>
    main {
        background-color: #f0f0f0;
    }
</style>

<!-- Inline Styles -->
<!-- Applied directly to an individual element -->
<h1 style="color: #2a7a6f;">Page Title</h1>

Rendering Process

A simplified view of how a browser processes CSS:

1. Loads the HTML.
2. Parses the HTML to construct the DOM (Document Object Model).
3. Loads and parses associated CSS.
4. Aplies the parsed CSS rules to corresponding nodes in the DOM.
5. Renders the styled page.

Selectors

Selectors target HTML elements for styling. Common types include:

• Tag name, class, or ID.
• Element attributes.
• Position within the DOM hierarchy. The universal selector (*) matches all elements.

/* ID Selector */
#primary-header {
    font-weight: bold;
}

/* Class Selector */
.highlight-text {
    color: #1e73be;
}

/* Tag Selector */
article {
    margin: 1em;
}

/* Attribute Selectors */
[readonly] {
    background-color: #e9e9e9;
}

input[type="email"] {
    border-color: #2a7a6f;
}

/* Selects links where href starts with "https" */
a[href^="https"] {
    color: green;
}

/* Selects links where href ends with ".pdf" */
a[href$=".pdf"] {
    color: red;
}

Pseudo-classes

Pseudo-classes style elements based on a specific state.

/* Unvisited link */
a:link {
    color: darkblue;
}

/* Visited link */
a:visited {
    color: purple;
}

/* Mouse over link */
a:hover {
    text-decoration: underline;
}

/* Active/clicked link */
a:active {
    color: red;
}

/* Focused element */
input:focus {
    outline: 2px solid orange;
}

/* Structural pseudo-classes */
li:first-child {
    font-size: 1.2em;
}
li:last-child {
    border-bottom: none;
}

Selector Combinators

Combinators define relationships between selectors.

Multiple selectors can be grouped using a comma (,).

Color Representation

Colors can be defined in several formats:

• RGB: Mixes Red, Green, and Blue channels (0-255).

  color: rgb(120, 88, 160);
  

• Hexadecimal: A hex representation of RGB values.

  color: #7858a0;
  

• HSL: Defines color by Hue (0-360), Saturation (0-100%), and Lightness (0-100%).

  color: hsl(270, 30%, 49%);
  

• Alpha Transparency: Adds an opacity channel (0.0 to 1.0).

  color: rgba(120, 88, 160, 0.7);
  color: hsla(270, 30%, 49%, 0.7);
  color: #7858a0b3; /* Hex with alpha */
  

Typography

Font Families The font-family property specifies a prioritized list of font families. A generic family name (e.g., sans-serif) should be the last fallback.

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Web Fonts Custom fonts can be loaded using @font-face.

@font-face {
    font-family: "CustomFont";
    src: url("/fonts/custom.woff2") format("woff2");
}
.content {
    font-family: "CustomFont", serif;
}

Font Properties

• font-size: Sets the size (e.g., 16px, 1.2rem, 1.5em).
• font-style: normal, italic, or oblique.
• font-weight: Controls boldness (e.g., 400 for normal, 700 for bold).
• line-height: Sets the spacing between lines of text.

These properties can be combined using the shorthand font property.

.heading {
    /* style weight size/line-height family */
    font: italic 600 2rem/1.4 "Georgia", serif;
}

Text Formatting

• text-align: Controls horizontal alignment (left, right, center, justify).
• letter-spacing / word-spacing: Adjusts spacing between characters or words.
• text-indent: Indents the first line of a text block.
• text-decoration: Adds lines (underline, overline, line-through) or none.
• white-space: Controls handling of whitespace and line breaks (normal, nowrap, pre, pre-wrap, pre-line).