Introduction To Css | Beginner

Introduction to the basics of CSS and its role in web design

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages. This tutorial provides an introduction to the basics of CSS and its role in web design.

Key Points:

CSS stands for Cascading Style Sheets.
CSS is used to control the layout and appearance of web pages.
CSS separates content from design, making it easier to maintain and update web pages.

Basic CSS Syntax

The basic syntax of CSS consists of selectors and declaration blocks. A selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.


selector {
    property: value;
    property: value;
}

Here is an example of CSS applied to a paragraph element:


p {
    color: blue;
    font-size: 16px;
}

CSS Selectors

CSS selectors are used to select the HTML elements you want to style. Common types of selectors include:

Element Selector: Selects elements based on the element name.


p {
    color: blue;
}

Class Selector: Selects elements with a specific class attribute. Class selectors start with a period (.).
```
.intro {
    font-size: 18px;
}
                    
```
ID Selector: Selects elements with a specific id attribute. ID selectors start with a hash (#).
```
#header {
    background-color: lightgray;
}
                    
```

Universal Selector: Selects all elements.


* {
    margin: 0;
    padding: 0;
}

Attribute Selector: Selects elements based on an attribute or attribute value.


a[target="_blank"] {
    color: red;
}

Inline, Internal, and External CSS

There are three ways to apply CSS to HTML: inline, internal, and external.

Inline CSS: Uses the style attribute inside an HTML element.


<p style="color: blue;">This is a blue paragraph.</p>

Internal CSS: Uses a <style> element in the HTML <head> section.


<head>
<style>
    p {
        color: blue;
    }
</style>
</head>

External CSS: Uses an external CSS file linked to the HTML document.


<head>
<link rel="stylesheet" href="styles.css">
</head>

External CSS file (styles.css):


p {
    color: blue;
}

CSS Box Model

The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of margins, borders, padding, and the content area. Understanding the box model is essential for controlling layout and design.


.element {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

In this example, the total width of the element is 142px (100px + 10px + 10px + 1px + 1px + 20px + 20px), and the total height is 142px (100px + 10px + 10px + 1px + 1px + 20px + 20px).

Styling Text

CSS provides various properties for styling text, including:

color: Sets the color of the text.
font-family: Specifies the font of the text.
font-size: Specifies the size of the text.
font-weight: Specifies the weight (boldness) of the text.
text-align: Sets the horizontal alignment of the text.
text-decoration: Adds decoration to the text (e.g., underline).
line-height: Sets the height of each line of text.


p {
    color: blue;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
}

Summary

In this tutorial, you learned about the basics of CSS and its role in web design. CSS is used to control the layout, colors, fonts, and overall visual appearance of web pages. You explored basic CSS syntax, selectors, different ways to apply CSS, the CSS box model, and text styling. Understanding these fundamentals is essential for creating well-designed and visually appealing web pages.

HTML CSS - Introduction to CSS