CSS Basics/

...

/

Introducing CSS

Introducing CSS

Learn the basics of CSS syntax, selectors, and properties, along with the methods for linking stylesheets and their precedence.

We'll cover the following...

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of HTML documents. While HTML structures the content, CSS handles the visual layout, allowing us to control the appearance of web pages with precision.

Below is an illustration showing the same web page before and after applying CSS, highlighting the dramatic difference in design and layout.

A web page before applying CSS
A web page before applying CSS
A web page after applying CSS
A web page after applying CSS

Understanding CSS syntax

CSS comprises rules that tell the browser how to display elements on the page. Each rule consists of a selector and a declaration block ({}).

selector{ 
  property: value;
}
Generic syntax for defining CSS rules

Selectors

Selectors specify which HTML elements the styles should be applied to. Common selectors include element selectors (e.g., p, h1), class selectors (e.g., .classname), and ID selectors (e.g., #idname).

h1 {
  color: navy;
}

This rule applies to all <h1> elements.

Properties and values

Within the declaration block {}, we can define properties and their corresponding values.

h1 {
  color: navy;
  font-size: 16px;
}

In the above code, color and font-size are properties while navy and 16px are values.

Understanding CSS comments

Comments in CSS are non-executing lines of code that the browser ignores when rendering the web page. They serve as notes or explanations within the stylesheet, providing context or reminders about specific sections of code.

Syntax of CSS comments

A CSS comment starts with /* and ends with */. Any text between these symbols is considered a comment.

/* This is a single-line comment in CSS */
Single-line comment in CSS

The /* marks the beginning of the comment, and */ marks the end. The text in between is ignored by the browser.

Multi-line comments

CSS comments can span multiple lines, making them ideal for longer explanations or documentation.

/*
This is a multi-line comment.
It can span multiple lines without any issues.
Useful for detailed explanations.
*/
Multi-line comment in CSS

In the above code:

  • Lines 1–5: The comment starts with /* and ends with */. All the lines in between are part of the comment.

Uses of CSS comments

Comments can be strategically used throughout the stylesheet for various purposes.

  • Sectioning stylesheets: We can divide our CSS into sections using comments, making it easier to navigate large stylesheets.

  • Explaining complex code: For complex or non-intuitive code snippets, comments can provide valuable explanations.

  • Temporarily disabling code: We can comment out code to prevent it from executing without deleting it, which is helpful during debugging.

Linking CSS to HTML

To apply CSS to our HTML documents, we can use the style attribute, <style> tag, or the <link> tag.

Inline CSS

The style attribute in HTML is a powerful tool for applying inline CSS directly to individual elements, enabling quick and specific styling. It allows us to define properties such as color, font, size, margin, and more, right within the HTML tag.

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Example</title>
</head>
<body style="background-color: lightblue;">
    <h1 style="color: navy;">Hello, World!</h1>
</body>
</html>
Applying CSS using style attribute

When to use inline CSS

Applying inline CSS is ideal for the following scenarios:

  • Unique element styling: When a single element requires a unique style that won't be reused elsewhere.

  • Email templates: Many email clients only support inline CSS, making it necessary for styling HTML emails.

  • Testing and debugging: Useful for testing styles directly in the HTML during development or troubleshooting.

Internal CSS

The <style> tag is placed within the <head> section of our HTML document. It allows us to write CSS rules directly within our HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Applying CSS using style tag

When to use internal CSS

Embedding CSS using the ⁣<style> tag is suitable for the following scenarios:

  • Single-page websites: Ideal for pages that are standalone and do not share styles with other pages.

  • Dynamic styling: When styles need to be generated or modified dynamically using languages like PHP or ASP.NET.

  • Prototyping: Useful during the initial development phase before separating styles into external files.

  • Limited external access: In situations where linking to external stylesheets is not feasible due to security policies or platform restrictions.

External CSS

The <link> tag is placed within the <head> section and it links to an external CSS file. This method is preferred for larger websites where we want to apply the same styles across multiple pages.

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Applying CSS using link tag

We can define the styling in our styles.css file:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
Content of the styles.css file

When to use external CSS

External CSS is best for the following scenarios:

  • Multi-page websites: Essential for websites with numerous pages that require a uniform look and feel.

  • Team projects: Facilitates collaboration by allowing designers and developers to work on separate files.

  • Adherence to best practices: Preferred method in modern web development for clean, maintainable code.

  • Performance optimization: Beneficial when optimizing websites for faster load times and better user experience.

Precedence of applying CSS

Precedence is the order in which styles are applied based on where they are defined.

  • Inline styles have the highest precedence.

  • Internal styles (defined in <style> tags) have higher precedence than external styles.

  • External styles (linked CSS files) have the lowest precedence.

Try it yourself

Below is a sample code snippet to apply CSS using an external file. Feel free to experiment with different selectors and properties to see how they affect our web page. You can begin experimenting by trying out the following:

  • Change the header h1 to blue, with font size 20px.

  • Change the normal font size to 12px, in red color.

The CSS rules already mentioned in the style.css file are applied to the web page when you press the "Run" button. The <body> element is selected and its background color is changed to lightblue. The <h1> element text color is changed to navy and font size to 16px. You change these according to the suggestions above or any other way you see fit.

Quick Quiz

1.

What does CSS stand for?

A.

Computer Style Sheets

B.

Creative Style Sheets

C.

Cascading Style Sheets

D.

Colorful Style Sheets

1 / 5