Difference between revisions of "CSS: Basics"

Line 27: Line 27:
 
<li>Font used generally in the entries and sidebar</li>
 
<li>Font used generally in the entries and sidebar</li>
 
</ul>
 
</ul>
 +
===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
 +
<code>#header{background:green;}</code>
 +
will make the header look something like this
 +
<div style="background:green;width:700px;height:80px;">Header Text</div>
 +
The tag that was modified would be
 +
<code><div style="background:green;width:700px;height:80px;" id="header">Header Text<div></code>
 
====Modifying the Background====
 
====Modifying the Background====
 
The two most common things done to the background of an AoPS User Blog are setting a background image or color.
 
The two most common things done to the background of an AoPS User Blog are setting a background image or color.
Line 35: Line 42:
 
<li>background-position</li>
 
<li>background-position</li>
 
</ul>
 
</ul>
===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
 
<code>#header{background:green;}</code>
 
will make the header look something like this
 
<div style="background:green;width:700px;height:80px;">Header Text</div>
 
The tag that was modified would be
 
<code><div style="background:green;width:700px;height:80px;" id="header">Header Text<div></code>
 

Revision as of 18:26, 21 January 2012

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.

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