Now, let's move to the next topic:

Web Basics Part 3 - CSS Basics

• CSS means Cascading Style Sheets
• It controls look and layout
• HTML gives structure
• CSS gives presentation

• How CSS works
• Browser reads HTML
• Browser applies CSS rules
• Rules match elements using selectors

• Basic CSS syntax
• selector
• property
• value

Example: Change paragraph text color and font size

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

• Selectors
• Element selector: p, h1, div
• Class selector: .card (reusable styles)
• ID selector: #header (unique elements)
• Group selector: h1, h2, h3

• Box Model
Every element is a box with:
• Content
• Padding
• Border
• Margin

• Colors
• Color names: red, black
• Hex: #000000, #ffffff
• RGB: rgb(255, 0, 0)
• RGBA: adds opacity
Best practice: Use hex or rgb, limit palette, maintain contrast

• Fonts
• font-family
• font-size
• font-weight
• line-height
Use rem for scalable text, add fallback fonts

Mini practice task:
Create a card layout with:
• Padding and margin
• Background color
• Font family
• Line height 😊

Double Tap ♥️ For More

🌐 Web Development Roadmap, Part 26

CSS Colors & Backgrounds

CSS colors and backgrounds help you control the appearance of webpage elements.

You can change text colors, background colors, background images, and more.

1. CSS Color Property

The color property changes the text color of an element.

<h1>Welcome to My Website</h1>
<p>Learning CSS is fun.</p>

h1 {
    color: blue;
}

p {
    color: red;
}

You can use predefined color names such as:

• red

• blue

• green

• black

• white

• orange

• purple

• gray

• pink

• yellow

2. HEX Colors

HEX stands for hexadecimal color notation.

It uses a # followed by six characters.

h1 {
    color: #FF0000;
}

p {
    color: #0000FF;
}

Some common HEX colors:

• Red: #FF0000

• Green: #00FF00

• Blue: #0000FF

• Black: #000000

• White: #FFFFFF

• Yellow: #FFFF00

3. RGB Colors

RGB stands for:

• R = Red

• G = Green

• B = Blue

Each value ranges from 0 to 255.

h1 {
    color: rgb(255, 0, 0);
}

This produces red.

Examples:

.red {
    color: rgb(255, 0, 0);
}

.green {
    color: rgb(0, 255, 0);
}

.blue {
    color: rgb(0, 0, 255);
}

4. RGBA Colors

RGBA adds an alpha channel to RGB.

The alpha value controls transparency.

It ranges from 0 to 1.

.box {
    background-color: rgba(255, 0, 0, 0.5);
}

Here:

• 1 = Fully opaque

• 0.5 = 50% opacity

• 0 = Fully transparent

5. HSL Colors

HSL stands for:

• H = Hue

• S = Saturation

• L = Lightness

Example:

h1 {
    color: hsl(0, 100%, 50%);
}

Another example:

p {
    color: hsl(240, 100%, 50%);
}

This produces blue.

6. Background Color

The background-color property changes the background of an element.

body {
    background-color: lightblue;
}

h1 {
    background-color: yellow;
}

You can use color names, HEX, RGB, RGBA, or HSL values.

7. Background Images

You can add images as backgrounds using background-image.

body {
    background-image: url("background.jpg");
}

This displays an image behind the webpage content.

8. Background Size

The background-size property controls how the background image fits inside an element.

body {
    background-image: url("background.jpg");
    background-size: cover;
}

Common values:

• cover — Covers the entire container.

• contain — Fits the entire image inside the container.

• auto — Uses the original image dimensions.

9. Background Repeat

By default, background images may repeat if they are smaller than their container.

body {
    background-image: url("pattern.png");
    background-repeat: no-repeat;
}

Other values:

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

10. Background Position

Controls where the background image appears.

body {
    background-image: url("background.jpg");
    background-position: center;
}

• center

• top

• bottom

• left

• right

11. Background Shorthand

You can combine multiple background properties into one declaration.

body {
    background: lightblue url("background.jpg") no-repeat center / cover;
}