Basic Selectors

CSS selectors determine which HTML elements your styles will target. Understanding the different selector types is fundamental to writing efficient CSS.

Tag Selector

The tag selector targets all elements of a specific type:

p {
    color: #333;
    margin: 10px 0;
}

Class Selector

Class selectors allow you to apply styles to multiple elements. They are reusable and represent the most flexible approach:

.highlight {
    background-color: #ffeb3b;
    padding: 5px;
}

<div class="highlight">Important content</div>
<span class="highlight">Another element</span>

Naming convnetions use lowercase letters with hyphens. Avoid numbers and Chinese characters in class names.

ID Selector

ID selectors target unique elements. Each ID should appear only once per page:

#main-header {
    font-size: 24px;
    font-weight: bold;
}

<header id="main-header">Site Title</header>

Universal Selector

The universal selector targets all elements without requiring any markup:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Font Properties

font-family

Specifies the typeface. Include fallback fonts for compatibility:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

font-size

Sets the text size. Using pixels provides consistent results across browsers:

body {
    font-size: 16px;
}

font-weight

Controls text boldness. Use numeric values (100-900) for precise control:

h1 {
    font-weight: 700;
}

font-style

Makes text italic or normal:

.quote {
    font-style: italic;
}

.corrected {
    font-style: normal;
}

Shorthand Font Property

Combine font properties into a single declaration:

p {
    font: italic 700 16px/1.5 'Arial', sans-serif;
}

Order: style weight size/line-height family. The size and family are required.

Text Properties

text-align

Controls horizontal alignment:

.heading {
    text-align: center;
}

.sidebar {
    text-align: right;
}

text-decoration

Adds or removes text decorations:

.link {
    text-decoration: underline;
}

.no-decor {
    text-decoration: none;
}

text-indent

Creates paragraph indentation:

.article p {
    text-indent: 2em;
}

line-height

Sets the vertical space between lines:

.content {
    line-height: 1.6;
}

Including CSS in HTML

Inline Styles

Apply directly to elements for quick modifications:

<p style="color: blue;">Quick style</p>

Internal Stylesheet

Embed CSS within the HTML document:

<style>
    .container {
        width: 100%;
    }
</style>

External Stylesheet

Link to a separate CSS file for maintainability:

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

Compound Selectors

Descendant Selector

Targets elements nested within other elements:

.article p {
    line-height: 1.8;
}

This affects all paragraph tags inside elements with the article class.

Child Selector

Targets only direct children:

.menu > li {
    display: inline-block;
}

Union Selector

Applies the same styles to multiple selectors:

h1, h2, h3 {
    margin-bottom: 15px;
}

Link Pseudo-classes

Style links based on user interaction:

a:link {
    color: #0066cc;
}

a:visited {
    color: #551a8b;
}

a:hover {
    color: #ff6600;
    text-decoration: underline;
}

a:active {
    color: #cc0000;
}

Remember the order: link, visited, hover, active (LVHA). This mnemonic helps prevent style conflicts.

Focus Pseudo-class

Style form elements when they receive focus:

input:focus, textarea:focus {
    border-color: #0066cc;
    outline: none;
}