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
guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

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

Front, Programming

Learn How to Select Only the CSS First Child

Front, Programming

Grayscale Backdrop Filter: A Useful Tool To Make Grayish Backgrounds

Front, Programming

How To Calculate CSS Line Height

Front, Programming

Coding Made Easy With CSS Selectors: An Ultimate Guide

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Front, Programming

CSS Box Sizing – Better Implementations, Less Headaches

Front, Programming

What Is the CSS Box Model in Simple Terms

Front, Programming

CSS Text Decoration In Action: A Powerful Guide

Front, Programming

HTML Formatting Elements Made Simple: With Easy And Practical Examples

Front, Programming

How To Be Creative With Different CSS Border Styles

Front, Programming

What You Need to Know About CSS Color Methods

Subscribe to our newsletter

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

Intuit Mailchimp