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.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us