Home 〉 CSS Tutorials 〉 CSS Syntax and Selectors Explained with Examples | Beginners Guide

CSS Syntax and Selectors - Complete Guide with Examples !

CSS Syntax and Selectors - Complete Guide with Examples !

Confused about how CSS targets HTML elements?

This guide demystifies CSS syntax and selectors, explaining how to write rules that apply styles to specific elements. Learn about different types of selectors like class, ID, and attribute selectors, and see practical examples that illustrate their usage.

Introduction

CSS (Cascading Style Sheets) is used to style HTML elements on a web page. To understand CSS, the first thing you need to learn is its syntax and how to use selectors to apply styles.

CSS Syntax

A CSS rule is made of:

  • Selector - the HTML element you want to style.
  • Declaration Block - a set of CSS rules inside curly braces '{}'.
  • Property - the style attribute you want to change (e.g., 'color', 'font-size').
  • Value - the value assigned to the property (e.g., 'red', '16px').

Basic Example

Example 📄

p {
color: red;
font-size: 16px;
}

Meaning:

  • 'p' is the selector (targets all '<p>' tags).
  • 'color' is the property.
  • 'red' is the value.
  • Each rule ends with a **semicolon** ';'.

CSS Declaration

Example 📄

selector {
property: value; /* one declaration */
another-property: value;
}

Important characters:

  • '{}' - declaration block
  • ':' - separates property and value
  • ';' - ends each declaration

CSS Selectors

CSS selectors is used to target elements for styling.

For Example:

Example 📄

h1 {
color: blue;
}

This styles all '<h1>' headings.

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

label {
background-color: green;
}
.para {
background-color: yellow;
}
#para1 {
background-color: pink;
}

</style>
</head>
<body>

<label>This is a HTML label tag</label> <br>
<p class="para">This is a Paragraph</p>
<p id="para1">This is a Paragraph</p>

</body>
</html>

output 📌


This is a Paragraph

This is a Paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Here, We have 5 different types of CSS Selector. Which are as follows:

Additional Related Topics

We have covered linking and styling of CSS in our detailed blog post CSS Inline, Internal & External Styling | Add CSS to HTML Easily

Comments in CSS

Example 📄

/* This is a CSS comment */

Inline CSS (Not recommended for large projects)

Example 📄

<p style="color: green;">Inline styled paragraph</p>

Internal CSS

Example 📄

<style>
body {
background-color: lightyellow;
}
</style>

External CSS (Best Practice)

Example 📄

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

Conclusion

Understanding CSS syntax and selectors is the first step to mastering web design. By learning how to target elements correctly using element, class, ID, and group selectors, you'll be able to apply styles efficiently across your website. Keep your syntax clean, always close your declarations properly, and use comments to stay organized.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

Can I use multiple selectors in one rule?

Yes! Use a comma to separate them. Example: 'h1, h2, p { margin: 10px; }'

What's the difference between ID and class selectors?

IDs are unique and used once per page. Classes can be reused on multiple elements.

Are semicolons required after each property?

Yes, every CSS declaration should end with a semicolon ';'.

Can I mix ID and class selectors?

Yes. Example: '#header.button {}' targets an element with both 'id="header"' and 'class="button"'.

Previous Post Next Post