CSS Syntax with Examples

Credit: Image by Freepik

CSS (Cascading Style Sheets) is a powerful language used to style and format the visual appearance of HTML elements on a web page. Understanding CSS syntax is crucial for creating and applying styles effectively. Let's explore the basic syntax along with examples:

Selector

The selector targets HTML elements that you want to style. Here's an example:

h1 {
  color: blue;
}

In the above example, the selector is h1, which targets all the <h1> elements on the page. The style rule sets the text color to blue.

Property and Value

Each CSS rule consists of one or more properties and their corresponding values. Here's an example:

h2 {
  font-size: 20px;
  color: #ff0000;
}

In the above example, the font-size property sets the size of the text, and the color property sets the text color to red (#ff0000).

Declaration Block

A declaration block is a collection of property-value pairs enclosed within curly braces. Here's an example:

h3 {
  font-weight: bold;
  text-align: center;
  color: green;
}

In the above example, the declaration block contains three property-value pairs, including font-weight, text-align, and color.

Comments

Comments in CSS are used to add descriptive notes that are not interpreted as styles. Here's an example:

/* This is a CSS comment */
h4 {
  text-decoration: underline;
}

In the above example, the comment is enclosed within /* */. It provides additional information without affecting the styles.

Conclusion

Understanding CSS syntax is essential for creating and applying styles to HTML elements. The selector targets specific elements, while the property-value pairs define the desired styles. Declaration blocks group multiple styles together, and comments allow you to add explanatory notes. With a solid grasp of CSS syntax, you can create visually appealing and well-structured web pages.

CSS Selectors

CSS selectors are used to target specific HTML elements and apply styles to them. They play a fundamental role in styling web pages. Let's explore some commonly used CSS selectors:

1. Element Selector

p {
  color: red;
}

2. Class Selector

.highlight {
  background-color: yellow;
}

3. ID Selector

#header {
  font-size: 24px;
}

4. Attribute Selector

a[target="_blank"] {
  text-decoration: none;
}

5. Descendant Selector

ul li {
  list-style-type: square;
}

6. Child Selector

div > p {
  font-weight: bold;
}

7. Pseudo-class Selector

a:hover {
  color: blue;
}

These are just a few examples of CSS selectors. Experiment with different selectors to target and style specific elements on your web page. CSS selectors provide a powerful mechanism to control the appearance of HTML elements.

Types of CSS Selectors

CSS provides different types of selectors to target specific HTML elements. Understanding these selector types will give you more control over styling your web pages. Let's explore some important types of CSS selectors:

1. Universal Selector

* {
  margin: 0;
  padding: 0;
}

2. Class Selector

.highlight {
  background-color: yellow;
}

3. ID Selector

#header {
  font-size: 24px;
}

4. Element Selector

p {
  color: red;
}

5. Descendant Selector

ul li {
  list-style-type: square;
}

6. Adjacent Sibling Selector

h2 + p {
  font-style: italic;
}

7. Attribute Selector

a[href^="https://"] {
  color: blue;
}

These are just a few examples of different types of CSS selectors. Each selector type has its own purpose and can be used in combination to target specific elements or groups of elements. Experiment with these selectors to achieve the desired styling effects in your web pages.