Previous
Written by: rJTutorial Team | Last Updated:

CSS Syntax

Writing CSS is essentially like giving a set of design instructions to a web browser. The syntax of CSS (Cascading Style Sheets) is straightforward once you understand its "grammar." A CSS rule-set consists of a selector and a declaration block:

  • Selectors: Think of selectors as the "address" on an envelope. They tell the browser exactly which HTML elements you want to style.
    • Element selectors: Target all tags of a specific type (e.g., p targets all paragraphs).
    • Class selectors: Target elements with a specific class attribute (e.g., .btn-primary). These are reusable.
    • ID selectors: Target a single, unique element (e.g., #main-header). These should only be used once per page.
    • Attribute selectors: Target elements based on their attributes (e.g., [type="text"] targets text input fields).
Best Practice: Use classes (like .card) for styling instead of IDs (like #card-1). Classes are reusable and keep your code flexible, whereas IDs are highly specific and can make your CSS harder to override later.
  • Declaration Block: This is the container for your styles, wrapped in curly braces {}. It tells the browser, "Apply these specific looks to the element I just selected." Each instruction inside is called a declaration.
  • Properties: These are the specific features you want to change. CSS has hundreds of properties, such as color, margin, font-family, and border.
  • Values: Values are the specific settings for a property. For example, if the property is color, the value might be red or #ff0000.
Common Mistake: Forgetting the semicolon (;) at the end of a declaration. If you miss one, the browser might ignore the next line of code, leading to frustrating layout bugs.

Here's an example of the basic syntax of a CSS rule:

selector {
   property: value;
   property: value;
   /* Each line inside the braces is a declaration */
}

For instance, if you are building a blog and want all your paragraphs to be easy to read with a bit of extra space, you would use this rule: 

p {
   color: #333333;
   font-size: 1.1rem;
   line-height: 1.6;
}
Developer Tip: Use rem or em units for font sizes instead of px. This ensures your text scales correctly if a user changes their browser's default font size for accessibility.

Selectors can be combined to target specific elements more precisely. For example, if you want to style a "Submit" button differently than a standard link, you might use a class:

.submit-button {
   font-weight: bold;
   background-color: #28a745;
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
}

Or, to target a unique navigation bar that appears only once on your page, you might use an ID:

#main-navigation {
   border-bottom: 2px solid #eaeaea;
   display: flex;
   justify-content: space-between;
}
Watch Out: CSS stands for Cascading Style Sheets. If you write two different rules for the same element, the browser will use "specificity" to decide which one wins. IDs always beat classes, and classes always beat element selectors.

Additionally, CSS supports comments to help you (and your teammates) understand why certain styles were added. In standard CSS, comments must be wrapped in /* */.

/* Standard CSS Comment */
.hero-section {
   height: 400px; /* Set a fixed height for the landing image */
}
Common Mistake: Trying to use // for comments in a standard .css file. While // works in modern pre-processors like SASS or Less, it will cause errors in plain CSS and may stop your styles from loading.

This basic syntax forms the foundation of CSS. By mastering how to select elements and apply properties, you gain full control over the visual presentation of your web projects, from simple text tweaks to complex, responsive layouts.

Previous