How To Work With CSS Syntax: The Correct Way!

Marilena

By Marilena

2 min read
Bookmark this post

Hey there! 😄 Welcome to my post about CSS syntax. The Cascading Style Sheet (CSS) is a language we use to style and design ✨ 🎨 our HTML documents. It is NOT a programming 💻 language, and it is not stand-alone; hence, CSS can only be used to accompany and enrich HTML.

Below we can see an outline as a way to analyze and understand the CSS syntax better. CSS is composed of various essential parts, and it is important to configure all of them to work effectively.

The first thing we have to do is target the part of the HTML document we want to style, and we do so by setting the selector .

We continue with the declaration we want to make. The declaration block is the area that contains the styles we want to apply. Each block can contain one or more declarations depending on our needs, and it is necessary to be nested, that’s why we put it inside {} curly braces.

Each declaration includes a CSS property name and a value. The property represents the characteristics we want to apply to an element and is always followed by a : colon, while the value is the assigned setting for the property and is always followed by a ; semi-colon.

🔖 In CSS, when we have more than one declarations we traditionally write them vertically to enhance readability. You can see that in the following example:

<p>
  Wishing you smooth sailing through your CSS adventures!
</p>
HTML
p {
  font-size: 14px;
  color: magenta;
  background-color: navy;
}
CSS

🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼

DigitalOcean Referral Badge
Tags

css

guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

Learn How to Select Only the CSS First Child

Front, Programming

The CSS nth-of-type Selector – How To Target Elements By Type

Front, Programming

What You Need to Know About CSS nth child Selector – A Practical Guide

Front, Programming

CSS Selectors nth-child VS nth-of-type And How To Use Them Correctly

Front, Programming

Coding Made Easy With CSS Selectors: An Ultimate Guide

Front, Programming

How to Center in CSS Using Different Ways

Front, Programming

What You Need to Know About CSS Color Methods

Programming

Most Common Typescript Errors and How to Solve Them

Front, Programming

Make Your Work Easier by Using Variables in CSS

Front, Programming

CSS Rainbow Text: How To Make Astonishing And Vibrant Fonts

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Back, Programming

Environment Variables 101: Secure Your Secrets Like a Pro

Subscribe to our newsletter

Dive into the Fun Side of Tech! Posts, News, and More Delivered to Your Inbox!

Intuit Mailchimp