CSS3 Syntax and Selector Reference

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents.

1. Including CSS in HTML

1.1 Internal Stylesheet

Place a <style> element inside the <head> of the HTML document, after the <title> tag. CSS rules are written as selector { property: value; }.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        /* CSS comment */
        p {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>Styled paragraph</p>
</body>
</html>

1.2 External Stylesheet

Write CSS in a separate file (e.g., styles.css) and link it from the HTML <head> using the <link> tag.

/* styles.css */
p {
    color: red;
    font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Styled paragraph</p>
</body>
</html>

1.3 Inline Styles

Apply styles directly to an element using the style attribute. This approach is often used with JavaScript.

<div style="color: red; font-size: 20px;">Inline styled div</div>

2. CSS Selectors

Selectors target HTML elements to apply styles.

2.1 Type (Tag) Selector

Selects all elements of a given type. It cannot differentiate between two identical tags.

p {
    color: red;
}
div {
    color: blue;
}

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<div>Div 2</div>

2.2 Class Selector

Selects elements by their class attribute. A class can be reused on multiple elements, and an element can have multiple classes.

Define with a dot (.): .class-name

.mycolor {
    color: red;
}
.size {
    font-size: 30px;
}

<p class="mycolor">Red text</p>
<div class="mycolor size">Red and larger text</div>

2.3 ID Selector

Selects a single unique element by its id attribute. IDs are primarily used for JavaScript, not styling.

Define with a hash (#): #id-name

#mycolor {
    color: red;
}

<p id="mycolor">Red text</p>

2.4 Universal Selector

Selects every element in the document. It is automatically applied without explicit usage.

* {
    color: red;
}

2.5 Compound Selectors

Combine basic selectors for precise targeting.

Descendant Selector

Targets any descendant (child, grandchild, etc.). Written with a space: ancestor descendant.

div span {
    color: red;
}

<div>
    <span>Inside div (selected)</span>
    <p>
        <span>Grandchild span (also selected)</span>
    </p>
</div>

Child Selector

Targets only direct children. Written with >: parent > child.

div > span {
    color: red;
}

<div>
    <span>Direct child (selected)</span>
    <p>
        <span>Grandchild (not selected)</span>
    </p>
</div>

Union (Group) Selector

Applies the same styles to multiple selectors. Separate selectors with a comma.

div,
p,
span {
    color: red;
}

<div>Div</div>
<p>Paragraph</p>
<span>Span</span>

Intersection Selector

Selects elements that satisfy all conditions at once. Write selectors consecutively without spaces.

p.box {
    color: red;
}

This selects only <p> elements that also have the class box.

<p class="box">Red text</p>
<p>Not selected</p>

Tags: css CSS3 selectors Syntax

Posted on Fri, 08 May 2026 00:36:28 +0000 by aleX_hill

Freaks City