CSS Styling Basics

What Is CSS?

CSS (Cascading Style Sheets) is the language that controls how your webpage looks. HTML builds the structure. **CSS makes it beautiful.**

Your First CSS Rule

Here’s a simple CSS example that changes text color and size: 

h1 {
  color: red;
  font-size: 40px;
}

Using CSS Inside HTML

You can write CSS inside a <style> tag:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: lightblue;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <p>This is styled text!</p>
</body>
</html>

Styling Colors

Named Colors: 
color: red;
color: green;
color: blue;
HEX Values: 
color: #ff0000;
color: #00ff00;
color: #0000ff;
RGB Values: 
color: rgb(255, 0, 0);
color: rgb(0, 255, 0);
color: rgb(0, 0, 255);

Background Colors

body {
  background-color: #202020;
}

Fonts & Text Styling

Font Size

p {
  font-size: 18px;
}

Font Family

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

Text Alignment

p {
  text-align: center;
}

Borders

div {
  border: 2px solid #64b5f6;
  padding: 10px;
}

The padding adds space inside the border.

Margins & Spacing

div {
  margin: 20px;
}

Classes vs IDs

Class (used many times)

.button {
  background: #64b5f6;
  padding: 10px;
}

ID (used once)

#header {
  font-size: 40px;
}

Inline CSS (Avoid it)

This works, but it's messy and not recommended: 

<p style="color: red;">Bad practice</p>

What CSS Lets You Do

What’s Next?

In the next tutorial, you'll learn how to use variables in Batch files to make your scripts smarter.