CSS Styling Guide for Beginners

By Admin_CodeByHer

CSS Styling Guide for Beginners

Introduction
CSS, or Cascading Style Sheets, is used to style HTML elements and make web pages visually appealing. While HTML provides the structure, CSS controls the look, layout, and design of your website. This beginner-friendly guide will teach you the basics of CSS and how to apply it to your first web page.

1. What Is CSS?

CSS allows you to:

Set colors, fonts, and text styles
Create layouts and positioning
Add spacing, borders, and backgrounds
Implement responsive design for different devices

Example:

<p style="color: blue; font-size: 18px;">Hello, CodebyHer!</p>

Here, style is an inline CSS, directly applied to the element.

2. Ways to Add CSS

There are three ways to add CSS to your webpage:

a) Inline CSS

Applied directly to an HTML element using the style attribute.

<h1 style="color: red; text-align: center;">Welcome</h1>

Pros: Quick for small changes
Cons: Not efficient for larger projects

b) Internal CSS

Placed within a <style> tag in the <head> section.

<head>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
        }
    </style>
</head>

Pros: Useful for single-page projects
Cons: Hard to maintain for multiple pages

c) External CSS

Stored in a separate .css file and linked to the HTML page.

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

style.css example:

body {
    background-color: #fff;
    font-family: 'Helvetica', sans-serif;
}
h1 {
    color: #333;
}
p {
    font-size: 16px;
}

Pros: Best for large projects and multiple pages

3. CSS Selectors

Selectors are used to target HTML elements for styling.

a) Element Selector

Targets HTML tags directly.

p {
    color: green;
    font-size: 18px;
}

b) Class Selector

Targets elements with a specific class.

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

c) ID Selector

Targets a single element with a unique ID.

#header {
    font-size: 24px;
    font-weight: bold;
}

4. Common CSS Properties

Text and Fonts

color: Text color
font-size: Size of text
font-family: Type of font
text-align: Alignment (left, right, center)

Backgrounds

background-color: Set a background color
background-image: Add an image background
background-size: Cover, contain, or repeat

Spacing

margin: Space outside an element
padding: Space inside an element

Borders

border: Width, style, and color
border-radius: Rounded corners

Example:

.box {
    background-color: #e0e0e0;
    padding: 20px;
    margin: 10px;
    border: 2px solid #333;
    border-radius: 10px;
}

5. CSS Box Model

Every element in CSS is a box, consisting of:

Content – Text or image inside the box
Padding – Space between content and border
Border – The edge around the padding
Margin – Space outside the element

Visual Representation:

[ Margin ]
[ Border ]
[ Padding ]
[ Content ]

Understanding the box model helps control spacing and layout effectively.

6. Positioning and Layout

Position Property

static – Default position
relative – Moves relative to original position
absolute – Positioned relative to nearest parent
fixed – Stays fixed on screen
sticky – Sticks based on scroll position

Display Property

block – Full-width element
inline – Inline element
inline-block – Inline element with block properties
flex – Flexible box layout for modern designs

7. Colors in CSS

Colors can be applied using:

Hex codes: #ff0000
RGB: rgb(255,0,0)
RGBA: rgba(255,0,0,0.5) (with transparency)
Named colors: red, blue, green

h2 {
    color: #ff6600;
}

8. Pseudo-classes

Pseudo-classes add interactivity to elements:

:hover → Changes style on mouse hover
:focus → Applies style when input is active
:first-child → Targets the first child element

Example:

button:hover {
    background-color: darkblue;
    color: white;
    cursor: pointer;
}

9. CSS Tips for Beginners

Use external CSS for maintainability
Learn class and ID selectors for targeting elements
Use DevTools in browsers to experiment with styles
Start with flexbox for layout design
Organize your CSS with comments

10. Example: Simple Styled Page

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <h1>Welcome to My Styled Page</h1>
    </header>
    <main>
        <p>This page demonstrates basic CSS styling for beginners.</p>
        <button class="button">Click Me</button>
    </main>
</body>
</html>

CSS (style.css):

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    text-align: center;
    margin: 0;
    padding: 0;
}.header {
    background-color: #4caf50;
    color: white;
    padding: 20px;
}.button {
    background-color: #008cba;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}.button:hover {
    background-color: #005f73;
}

Conclusion

CSS is an essential skill for web developers. By learning how to style text, layouts, colors, and interactive elements, beginners can transform simple HTML pages into visually appealing websites. Understanding CSS fundamentals, combined with practice and experimentation, lays the foundation for advanced styling techniques and responsive design.

No Comments
March 17, 2026