Did you find this useful?
Socialize it today.


CSS Basic Syntax

Monday, March 05, 2012

The syntax used to create CSS is different than that used when developing HTML code. CSS syntax is easy to learn, once you understand its rules and structure. CSS consists of three parts:



selector

The selector is the (X)HTML element that you want to style. However, the selector can also reference a class or an ID which will be covered in the next few articles. The property is the style attribute you want to change. Each property has a value. Each selector can have multiple properties, and each property within that selector can have multiple values. The property and value are separated with a colon and contained within curly braces. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. Here is another example:



p { color:red; text-align:center; font-family:“Century Gothic”, Arial, serif; }


You can also write CSS code in this manner, which may be easier for you to read. Either style is acceptable



p
{
color:red;
text-align:center;
font-family:“Century Gothic”, Arial, serif;
}


CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/". Here is an example.



/*This is a comment*/
p
{
color:red;
text-align:center;
font-family:“Century Gothic”, Arial, serif;
}


Inheritance

When you nest one element inside another, the nested element may inherit some of the properties assigned to the parent element, unless you modify the child element's values independently. For example, if you assign a font style to the body element, all of the text within this element and text within child elements, such as a paragraph element will inherit this assignment unless you declare another font style for a specific nested element. If you want to apply the font Arial to the body, but then apply Verdana to paragraph elements, you will need to add styling to both elements.



body {font-family:Arial;}
p {font-family:Verdana;}

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference CSS: The Missing Manual