Basics of CSS in Web Design
Adding a Cascading Style Sheet to your current web site layout and save you time and make your web site look a lot more professional in the process. Cascading Style Sheets, or sometimes referred to as CSS, is a style sheet language used to describe how a web page should be formatted.
For example, if you wanted to make some text on a web page look bold, you might use this snippet of HTML code:
<strong>this will be some bold text!</strong>
Which seems simple enough. However, what if you want to chance the color, font, and how this text is shown in that spot across all of your web pages? Well then your HTML in your pages becomes a rambling mess. That is where Cascading Style Sheets come in handy.
Cascading Style Sheets allow you to, in a much more organized way, sort out how your web site design looks in a totally separate file, or chunk of code in between the head tags. For example, let say you wanted the title of your page to be bold, green, and a different font style than the rest of the page. In your HTML code, you would use something like this:
<p class="mycooltitle">this is my page title</p>
That tells the browser that everything within this paragraph or <p></p> tags will follow the design setup class I have defined as “mycooltitle”. Now, in between the head tags (<head> </head>) I want you to add this:
<style type="text/css">
.mycooltitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #336633;
}
</style>
This CSS code tells the web browser to apply these design settings to the class marked, “mycooltitle”. It does three things. It says it will use the Verdana font, the font will be bolded, and it will be colored green (#336633 is the HTML color code for a shade of green).
That is how you apply Cascading Style Sheets to your web design and layout of your own web pages. One of the major benefits of using CSS is that it helps to separate your web site code with your design. This way, you can change one aspect very easily in the CSS file (when or if you start to master external style sheets). I’ll save that lesson for another day.
