CSS: Basics

Revision as of 17:22, 17 September 2013 by NeoMathematicalKid (talk | contribs) (Fixed: spelling, *major* syntax error. Added: abuse of code types)
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

Example:

selector { 
    property: value;
}


After every
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:

Example:

/* We can do */

selector{property: value;}

/* or we can use */

selector
{
property: value;
}
  • Note that /* */ mean comments and does not affect the css.

However, it is considered good practice to do it the first way instead of the second and last way(s); 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:

selector { 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;width:700px;height:80px;} will make the header look something like this

Header Text

The tag that was modified would be