CSS Basics

What is CSS?

CSS (Cascading Style Sheets) is a language used to style the layout and appearance of web pages. It controls the design aspects like color, fonts, and spacing of HTML elements.

CSS Syntax

CSS syntax consists of selectors and properties. A selector is used to select the HTML element you want to style, and a property is used to apply a specific style to that element.

selector {
    property: value;
}
                

CSS Selectors

Selectors are patterns used to select the element(s) you want to style. There are several types of selectors:

• Element Selector: Targets an HTML element (e.g., h1, p).
• Class Selector: Targets elements with a specific class attribute (e.g., .class-name).
• ID Selector: Targets an element with a specific ID attribute (e.g., #id-name).

/* Element Selector */
h1 {
    color: blue;
}

/* Class Selector */
.class-name {
    font-size: 20px;
}

/* ID Selector */
#id-name {
    background-color: yellow;
}
                

CSS Colors

CSS allows you to specify colors in various ways, including using color names, RGB, RGBA, Hex, and HSL. Below are examples of each:

/* Color Names */
h1 {
    color: red;
}

/* RGB */
p {
    color: rgb(255, 99, 71);
}

/* Hex */
div {
    background-color: #f2a900;
}

/* RGBA (with transparency) */
span {
    color: rgba(255, 0, 0, 0.5);
}

/* HSL */
h2 {
    color: hsl(120, 100%, 50%);
}
                

CSS Positioning

CSS allows you to position elements in a variety of ways, including relative, absolute, fixed, and sticky positioning:

/* Relative Positioning */
.relative {
    position: relative;
    left: 20px;
}

/* Absolute Positioning */
.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

/* Fixed Positioning */
.fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

/* Sticky Positioning */
.sticky {
    position: sticky;
    top: 0;
}
                

CSS Transitions

CSS transitions allow you to change property values smoothly (over a given duration) from one state to another. Here’s an example of a transition effect:

/* Transition on hover */
button {
    background-color: blue;
    color: white;
    transition: background-color 0.5s ease;
}

button:hover {
    background-color: green;
}
                

CSS Flexbox

Flexbox is a powerful layout system in CSS that allows you to easily align and distribute space among items in a container. Below is an example:

Item 1

Item 2

Item 3

/* Flexbox container */
.flex-container {
    display: flex;
    justify-content: space-between;
}

/* Flexbox items */
.flex-container div {
    background-color: lightgray;
    padding: 20px;
    text-align: center;
    width: 30%;
}