CSS Beginner

CSS Basics and Syntax

CodingerWeb
CodingerWeb
50 views 30 min read

Introduction to CSS

CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls the visual presentation of web pages, including colors, fonts, layouts, and animations.

CSS Syntax

CSS consists of rules made up of selectors and declarations:

selector {
    property: value;
    property: value;
}

Three Ways to Add CSS

1. Inline CSS

<p style="color: blue; font-size: 16px;">This is blue text</p>

2. Internal CSS

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<head>
    <link rel="stylesheet" href="styles.css">
</head>

Basic CSS Properties

/* Text styling */
color: #333333;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;

/* Background */
background-color: #f0f0f0;
background-image: url("image.jpg");

/* Spacing */
margin: 10px;
padding: 15px;

Practice Exercise

Create a simple HTML page and style it with CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        p {
            color: #34495e;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This is my first styled webpage!</p>
</body>
</html>