Introduction to CSS 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 called 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 your web pages? Well then your HTML in your pages become 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 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 will save that lesson for another day.
March 9th, 2010 at 12:52 pm
[...] Introduction to CSS 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. [...]
March 10th, 2010 at 6:12 pm
CSS is very cool indeed and now considered a standard. See ya table layout
March 11th, 2010 at 10:48 am
Great Introduction. I always wanted what CSS was all about. Looking forward to future issues.
March 18th, 2010 at 7:06 pm
[...] Introduction to CSS Web Design [...]
March 24th, 2010 at 3:31 pm
CSS can perform differently in different browsers… but as long as the coder keeps an eye on how their site looks crossbrowser during and at the end of construction, everything should be fine.
The key with CSS, is to keep things as simple as possible. When you try to get too clever, it becomes a nightmare to keep track of which browsers interpretation looks like a pigs ball bag and which one looks the biz… That doesnt mean that you shouldnt at least try to be adventurous but just accept that not everything is going to be a smooth ride along the rocky CSS road to perfection.
Good luck!