Mastering the Language: Understanding CSS Syntax
Learn the fundamental syntax of CSS, including how to structure rules, selectors, properties, and values. Understand the use of curly braces, colons, and semicolons to write valid CSS code.
CSS Syntax: The Rules of Style
Every language has rules, and CSS is no different. Understanding the basic syntax—the "grammar" of CSS—is the first step to becoming a web stylist. Think of it as a recipe for how to make your webpage look good.
The Rule: Selector and Declaration
A CSS rule consists of a selector, which specifies which HTML element to style, and a declaration block, which contains one or more declarations, enclosed in curly braces .
Declarations: Properties and Values
Each declaration is a key-value pair. The property is the style attribute you want to change (e.g., color), and the value is what you want to change it to (e.g., blue). They are separated by a colon :, and each declaration must end with a semicolon ;.
Comments: Explaining Your Code
Like in HTML, you can add comments to your CSS to make it more readable. CSS comments start with /* and end with */. The browser ignores everything inside a comment.
Practice Zone
Interactive Test 1: Drag & Drop
Arrange the code blocks to form a complete CSS rule that sets the color of the `h1` element 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 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`.