CSS Syntax

by

CSS (Cascading Style Sheets) is the language used to style HTML documents. Understanding its CSS Syntax is crucial for designing visually appealing and user-friendly web pages.

1. Basic CSS Syntax

CSS follows a simple rule-based syntax consisting of selectors, properties, and values. Each rule set is enclosed within curly braces {}.

CSS Syntax

Example:

selector {
    property: value;
}
CSS

Example with Styling:

p {
    color: blue;
    font-size: 16px;
}
CSS

Breakdown:

  • p → Selector (targets <p> elements)
  • color → Property (defines text color)
  • blue → Value (sets text color to blue)
  • font-size → Another property (sets font size)
  • 16px → Value (sets text size to 16 pixels)

2. Types of CSS Selectors

Selectors define which HTML elements the styles apply to.

a. Element Selector

Targets all instances of an HTML element.

h1 {
    color: red;
}
CSS

b. Class Selector (.)

Targets elements with a specific class.

.my-class {
    background-color: yellow;
}
CSS

c. ID Selector (#)

Targets a unique element with a specific ID.

#my-id {
    font-weight: bold;
}
CSS

d. Group Selector (,)

Targets multiple elements at once.

h1, h2, h3 {
    font-family: Arial, sans-serif;
}
CSS

e. Descendant Selector (whitespace)

Targets elements nested within another element.

div p {
    color: gray;
}
CSS

3. CSS Comments

Comments are used to explain code and are ignored by browsers.

/* This is a comment */
CSS

4. CSS Units

Values in CSS can be expressed in different units:

  • Pixels (px): Fixed size (e.g., 16px)
  • Relative (em, %, rem): Responsive and scalable
  • Viewport (vw, vh): Based on screen size

5. CSS Import Methods

a. Inline CSS (Applied directly to an element)

<p style="color: blue; font-size: 16px;">Hello World</p>
HTML

b. Internal CSS (Inside <style> tags in <head>)

<style>
p {
    color: blue;
}
</style>
HTML

c. External CSS (Linked via a separate file)

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

6. CSS Specificity & Importance

When multiple rules apply, CSS follows specificity:

  1. Inline styles (style="") – Highest priority
  2. ID Selectors (#id) – Higher specificity
  3. Class Selectors (.class) – Moderate specificity
  4. Element Selectors (h1, p) – Lower specificity

Use !important to force a style (use sparingly):

p {
    color: red !important;
}
CSS

Conclusion

Mastering CSS syntax is essential for web design. By understanding selectors, properties, values, and specificity, you can create stunning and responsive websites. Experiment with different CSS rules to improve your styling skills!