CSS Syntax Overview
Syntax Introduction
This quick guide to CSS Syntax will help you understand how CSS works.
Basic Structure
Basic CSS Syntax Structure
CSS rules are made up of selectors and declaration blocks.
A selector specifies which HTML elements to style, and a declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property and a value, separated by a colon.
CSS Selectors
Basic CSS Selector Information
Element Selector: Targets HTML elements directly. For example, using the ‘p’ selector styles all ‘<p>’ elements.
Class Selector: Targets elements with a specific class. It uses a dot (‘.’) followed by the class name, like ‘.class-name’.
ID Selector: Targets an element with a specific ID. It uses a hash (‘#’) followed by the ID name, such as ‘#id-name’.
CSS Properties and Values
Basic CSS Properties and Values Information
CSS properties define what aspect of the element to style, and values specify the style itself.
For example, the property ‘color’ could have a value of ‘red’, making the text red.
CSS Multiple Declarations
Basics of Multiple Declarations in CSS.
You can include multiple declarations within a rule by separating them with semicolons.
This allows you to style multiple aspects of an element within a single rule.
CSS Grouping Selectors
Basics of Grouping Selectors in CSS.
Grouping selectors allows you to apply the same styles to multiple elements.
Separate the selectors with commas. For example, ‘h1, h2, h3’ will apply the same styles to all ‘<h1>’, ‘<h2>’, and ‘<h3>’ elements.
CSS Comments
Basics of using Comments in CSS.
CSS comments help explain your code or temporarily disable parts of your CSS. Comments are enclosed within ‘/*’ and ‘*/’.