Web Design using CSS
In my last article, I spoke about the benefits of using CSS in your web page. Today, I would like to briefly talk about how you can use CSS to control formatting in your web page.
Let’s suppose, for example, you would like to control how all of your headers (<H1>) display. For consistency sake, we want all of our H1 headers to be formatted the same. Here is an extract of CSS formatting taken from one of my web sites.
h1 {
color: #971111;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.2em;
line-height: normal;
margin: 24px 0 0 0;
text-align: left;
}
Don’t let the above code intimidate you. It’s quite simple once you understand it. The intent is not to teach you CSS but to get you to understand it a little more so you can have a meaningful conversation with your web designer. If you look at the code above, you’ll notice that we have defined a colour for our H1 tag. We have also defined a font size, specified whether the text will be displayed in bold or normal, specified the margins that will surround this text as well as specified the alignment of the text.
Now, if we go to our document on the web page and simply type
<h1>This is good</h1>
You’ll find that all of the formatting detailed above gets applied to this text. The beauty of CSS is that this formatting and will be applied to all H1 sections within your web site. This will make your web site consistent and user-friendly.
Now, if you suddenly decided that you wanted more space in your left margin and you wanted your text to be aligned center, you would simply go to the definition above and change the sections. Once the changes are done, it would be immediately reflected on your web pages.
I hope you see the difference between embedding formatting options right in your text and using CSS to control it. CSS is a very powerful option, and what I have touched on here is just the basics. In my later articles, I will go into further details to explain to you how CSS can be used to control your layout is instead of using tables.
CSS is here to stay and the sooner you take advantage of all its offerings, the easier it will be to maintain your web site as well as provide a professional look to your users.
Till next time.
Let’s suppose, for example, you would like to control how all of your headers (<H1>) display. For consistency sake, we want all of our H1 headers to be formatted the same. Here is an extract of CSS formatting taken from one of my web sites.
h1 {
color: #971111;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.2em;
line-height: normal;
margin: 24px 0 0 0;
text-align: left;
}
Don’t let the above code intimidate you. It’s quite simple once you understand it. The intent is not to teach you CSS but to get you to understand it a little more so you can have a meaningful conversation with your web designer. If you look at the code above, you’ll notice that we have defined a colour for our H1 tag. We have also defined a font size, specified whether the text will be displayed in bold or normal, specified the margins that will surround this text as well as specified the alignment of the text.
Now, if we go to our document on the web page and simply type
<h1>This is good</h1>
You’ll find that all of the formatting detailed above gets applied to this text. The beauty of CSS is that this formatting and will be applied to all H1 sections within your web site. This will make your web site consistent and user-friendly.
Now, if you suddenly decided that you wanted more space in your left margin and you wanted your text to be aligned center, you would simply go to the definition above and change the sections. Once the changes are done, it would be immediately reflected on your web pages.
I hope you see the difference between embedding formatting options right in your text and using CSS to control it. CSS is a very powerful option, and what I have touched on here is just the basics. In my later articles, I will go into further details to explain to you how CSS can be used to control your layout is instead of using tables.
CSS is here to stay and the sooner you take advantage of all its offerings, the easier it will be to maintain your web site as well as provide a professional look to your users.
Till next time.
<< Home