CSS for Beginners: - javidacademy

CSS for Beginners

Are you just starting out with web development? If you’ve already learned a bit of HTML and are wondering how to make your website look nice — not just functional — then CSS is your next step.

In this beginner-friendly blog post, we’ll break down what CSS is, how it works, and how you can start using it today to style your first webpage.

What is CSS?

CSS stands for Cascading Style Sheets. It’s the language used to style HTML elements on a web page.

Think of HTML as the structure of your house — walls, windows, doors. CSS is the paint, the curtains, the furniture — everything that makes your house look good!

How CSS Works

CSS works by selecting HTML elements and applying styles to them. For example, you can change:

Colors
Fonts
Spacing (margins and padding)
Borders
Layouts (like positioning elements on the screen)

Three Ways to Use CSS

Inline CSS – inside the HTML tag htmlCopyEdit<p style="color: blue;">Hello, world!</p>
Internal CSS – inside a <style> tag in the <head> htmlCopyEdit<style> p { color: red; } </style>
External CSS – in a separate .css file (best practice!)
HTML file: htmlCopyEdit<link rel="stylesheet" href="style.css"> style.css file: cssCopyEditp { color: green; }

Basic CSS Syntax

cssCopyEditselector {
  property: value;
}

Example:

cssCopyEdith1 {
  color: purple;
  font-size: 36px;
}

This targets all <h1> headings and makes them purple and bigger.

Common CSS Properties

Property	What it Does
`color`	Changes text color
`background`	Sets the background color
`font-size`	Controls the size of text
`margin`	Adds space outside an element
`padding`	Adds space inside an element
`border`	Adds a border around an element
`text-align`	Aligns text (left, center, right)

Example: A Simple Styled Page

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>My First Styled Page</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial;
    }
    h1 {
      color: darkblue;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first styled page using CSS!</p>
</body>
</html>

Tips for Beginners

Start small: Focus on one or two properties at a time.
Use developer tools (like Chrome DevTools) to test styles live.
Practice by recreating simple websites.
Organize your CSS with comments and spacing for readability.

What’s Next?

Once you’re comfortable with the basics, look into:

CSS classes and IDs
Box Model
Responsive Design (media queries)
Flexbox and Grid

Final Words

Learning CSS is a game-changer for any web developer. It may seem tricky at first, but with consistent practice, you’ll soon be styling pages like a pro.

Stay tuned for the next post: “How to Use CSS Classes and IDs to Organize Your Styles”.