CSS Syntax

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

CSS Syntax key components

• 1. Selector: Specifies which HTML element(s) the styles apply to. Example: p, .class, #id.
• 2. Property: Defines the aspect of styling (e.g., color, font-size).
• 3. Value: Specifies the value of the property. Example: blue, 16px.

Here are the keypoints of CSS syntax:

1. Selectors

• Selects the HTML elements to apply styles to.
• Common selectors include:
  • Type selector: targets elements by tag (e.g., p, h1).
  • Class selector: targets elements by class (e.g., .class-name).
  • ID selector: targets a specific element by ID (e.g., #id-name).
  • Attribute selectors: target elements with specific attributes (e.g., input[type="text"]).

2. Declaration Block:

• Encased in curly braces {}.
• Contains one or more declarations which apply styles.
• Each declaration includes:
  • Property: what style feature you are changing (e.g., color, font-size).
  • Value: the specific setting for that property (e.g., blue, 16px).
• Multiple declarations are separated by semicolons (;).

3. Selectors Combinations:

• Comma-separated selectors: Applies the same styles to multiple elements.
• Descendant selector: Targets elements nested within another
• Child selector: Targets direct children only

4. Comments:

• Comments are written inside /* */

5. Units:

• Properties often require units (e.g., px, %, em, rem)

6. Shorthand Properties:

• margin: 10px 5px 15px 0; /* Top, Right, Bottom, Left */

7. Inheritance:

• Some properties are inherited from parent elements (e.g., color, font-family).

8. Specificity:

• The order of applying styles is determined by the specificity of selectors (ID > Class > Type).

9. Important Rule:

• You can override other rules using !important.

10. Media Queries:

• Allows for responsive design by applying styles based on screen size or device