CSS Tutorial

Introduction to CSS

CSS (Cascading Style Sheets) is a language used to style the appearance of content written in HTML. With CSS, you can control the layout, colors, fonts, spacing, and many other visual aspects of a webpage.

Basic Syntax

CSS uses a rule-based syntax where each rule targets HTML elements and applies styles to them.


selector {
    property: value;
}

Example:


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

In this example, all <p> (paragraph) elements will have blue text and a font size of 16 pixels.

Types of CSS

Inline CSS: Style applied directly inside an HTML element using the style attribute.
Internal CSS: Style written inside a <style> tag within the <head> section of HTML.
External CSS: Style placed in a separate .css file and linked to HTML using the <link> tag.

Example of Inline CSS:


<p style="color:red;">This is red text</p>

Example of Internal CSS:


<style>
h1 {
    color: green;
}
</style>

Example of External CSS:


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

Selectors

CSS selectors are patterns used to select the elements you want to style.

Element Selector: Targets all elements of a specific type. Example: p
Class Selector: Targets elements with a specific class attribute. Example: .classname
ID Selector: Targets a single element with a specific ID. Example: #idname
Universal Selector: Targets all elements. Example: *
Group Selector: Targets multiple elements with a single rule. Example: h1, h2, p

Example:


.button {
    background-color: blue;
    color: white;
}
#header {
    font-size: 24px;
}
* {
    margin: 0;
    padding: 0;
}

Common Properties

Some of the most commonly used CSS properties include:

color - Text color
background-color - Background color
font-size - Size of the text
margin - Space outside the element
padding - Space inside the element
border - Border around the element
width and height - Size of the element
display - Layout model (block, inline, flex, grid, etc.)

Example:


.box {
    background-color: lightgrey;
    padding: 20px;
    margin: 15px;
    border: 2px solid black;
}

Advanced Topics

1. Pseudo-classes and Pseudo-elements:


a:hover {
    color: red;
}
p::first-letter {
    font-size: 2em;
}

2. Media Queries (Responsive Design):


@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

3. Flexbox and Grid Layouts:


.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

Conclusion

CSS is a powerful tool that allows you to create visually appealing and responsive websites. Mastering its basics like selectors, properties, and layouts will greatly improve your web development skills. As you become more comfortable, you can explore animations, variables, frameworks like Bootstrap, and preprocessors like SASS.