Difference between revisions of "CSS: Basics"
(Fixed: spelling, *major* syntax error. Added: abuse of code types) |
Nikoislife (talk | contribs) m (→Elements Usually Edited With CSS In AoPS User Blogs) |
||
Line 50: | Line 50: | ||
<div style="background:green;width:700px;height:80px;">Header Text</div> | <div style="background:green;width:700px;height:80px;">Header Text</div> | ||
The tag that was modified would be | The tag that was modified would be | ||
− | <code type="html"><div id="header">Header Text<div></code> | + | <code type="html"><div 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. |
Revision as of 00:49, 2 April 2019
CSS |
Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements |
Contents
[hide]Syntax
As mentioned beforehand, the CSS syntax is
Example:
selector { property: value; }
property:valuestatement, 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
The tag that was modified would be
Header Text
Modifying the Background
The two most common things done to the background of an AoPS User Blog are setting a background image or color. Some of the most commonly used properties for a background:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size
To use them all together, use the shorthand syntax:
background: color position/size repeat attachment image;
Warning:
You cannot omit the slash (/) between the position and size values in the background shorthand syntax, and the size value should always come after the property value.
Don't worry about "breaking the rules"; this doesn't affect the way CSS thinks about things, and it saves you much code.
Text formatting
There are some properties used for formatting text. The most commonly used properties are:
- text-align
- text-transform
Text-align is used for aligning text horizontally. Text-transform is usually used for capitalizing the text.