CSS: Basics

Revision as of 19:47, 21 January 2012 by Knittingfrenzy18 (talk | contribs) (Syntax)
CSS
Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements

Syntax

As mentioned beforehand, the CSS syntax is

element {
property: value;
}

After evert property:value statement, there must be a semicolon, a ";". The last statement in an element does not require a semicolon, but it is a good practice to do so anyway.

CSS ignores whatever whitespace, so you can write CSS many ways:

element{property: value;}
element
{
property: value;
}
etc.

However, it is a good practice to do it the first way; it's more readable, and it's easy to organize and edit.

Also, if you are only applying one or two attributes to an element, you can write it this way:

element { property: value; }

Elements Usually Edited With CSS In AoPS User Blogs

The body element

In the AoPS User Blogs, the body element is most commonly modified for the:

  • Background Image/Color
  • Font used generally in the entries and sidebar

Styling the Div Element

When styling a div element, you have to specify which element you are styling. If you are working with a div, you can optionally put div in front (if you are working with a span, then put a span, etc.). To specify an element by id, put # then the id, and to specify an element by class, put a period (a .) then the class. For example #header{background:green;} will make the header look something like this

Header Text

The tag that was modified would be