Category Archives: css

CSS Tip: styling lists

To create horizontal tabs from a unordered list, you can style your list as follows:

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
display: inline;
}

The above creates the horizontal list without bullet points. The below will set the height of the bar and synchronizes the height of the list with the height of the bar.
Continue reading

CSS: Basic Project Structure

~/css
~/css/color.css
~/css/font.css
~/css/html.css
~/css/layout.css
~/css/style.css
~/imgs
~/imgs/logo_large.png
~/imgs/logo_small.png
~/js
./index.html
./index.php
.htaccess

color.css
All color information goes in the color.css file, so that it is easy to just change the color appearance of your site.

font.css
The font file contains font family and font size information. The font color goes in the color.css file.

html.css
The html file contains the styling of default HTML tags.

layout.css
The layout file contains the box structure of your site. You should be able to draw the site on a sheet of paper with solely boxes and a keyword for each box’s content.

style.css
The style file contains information for div tags like margins, padding, borders, list style. The style creates the rough look and feel for your site.