Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the style of an HTML document. It allows you to control the layout, colors, fonts, spacing, and more of your web pages.

1. How to Apply CSS

CSS can be applied to HTML in three different ways:

• Inline CSS: Directly in HTML tags using the style attribute.
• Internal CSS: Within the <style> tag in the HTML document's head.
• External CSS: In a separate .css file linked to the HTML document.

2. Basic CSS Syntax

The basic syntax of CSS is as follows:

            
                selector {
                    property: value;
                }
            
        

Example:

            
                p {
                    color: red;
                }
            
        

This CSS rule will change the text color of all <p> tags to red.

3. CSS Selectors

CSS uses selectors to target HTML elements. Some common types of selectors are:

• Element Selector: Targets elements by their tag name (e.g., p, h1).
• Class Selector: Targets elements with a specific class attribute (e.g., .myClass).
• ID Selector: Targets elements with a specific ID attribute (e.g., #myId).

4. Styling Text and Boxes

Here are a few common properties:

• color: Sets the text color.
• background-color: Sets the background color of an element.
• font-size: Sets the size of the text.
• border: Adds a border around an element.
• padding: Adds space inside the element, between the border and content.
• margin: Adds space outside the element, between the border and other elements.

5. Example: Basic CSS Styling

Below is an example of how we can use CSS to style a box:

6. CSS Box Model

The CSS Box Model consists of the following parts:

• Content: The actual content inside the element (text, images, etc.).
• Padding: The space between the content and the border.
• Border: The border surrounding the element.
• Margin: The space outside the border.