Decorative Flower
Her Realm, Personal website and blog of Cole

Assuming you have a relatively simple page and only use each HTML tag once or want all the same properties applied (so all divs or paragraphs display the same behaviour), you can go ahead and and further modify them. However, a few HTML tags do not transfer into selectors quite seamlessly and some content is made up of multiple tags with different properties. You may also have been using workarounds/hacks to give achieve a certain look because you did not know that your HTML tag could be styled (especially if you are a CSS novice).

Links or anchors are slightly more complex as selectors because they have different states: link, visited, hover, and active. Chances are you specified properties for these in your body tag but each of these states is a different selector (technically a pseudo-class) as you can see below. The order of these states in CSS is important. Hover must follow link and visited and active must follow hover.

a:link {text-decoration:none; color: blue}
a:visited {text-decoration:none; color: purple}
a:hover {text-decoration:underline}
a:active {text-decoration:underline}

If you can recall links with no style, they are initially blue then turn purple after they are visited. When you hover over them, they stay blue. During their active state (while the link is clicked), it stays blue or purple depending on its inactive state (visited or unvisited). The above CSS will give a similar appearance, except that our links will not be underlined. You can customize your anchors with all sorts of background images or colours, sizes, text decorations, borders and other behaviours.

a:link
{
text-decoration: none;
background-color: #ffffff;
border: 1px solid #EE0000;
font-size: 10px;
font familiy: arial, verdana;
}

Produces an anchor like this: Link

Note that you can just use the a selector to apply properties to all states but this tends to give an unfinished and sloppy look, IMO.

Ordered and unordered lists (ol, ul tags) are made up of two parts – the list itseld and the individual list items (li tag). A basic list will be indented toward the right which is because of a left-margine applied to the ul/li. Using this as a selector, we can easily align the list flush with the rest of our content.

li
{
margin-left: 0;
}

Basic lists also use the default list marked of a disc (filled circle) which can be replaced by a number of other list markers or even images.

ul
{
list-style-image: url('image.gif');
}

The actual content of the list, list items, use the li tag. By default, these tags are displayed as block elements which means they show on a new line, for a vertical list. One can easily create a horizontal list by changing this:

li
{
display: inline;
}

Of course, the lists and list items can have many other characteristics.

A definition list (dl tag) has 3 parts – the list itself, the definition term (dt tag) and definition (dd tag). By default, the definition term is left aligned and the definition is indented, on a new line. We can indent the entire definition list and display the definition inline to change the appearance without altering the function. I also added a small margin between the term and definition to further distinguish them.

dl
{
margin-left: 20px;
}
dt
{
float: left;
padding-right: 25px;
}
dd
{
margin:0
}
Definition List
Is a list which shows and explains what different terms mean. It is displayed in a way that can be used for other purposes.

Headings such as h1, h2, h3 et cetera help to draw the eye (as well as search engines and other spiders) to important parts of the page. These may be page headings, sidebar headings, post titles, dates or important messages. Headings use a hierarchy structure in which h1 is more “important” than h2 which is more important than h3, so on and so forth until h6. Furthermore, headings will appear larger the more important they are (when unstyled), thus h1 will be largest with h6 being smaller. The basic heading tags only affect size, not colours or backgrounds which can really help to differentiate headings from the rest of your content. The default sizes do not work with all layouts, either which is why I found I didn’t use them frequently.

Below, I’ve added a small background image and adjusted the padding and font properties for a slightly more interesting heading. It’s a very basic idea of how headings can be improved and add thoughtful details to your page’s appearance.

h1
{
background: url('himages/flower.jpg') no-repeat;
padding-left: 25px;
font-style: italic;
color: #ac1ba6;
font-family:georgia;
}

Heading 1

Tables are made of several pages, similar to lists. Basic tables include table, tr (row) and td (cell) tags which would look something like this:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Cell 1 Cell 2
Cell 3 Cell 4

We can modify the behaviour of the table, its rows and cells with some css.

table
{
width: 400px;
border: 2px solid;
}
tr
{
height: 50px;
}
td
{
background: pink
}
Cell 1 Cell 2
Cell 3 Cell 4

Form fields can also be a bit tricky because forms involve all sorts input types including (but not limited to): radio fields, textareas, text inputs, checkboxes, drop down menus and (submit) buttons. Unfortunately, not all properties can be applied to all of these fields universally and the drop down menu includes several tags which can be individually styled. The rule of thumb I use is this:

I apply the same properties to “box” elements in a form: text, textareas and submit buttons.

textarea, submit, text
{
width: 100px;
background: white;
color: black;
font-family: georgia;
}

I generally do not apply styles to radiobuttons or checkboxes as these styles tend to only affect a small potion of space around the actual fields in some browsers. However, if you were to use input as a selector, it would affect text fields, radio buttons, checkboxes and any (submit) buttons.

input
{
background: black;
color: white;
}

Checkbox
Radio Button

Drop down menus are similar to lists. The overall selector is select and behaves a bit like our ‘box’ form elements:

select
{
width: 150px;
background: white;
color: black;
font-family: georgia;
}

The specific items within the menu use option tags. Below, I have givem them a style different from the overall menu. Different browsers handle this differently. In Firefox, the menu appears white with black text until I select it, when the options are white on black. In IE, there is a white border surrounding the unselected menu because the select surrounds the option. Separate styling can be useful if you want to spice up your menus.

select
{
width: 150px;
background: white;
color: black;
font-family: georgia;
}
option
{
background: black;
color: white;
}
Images, as square or rectangle elements (usually) are pretty easy to style. You can add borders, padding and alignment properties with ease as long as you know the selecting: img.
img
{
margin: 10px;
padding:5px;
border: 2px solid;
background: red;
}
flower
Skip to toolbar