Chapter 4 - More CSS
This chapter is about creating your own CSS standards, it's very important to have standards on your website so that people can connect all your websites different areas as your website and not something else.
I will start with a text standard. A good font is one of the most important things on your site, you must recognize this or your visitors wont read the content of your website. Example for good fonts are: Lucida Grande and Verdana. I prefer Lucida Grande but I put Verdana as my second choice so that people who don't have Lucida Grande in their system will see the text as Verdana. You might want to use another font for topics and sub-topics. I usually use Helvetica as my first choice and Arial as my second. Example of bad fonts are Times or Times new roman, these fonts are made to look good on paper while fonts like Verdana look good on monitors. The reason they don't look good on screens is that they have Serifs.
To create a font standard for your webpage, we use CSS.
h1 {
font-style: helvetica, arial;
}
p {
font-style: lucida grande, verdana;
}
Notice that I didn't put a dot before the name, that is because hits is not a regular CSS class, you can call it a global class. You can make most HTML tags into global classes. In this instance, I've made a global class for "h1" and "p". And I feel I need to tell you that you can't change the name of a global class. global classes connect to the tags using their name. This particular CSS code sets the font of all paragraph tags (<p></p>) to Lucida grande as first choice and Verdana as second choice. As you might have guessed it also sets the font of all header 1 tags (<h1></h1>) to Helvetica as first choice and Arial as second choice.
You should also have color and size standard. For instance, if you have a menu with links to different parts of you site. The menu should always be the same size and in most cases have the same color. But this is not a rule, there are creative methods to break these rules. Consider them to be a guideline, if you feel that you have a great idea that would contradict them, feel free. But remember, usability and clarity must be prioritized over creativity. A good designer should be able to succeed with both.
Now experiment with standard and create a standard for your site. remember, most html tags could be used. Here are some more examples:
img {
border 1px solid #000000;
}
That creates a 1px solid border which is black around every image.
h1 {
font-family: helvetica, arial;
font-size: 16px;
color: #333333;
}
h2 {
font-family: helvetica, arial;
font-size: 13px;
color: #333333;
}
p {
font-family: lucida grande, verdana;
font-size: 12px;
color: #333333;
}
This is a very simple but complete text standard. I would use <h1></h1> as my topics and <h2></h2> for my subtopics leaving <p></p> for the text. but hey? what's with the color attribute in the css? the "color: #333333;" defines the text color with hexcodes, where 0 is black and F white. I will not go through hexcodes now, there are many applications which can generate these codes for you. #333333 is dark gray and suitable for text on a white surface.
I will end this chapter here, but I would recommend that you experiment, experiment and do some more experimentation!