Estimated reading: 4 minutes 486 views

CSS Introduction – Style the Web with Cascading Style Sheets

Introduction – Why Learn CSS?

CSS (Cascading Style Sheets) is the language used to control the presentation of HTML elements. Without CSS, all web pages would look plain and unstyled. From layout to colors, fonts, animations, and responsive design—CSS makes the web beautiful and functional.

In this tutorial, you’ll learn:

What CSS is and how it works with HTML
Types of CSS and how to apply them
Common CSS properties with examples
How to style elements, layout pages, and make websites responsive
Best practices and tools

What is CSS?

CSS stands for Cascading Style Sheets. It is used to define the visual appearance and formatting of web documents written in HTML. CSS enables separation of content and design, promoting cleaner code and easier maintenance.

Basic Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

Output:
A blue-colored paragraph with 18px font size.

Types of CSS

Type	Usage
Inline CSS	Directly within the HTML tag using the `style` attribute.
Internal CSS	Inside a `<style>` tag in the `<head>` of the HTML file.
External CSS	In a separate `.css` file linked via `<link>` tag in HTML.

Common CSS Syntax

selector {
  property: value;
}

Example:

h1 {
  color: green;
  text-align: center;
}

Explanation:

h1 → selector
color, text-align → properties
green, center → values

CSS Selectors

CSS selectors define which elements to style.

Selector Type	Syntax	Example
Universal	`*`	`* {margin: 0}`
Element	`element`	`p {}`
Class	`.class`	`.menu {}`
ID	`#id`	`#header {}`
Grouping	`div, p`	`div, p {}`
Descendant	`div p`	`div p {}`

CSS Box Model

Every HTML element is a box made up of:

Content
Padding
Border
Margin

div {
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

CSS Styling Properties

Text Styling

p {
  font-family: Arial;
  font-size: 16px;
  color: gray;
  text-align: justify;
}

Box & Layout

.box {
  width: 300px;
  height: 200px;
  border: 2px solid blue;
  padding: 10px;
  margin: 20px auto;
}

Backgrounds

body {
  background-color: #f0f0f0;
  background-image: url('bg.jpg');
  background-size: cover;
}

Display & Positioning

div {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50px;
}

CSS Responsive Design

Use media queries to create mobile-friendly websites.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

CSS Best Practices

Use external stylesheets for scalability
Keep naming consistent with BEM or other methodologies
Avoid inline styles
Use shorthand properties
Optimize for performance and readability

Summary – CSS Introduction

CSS is the foundation of modern web design. With it, you control the look and feel of your HTML content. From fonts and colors to full responsive designs, CSS is what makes the web look good.

Key Takeaways:

CSS separates content from design
There are 3 main types: Inline, Internal, and External
Use selectors to target HTML elements
Style text, boxes, backgrounds, and layout
Make designs responsive with media queries

Next Step: Dive deeper into Flexbox, Grid Layout, and CSS Animations for advanced styling.

FAQs: CSS Introduction

What is the difference between Inline and External CSS?

Inline CSS is written within the HTML tag, while External CSS is in a separate .css file. External CSS improves maintainability and separation of concerns.

How do I link a CSS file to an HTML document?

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

Place this inside the <head> tag to apply external styles.

What is specificity in CSS?

Specificity determines which rule takes precedence when multiple rules target the same element. ID > Class > Element.

Can I use multiple CSS files in one HTML document?

Yes. Use multiple <link> tags to include multiple stylesheets.

What tools help with CSS development?

Some tools include:

Chrome DevTools for live editing
Preprocessors like SCSS/SASS
Frameworks like Bootstrap, Tailwind CSS

« Previous Next »

Share Now :