Cascading style sheets (css) are used to seperate the look of a web page from the content of a web page.
Within wordpress, every theme has a style.css file, which you can see in the build in editor by logging in and going to "Appearance" → "Editor"
The style sheet is what loads by default.
In the below sections:
- classname can be just about any word
It denotes a custom style class. - attribute references an html attribute
It denotes something to be tweaked
More on attributes below - value is the value to set attribute to
With the style sheet you will see all kinds of things, but the styling information itself will be in one of the following formats:
General class names
.classname {
attribute: value;
attribute: value;
}
This is a very general method of setting information about tags in html.
In this case, any tag which had class="classname" placed within it would have its listed attributes set to the listed values, provided that the tag supported those attributes and values.
Setting attributes by ID
#idname {
attribute: value;
attribute: value;
}
# denotes an id. By convention, there should only be one of any id per page.
Adding id="idname" within an html tag would give the listed attributes the listed values.
Setting defaults for html tags
htmltag {
attribute: value;
attribute: value;
}
By using an html tag, every instance of the given tag on a page will have the listed attributes set to the listed value.
Most themes will have one of these for the body tag as well as various other tags.
Tweaking items within a classed tag
.classname htmltag {
attribute: value;
}
This type of entry will set the listed attributes to the listed values for the given html tag when it is included within another tag that has the specified class.
For example, an entry such as:
.red-warn tr td {
color: #FF0000;
font-weight: bold;
}
would have the words "some content" set to be bold and red in the following table:
<table class="classname">
<tr><td>some content</td></tr>
</table>
Notice that we placed multiple html tags after the class name. This can get unwieldy, but it can be useful in specifying exactly what to tweak and when.
Atahualpa Users
In atahualpa, text colors and such can generally be edited within the atahualpa theme options rather than within the style.css file.
Inline styling
In many cases, if you just want to set a style directly, you can add the following with an opening tag:
style="attribute: value; attribute: value;"
Doing so will explicitly set the given attribute to the given value.
Common attributes and values
While the list is far too expansive to cover here, some of the most commonly useful attributes and values are listed below.
- color: #RRGGBB;
This sets the color of an item to the specified red/green/blue index. You can use #RGB as well for a smaller, more reliable set of colors. - font-size: X%;
This sets the font size to be a percentage of the normal font size.
Setting X to a number under 100 decreases the font size
Setting X to a number over 100 increases the font size - font-weight: weight;
Specifies the font weight
weight: normal bold etc. - background-color: #RRGGBB;
Sets the background color of an item to the specified red/green/blue index. - border: Xpx lineType #RRGGBB;
Sets the border of an item to be X pixels wide, have the given lineType, and the color specified.
lineType can be: solid dashed dotted - margin-left: Xpx;
margin-right: Xpx;
margin-top: Xpx;
margin-bottom: Xpx;
These set the various margins to be X pixels wide.
A margin is outside of the containing area of an item. - padding-left: Xpx;
padding-right: Xpx;
padding-top: Xpx;
margin-bottom: Xpx;
These set the various paddings to be X pixels wide.
A padding is inside of the containing area of an item. - float: where;
Used for block elements such as images
Tells it to float to a particular area and have other stuff displayed next to it instead of after it.
where : left right center top bottom (and more) - text-decoration: decoration;
Sets decorations to text
decoration: none strikethrough underline etc.
As noted, there are a lot of other html attributes out there.
Additionally, different browsers don’t always support all of the same attributes and/or values or show them in the same way.
If you want to edit a particular attribute, do a search for the attribute and the word css.
If you want information on what attributes are valid for particular html tags, do a search for the tag name and the words "css attributes".
