CSS Syntax

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Syntax

CSS actually contains some set of rules which we need to apply to write the syntax

For example, a person must have a head to wear a cap, and he needs legs to wear a pant. Similarly css also needs some elements to apply the styles. Elements means the HTML elements

Let's look at how we can apply the styles in css


CSS syntax generally contains 2 main properties namely, selector, declaration block.

What is a Selector in CSS?

CSS selector is the element which we want to apply the style. Like HTMLelements(p, h1...h6, li, ul, etc..)

For example, we want change the color of a paragraph. See the below code


The above HTML code prints the paragraph with "Learning CSS at Tutorials Academy is super easy!!!!", without any color. Just a pure text with default black color. Now we want to change it's color, or we want to see the text to be printed with some different color. How do we do that?

Let us see how we can do that using CSS


The above css code will target HTML paragraph element and style that p element with red color and also makes it alignment to center

This is how CSS works with HTML. In the above code the paragraph selector p is a selector in CSS syntax, and the css style we wrote inside the <style> is called declaration which contains a property and value. Here the property is color and the value is red

CSS Comments

Comments are used to explain what your code does, and gives you complete documentation about the code so that anyone can understand it clearly. Comments are ignored by browsers.

Please note that, comments in the code, are the part of the code but its not code. Its like documentation about the code

CSS comments start with /* and end with */. Comments can also span multiple lines:

Example

If you notice that, the stuff inside /* */ called single line CSS comments. This allows you to enter notes into CSS that will not be interpreted. Although, its not a great comment it gives just a basic understanding of how CSS comments are created


Try It Now

NOTE:

Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.





Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM