CSS Basics: Styling the Web

Welcome to the fundamental tutorial for Cascading Style Sheets (CSS)! CSS is the language used to describe the presentation of a document written in HTML or XML. CSS dictates how elements should be rendered on screen, on paper, in speech, or on other media.

What is CSS?

CSS stands for Cascading Style Sheets. It's used to control the layout and appearance of web pages. Think of HTML as the skeleton of a webpage, providing structure, and CSS as the skin, muscles, and clothing that make it look good.

How to Add CSS to an HTML Document

There are three primary ways to include CSS in your HTML:

Inline Styles: Applying styles directly to an HTML element using the style attribute.
Internal Stylesheets: Placing CSS rules within a <style> tag in the <head> of an HTML document.
External Stylesheets: Linking to a separate .css file using the <link> tag in the <head>. This is the most common and recommended method for larger projects.

Inline Styles Example

<p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>

Internal Stylesheet Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS</title>
    <style>
        p {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This paragraph will be green and bold.</p>
</body>
</html>

External Stylesheet Example

First, create a file named styles.css with the following content:

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}

Then, link it in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading styled by an external CSS file.</h1>
</body>
</html>

CSS Syntax

A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations, separated by semicolons. Each declaration consists of a CSS property and a value.

Syntax Breakdown

selector {
    property: value;
    another-property: another-value;
}

For example, to make all paragraphs red:

p {
    color: red;
}

Common CSS Properties

Here are some of the most frequently used CSS properties:

color: Sets the color of the text.
font-size: Sets the size of the font.
background-color: Sets the background color of an element.
margin: Sets the space around an element.
padding: Sets the space within an element, between the content and the border.
border: Sets the border of an element.
text-align: Aligns text within an element (e.g., left, right, center, justify).
width and height: Sets the dimensions of an element.

Applying Multiple Properties

Let's style a simple paragraph with a few properties:

.styled-paragraph {
    color: #555;
    font-size: 1.1em;
    background-color: var(--light-color);
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: justify;
}

And here's how you would apply it in HTML:

<p class="styled-paragraph">
    This is a paragraph that demonstrates the application of multiple CSS properties.
    We're setting its color, font size, background color, padding, border,
    border-radius, margin, and text alignment. This showcases the power of CSS
    in visually enhancing web content.
</p>

Rendered Example:

This is a paragraph that demonstrates the application of multiple CSS properties. We're setting its color, font size, background color, padding, border, border-radius, margin, and text alignment. This showcases the power of CSS in visually enhancing web content.

Next Steps

Understanding these basic concepts is crucial for building beautiful and functional websites. In the next tutorial, we'll dive deeper into CSS Selectors to target specific elements more effectively.