DEV Community

Cover image for CSS Fundamentals
Yash Kalbhute
Yash Kalbhute

Posted on

CSS Fundamentals

# 🧩 CSS Fundamentals – Selectors, Properties & Basic Styling

**By <>DevSync

A perfect guide for beginners to understand how CSS works with real examples and outputs.

🔹 What is CSS?

CSS stands for Cascading Style Sheets. It defines the presentation of your HTML elements — colors, fonts, layouts, spacing, and more. While HTML gives structure, CSS brings it to life.

🔹 CSS Syntax & Structure 

selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

✅ Example: 

p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This styles all <p> elements with red text.

🔍 Output: 

<p style="color: red;">This is a red paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

🔹 Types of CSS

1. Inline CSS

CSS written directly inside an HTML tag using the style attribute.

<p style="color: green;">I’m styled inline!</p>
Enter fullscreen mode Exit fullscreen mode

2. Internal CSS

CSS written inside a <style> block in the <head> of the HTML document.

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

3. External CSS

Linked to an external .css file.

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

Inside styles.css:

p {
  color: orange;
}
Enter fullscreen mode Exit fullscreen mode

🔹 CSS Selectors

CSS selectors target HTML elements for styling. Here are the most common types:

Selector Example What it Selects
Universal * All elements
Type p All <p> tags
Class .highlight Elements with class="highlight"
ID #title Element with id="title"
Descendant div p All <p> inside <div>
Child div > p Direct <p> child of <div>
Adjacent Sibling div + p <p> immediately after <div>
General Sibling div ~ p All <p> siblings after <div>

🔹 Basic Styling Properties

Let’s style text and elements using core CSS properties.

📘 Text Styling 

h1 {
  color: purple;
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  text-align: center;
  text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

✅ Output: 

<h1 style="color: purple; font-size: 24px; text-transform: uppercase;">
  CSS is Awesome!
</h1>
Enter fullscreen mode Exit fullscreen mode

📘 Box Styling (Borders, Padding, Margin) 

.box {
  border: 2px solid black;
  padding: 10px;
  margin: 20px;
  background-color: #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

✅ Output: 

<div style="border: 2px solid black; padding: 10px; margin: 20px;">
  I am a styled box!
</div>
Enter fullscreen mode Exit fullscreen mode

📘 Color Styling 

body {
  background-color: #e0f7fa;
  color: #333;
}
Enter fullscreen mode Exit fullscreen mode

✅ Output:

This would make your webpage have a light cyan background and dark gray text.

✅ Summary

CSS gives your HTML structure style, spacing, layout, and personality. In this blog, you’ve learned:

  • What CSS is and how it works
  • 3 Types of CSS usage
  • Selectors to target elements
  • Basic styling like fonts, colors, borders, and spacing

🚀 Coming Up Next

In Blog 2(#) we’ll cover the CSS Box Model, layout systems like Flexbox & Grid, and how to position your elements effectively!

Author : Yash Kalbhute

✨ Brought to you by <>DevSync — Building powerful frontend knowledge, one line of CSS at a time.

Top comments (0)