7 Minutes
Last Updated: 25-Nov-2021


CSS SYNTAX

The very basic CSS syntax.

The very basic CSS syntax mean the structure of your CSS code in your css code editor.

Like writing your HTML code, writing your CSS code needs text editors like Notepad (PC) or TextEdit (In Mac). These apps are used for those beginners for writing their code but later on when you make some practice with these apps try to download Notepad++ or Sublime Text editor apps, they are good for you to write your any code including CSS code and these apps will give different identifiable colors for your every type of code.

With any code editor you prefer lets start our concept.

In CSS you need these three things to write your CSS code well, these are,

  • Selectors
  • Properties
  • Values
css syntax code formula

When writing a native CSS code you need to follow the above formula of writing CSS code. To be more clear lets see the above image,

The code in the image have the Selector, Property, and Value.

The Selector is the main part of the CSS code, it defines what selected HTML code would be affect.

After selector there is a property in the Declaration part. In the deceleration part there are property and value.

A property is the type on which the HTML element want you make, property in CSS mean giving everything what you want to do for your given selector element. for example you may want to give color, font size or background color for your selector so you should express those property in the property space (after selector)

A Value is the type on which you give a value to the selected property and selector (like red, green, black if your property was color or background color, and 15px, 25px etc are if your property was font size, padding, etc).

Last but not least, there are few things you must know when writing CSS code these are the
{ sign which must be located between the selector and property.
The : sign by which it must be inserted beween the property and value.
The ; sign by which it must be inserted beween the value and the } sign.
The }sign by which it must be inserted after the ; sign.

Lets see how it works with our code.


selector { property: value }

body {color: red;}

In the above code the body is as a selector, color is as a property and the red is the value.

To be make more clean code its better to write your CSS code like this,


body { 
  color: red;
  }

What mean the above code?
It mean that all the HTML contents that inserted inside the body tag (<body></body>) will have red color. When ever you have other CSS code you should put it below the code.

Types of Selectors

As I mentioned in the above code the selector is the type by which you want do anything with, without selector you can't do anything, mean you do not specify for what html data you want to give a style. CSS Selectors allow us to target a specific HTML elements with our style sheets.

In the next chapter you will learn more about CSS Selectors. To continue click next...



Share this page           

SUBSCRIBE to newsletter To get the most updated contents through your Email.



We've Recommended Articles for you