CSS Syntax

CSS (Cascading Style Sheets) is used to describe the presentation of a document written in HTML or XML. It allows you to control the layout, colors, fonts, and other visual aspects of a webpage.

CSS Syntax Basics

CSS syntax consists of a set of rules used to apply styles to HTML elements. Each rule has two main parts:

Selector: Specifies the HTML element(s) you want to style.
Declaration Block: Contains one or more declarations enclosed in curly braces {}. Each declaration is a property-value pair separated by a colon :.

General Syntax

selector {
  property: value;
}

Examples

Basic Example
```
p {
  color: blue;
  font-size: 16px;
}
```
- Selector: p (applies to all <p> elements)
- Declarations:
  - color: blue; (text color is blue)
  - font-size: 16px; (font size is 16 pixels)
Class Selector
```
.highlight {
  background-color: yellow;
  font-weight: bold;
}
```
- Selector: .highlight (applies to elements with the class highlight)
- Declarations:
  - background-color: yellow; (background color is yellow)
  - font-weight: bold; (text is bold)
ID Selector
```
#header {
  text-align: center;
  padding: 20px;
}
```
- Selector: #header (applies to the element with the ID header)
- Declarations:
  - text-align: center; (text alignment is centered)
  - padding: 20px; (padding of 20 pixels around the content)
Compound Selector
```
h1, h2, h3 {
  font-family: Arial, sans-serif;
  margin-bottom: 10px;
}
```
- Selector: h1, h2, h3 (applies to <h1>, <h2>, and <h3> elements)
- Declarations:
  - font-family: Arial, sans-serif; (font family is Arial or sans-serif)
  - margin-bottom: 10px; (margin below the element is 10 pixels)
Attribute Selector
```
input[type="text"] {
  border: 1px solid gray;
  padding: 5px;
}
```
- Selector: input[type="text"] (applies to <input> elements with a type attribute of "text")
- Declarations:
  - border: 1px solid gray; (border is 1 pixel solid gray)
  - padding: 5px; (padding inside the input is 5 pixels)
Pseudo-Class Selector
```
a:hover {
  color: red;
}
```
- Selector: a:hover (applies to <a> elements when hovered over)
- Declarations:
  - color: red; (text color changes to red on hover)

Putting It All Together

Here’s how you might include CSS in an HTML document:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="header">Welcome</h1>
  <p class="highlight">This is a highlighted paragraph.</p>
  <input type="text" placeholder="Type here...">
  <a href="#">Hover over me</a>
</body>
</html>

CSS (styles.css):

#header {
  text-align: center;
  padding: 20px;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

input[type="text"] {
  border: 1px solid gray;
  padding: 5px;
}

a:hover {
  color: red;
}

In this example, the CSS styles are applied to the HTML elements based on the selectors and declarations provided.

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: CSS Introduction

Next: CSS Selector

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.