CSS Basics Syntax

Learn CSS Basics Syntax:

Let us first understand a few basics of Cascading style sheets abreviated as CSS. A CSS style is something similar to the image below: 

CSS properties illustrated

As we can see, the CSS property begins with a curly braces and ends the closing curly braces. Inside the curly braces we have three pairs:

  1. Color: blue;
  2. Font:arial;
  3. Align: left;

Have a closer look, every CSS property or style property is in a pair. And every pair is separated by a colon. We can nest several CSS properties in single pair of braces. But there can be a single pair of CSS property in a curly braces like below:

  • {align:right;} or
  • {color:orange;}

CSS Comment Tags: 

Like the styling of CSS properties above, CSS does have its own comment tags. Every CSS comment can be encoded as:

/* This is a CSS comment */ or

// This is a CSS comment

The difference between the two comments is that the second one is meant for a single line while the first one is meant for the entire text that goes inside the comment tags. 

CSS Selectors

CSS selectors are either the default selectors or the ones we create in the form of classes, divs and others. Let us see the example below:

h1{color:orange; font:arial;}

Well, from above example we can understand what CSS selectors are meant for. Similarly, we do need to wrap the content of our web pages’inside divs or simply put the blocks of text or images. These divs or blocks are associated with CSS properties to give them a different look and position. For example the website http://www.risenotes.com has put its links insdie boxes on the home page. These boxes are the actually different divs that are made to look different just because of the CSS properties asscociated with them. 

style boxes risenotes

In above example, all the four boxes have been placed together with the help of CSS divs and classes. We must remember that proper application of CSS is possible only through creation of classes and divs which divide a web document into segments; these segments are then associated with specific and particular styles. You can note that every box in the above scheme has a different color though the design of every box remains the same. 

The above is the magic of CSS properties used properly. If you like our work do share it on the social media and give us a credit out there.