Mastering the Language: Understanding CSS Syntax
Understand the grammar of styling. Learn how selectors, properties, and values form the foundation of every stylesheet.
The Rule: Selector & Declaration Block
A CSS rule is the basic building block. It starts with a selector (like h1) to target an HTML element, followed by a declaration block enclosed in curly braces { ... }.
Declarations: Properties & Values
Inside the declaration block, you have one or more declarations. Each consists of a property (e.g., color) and a value (e.g., blue), separated by a colon :. Every declaration must end with a semicolon ; to separate it from the next one.
Comments: Explaining Your Code
You can add comments to your CSS to explain your code. Comments start with /* and end with */. Anything between these markers will be ignored by the browser. They are great for organization and notes.
Practice Zone
Interactive Test 1: Drag & Drop
Arrange the code blocks to form a complete CSS rule that sets the color of `h1` elements to blue.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Complete the CSS rule to change the background color of the body to `orange`.
Rellena los huecos en cada casilla.
body { background-: ; }
Practice Example: Code Editor
In the editor, write a simple CSS rule to set the font size of all `p` elements to `18px`.