CSS Introduction, Syntax and Examples

Expert

(, )

By SamK

Category(s)

Web Design

Web Development

Topic(s)

CSS

CSS is the language used to style web pages.

CSS stands for Cascading Style Sheet and it describes how HTML elements should be displayed on screens, paper, or other media. It saves a lot of work by controlling the layout of multiple web pages simultaneously. External stylesheets are stored in CSS files.

One HTML Page - Multiple Styles

You can include multiple style sheets in one HTML page, as you can see in the code below.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multiple Stylesheets Example</title>
        <link rel="stylesheet" href="style1.css">
        <link rel="stylesheet" href="style2.css">
        <link rel="stylesheet" href="style3.css">
        <link rel="stylesheet" href="style4.css">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is an example of how to include multiple stylesheets in a single HTML page.</p>
    </body>
    </html>

In this example, style1.css, style2.css, style3.css, and style4.css are the four external CSS files being linked to the HTML document. The order of the <link> elements matters, because styles defined in later stylesheets can override those defined earlier, due to the cascading nature of CSS.

Why Use CSS?

CSS is used to define styles for web pages, including design, layout, and variations in display for different devices and screen sizes. An example CSS is given below.

body {
 background-color:red;
}
h1 {
 color: orange;
 text-align: right;
}
p {
 font-family: roboto;
 font-size: 18px;
}

CSS Saves Time and Effort

Style definitions are typically saved in external .css files. Using an external stylesheet allows you to change the look of an entire website by modifying just one file.

CSS Syntax

A CSS rule consists of a selector and a block of declarations.

Here's the basic syntax of a CSS rule:

selector {
  property: value;
}

Selector: Indicates which HTML element the rule applies to.
Property: Specifies the style attribute you want to change (e.g., color, font-size).
Value: Indicates the setting for the property (e.g., red, 18px).

p {
  color: red;
  font-size: 18px;
}

In this example, the selector p targets all <p> elements. The declaration block contains two declarations: one is setting the color property to red and the other is setting the font-size property to 18px.

CSS Selectors

A CSS selector identifies the HTML element(s) you want to style.

CSS selectors can be divided into five categories:

Simple selectors: Select elements based on name, id, or class.
Combinator selectors: Select elements based on a specific relationship between them.
Pseudo-class selectors: Select elements based on a certain state.
Pseudo-elements selectors: Select and style a part of an element.
Attribute selectors: Select elements based on an attribute or attribute value.

The CSS element Selector

The element selector targets HTML elements based on their tag name.

An element selector in CSS would be:

p {
  color: red;
}

In this example, the p selector targets all <p> elements and sets their text color to red.

The CSS id Selector

The id selector utilizes the id attribute of an HTML element to select a particular element. Since the id of an element is unique within a page, the id selector is used to target one unique element.

To select an element with a specific id, precede the id of the element with a hash (#) character.

#myElement {
  color: blue;
}

In this example, the #myElement selector targets the HTML element with the id attribute set to "myElement" and sets its text color to blue.

The CSS class Selector

The class selector chooses HTML elements with a designated class attribute. To target elements with a particular class, use a period (.) followed by the class name.

.highlight {
  background-color: yellow;
}

In this example, the .highlight selector targets all HTML elements with the class attribute set to "highlight" and sets their background color to yellow.

The CSS Universal Selector

The universal selector (*) targets all HTML elements present on the page.

* {
  border: 1px solid black;
}

In this example, the * selector selects all HTML elements and applies a 1px solid black border to each of them.

The CSS Grouping Selector

The grouping selector applies the same style definitions to multiple HTML elements.

h1, h2, p {
  font-family: roboto;
  color: #333;
}

In this example, the style definitions for font-family and color are applied to h1, h2, and p elements using the grouping selector.

How To Add CSS

When a browser interprets a style sheet, it formats the HTML document based on the instructions provided in the style sheet.

Style sheets can be inserted into an HTML document in three ways:

External CSS
Internal CSS
Inline CSS

External CSS

By utilizing an external style sheet, you can modify the appearance of an entire website by altering just one file!

Each HTML page should include a reference to the external style sheet file within the <link> element, located within the head section.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>External CSS Example</title>
   <!-- Link to external CSS file -->
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>Welcome to My Website</h1>
   <p>This is an example of using an external CSS file.</p>
</body>
</html>

CSS file (styles.css):

/* styles.css */
body {
  font-family: roboto;
  background-color: #f0f0f0;
  color: #333;
}
h1 {
  color: #007bff;
}

In this example, the external CSS file named "styles.css" is linked to the HTML document using the <link> element. The CSS file contains styling rules that define the font family, background color, and text color for the body element, as well as a specific color for the h1 element.

Internal CSS

An internal style sheet is suitable when a single HTML page requires a distinctive style.

The internal style is declared within the <style> element, located within the head section of the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Internal CSS Example</title>
   <!-- Internal CSS style -->
   <style>
       body {
         font-family: roboto;
         background-color: #f0f0f0;
         color: #333;
       }
       h1 {
        color: #007bff;
       }
   </style>
</head>
<body>
   <h1>Welcome to My Website</h1>
   <p>This is an example of using an internal CSS style sheet.</p>
</body>
</html>

The <style> tag contains CSS rules.
These rules apply styles to various HTML elements.
The styles defined within <style> tag are scoped to this HTML document only.

Inline CSS

In Inline CSS:

Styles are applied directly to individual HTML elements using the style attribute.
Each style attribute contains CSS properties and values separated by semicolons.
Inline styles override any external or internal CSS rules applied to the same element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <p style="color: red;">This is a paragraph with inline CSS to change its color to red.</p>
</body>
</html>

Multiple Style Sheets

If multiple style sheets define properties for the same selector (element), the value from the last read style sheet will be used.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
 color: blue;
}
</style>
</head>

If the internal style is defined after the link to the external style sheet, the <h1> elements will be "blue", as defined in the internal style, irrespective of the color specified in the linked external style sheet.

Cascading Order

When multiple styles are specified for an HTML element, they follow a cascading order, with the highest priority given to:

Inline style (inside an HTML element): Styles defined directly within the HTML element using the style attribute.
External and internal style sheets (in the head section): Styles defined in external CSS files linked to the HTML document or within the <style> element in the <head> section.
Browser defaults: If no styles are defined, the browser applies its default styles.

In summary, inline styles take precedence over external and internal stylesheets, which, in turn, override browser defaults.

CSS Comments

CSS comments are essential for documenting your source code, even though they are not displayed in the browser. They provide valuable context and explanations for your CSS rules, aiding in understanding and maintaining the codebase.

A CSS comment is placed within the <style> element and begins with /* and ends with */. While these comments don't render in the browser, they serve as helpful annotations within your CSS code.

/* This is a single-line comment */
p {
 color: blue;
}

You can add comments wherever you want in the code:

p {
 color: blue;  /* Set text color to blue */
}

Even in the middle of a code line:

p {
 color: /*blue*/red; 
}

Comments can also span multiple lines:

/* This is
a multi-line
comment */
p {
 color: blue;
}

HTML and CSS Comments

In HTML, comments are enclosed within , while in CSS, comments are enclosed within /* and */. Although these comments are not visible in the rendered output of a webpage, they are valuable for providing context, explanations, or reminders within your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML and CSS Comments Example</title>
    <style>
        /* CSS comment: This is a CSS comment providing context for the following styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        /* CSS comment: Style for the heading */
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <!-- HTML comment: This is an HTML comment providing context for the following content -->
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Please check below options for the links to our previous or next tutorial.