CSS Introduction

CSS CODES & EXAMPLES

Introduction to CSS

Learn how to style HTML webpages using CSS. Explore selectors, colors, fonts, spacing, borders, backgrounds and the CSS box model with practical examples.

← HTML Forms Start Learning →

What is CSS?

Cascading Style Sheets

CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of HTML elements on a webpage.

HTML creates the structure, while CSS controls the design and presentation.

CSS Syntax

Basic CSS rule structure

syntax.css

selector {
  property: value;
}

Example:

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

Inline CSS

CSS directly inside an HTML element

inline-css.html

<h1 style="color: blue;">
  Welcome to CSS
</h1>

Internal CSS

CSS inside the HTML head section

internal-css.html

<style>

h1 {
  color: blue;
}

p {
  font-size: 18px;
}

</style>

External CSS

Connect a separate CSS file

index.html

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

Element Selector

Select HTML elements by tag name

element-selector.css

h1 {
  color: darkblue;
}

p {
  color: #555;
}

Class Selector

Select elements using a class

class-selector.css

.title {
  color: blue;
  font-size: 30px;
}

ID Selector

Select an element using an ID

id-selector.css

#main-title {
  color: green;
  font-size: 32px;
}

CSS Colors

Change text and element colors

colors.css

h1 {
  color: blue;
}

p {
  color: #333333;
}

.box {
  background-color: rgb(230, 240, 255);
}

CSS Background

Style element backgrounds

background.css

body {
  background-color: #f4f8fc;
}

.card {
  background-color: white;
}

.hero {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

CSS Fonts

Control font family and appearance

fonts.css

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 40px;
  font-weight: 700;
}

p {
  font-size: 16px;
}

CSS Text

Control text alignment and decoration

text.css

h1 {
  text-align: center;
}

p {
  line-height: 1.7;
  letter-spacing: 0.3px;
}

a {
  text-decoration: none;
}

CSS Borders

Add borders to elements

borders.css

.card {
  border: 1px solid #dddddd;
  border-radius: 12px;
}

.box {
  border: 2px solid blue;
}

Margin

Create outside spacing

margin.css

.box {
  margin: 20px;
}

.card {
  margin-top: 30px;
  margin-bottom: 20px;
}

Padding

Create inside spacing

padding.css

.card {
  padding: 25px;
}

.button {
  padding: 12px 20px;
}

Width and Height

Control element dimensions

dimensions.css

.box {
  width: 300px;
  height: 200px;
}

.container {
  width: 100%;
  max-width: 1200px;
}

CSS Box Model

Understand content, padding, border and margin

box-model.css

* {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #ddd;
  margin: 20px;
}

CSS Button

Create a modern button

button.css

.button {
  display: inline-block;
  padding: 12px 22px;
  background: #1769d5;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.button:hover {
  background: #0d4e9f;
}