CSS 101

Learn how to use Cascading Style Sheets on your web-site

Steve Smith, host of your TQA Weekly, explains how-to use Cascading Style Sheets on your own web-site effectively.

Episode #2-27 released on April 1, 2012

Watch on Youtube

This is TQA Weekly, and I'll finally start giving our CSS 101 course on web site design. CSS , or Cascading Style Sheets, is a very useful tool when it comes to creating a great looking web-site with a minimum amount of code. We can achieve this by using IDs and Classes within HTML tags to create completely external and controllable style sheets that can allow us, amongst all things, to create unique color schemes, layouts, specify the types or specific fonts desired, height, width, alignment, vertical alignment, float, color, background color, padding, margins, borders, etc...

The first thing we need to analyze is the difference between class and id within CSS. The answer is, none, unless your going to be using Javascript, which you may want to avoid, if possible, because pf the many people have been known to disable Javascript, which may or will break your web-site's look if it relies heavily on it. If you wish to use Javascript, the ideal consensus would be to create all the styles within the HTML tags, as class, and identify all tags for Javascript modification, as ID. This is because, it is easier to program Javascript for specific IDs. I will get into some simple coding for Javascript, in a later show. With the exception of Javascript, you can use both, at the same time.

How is ID and Class identified in CSS, well let's start by answering a few good questions before we start answering how to code CSS. How much time do you have to lose on your web-site, how big is your web-site going to be? If you want a web-site to load faster, be easier to maintain, and easier to change details site wide, you want an external style sheet, not an internally coded stylesheet within the code, because of the fact that it can be potentially bad for search engine optimization, and causing the pages to load slower, as a whole. CSS, that is coded within the actual HTML document can cause the file to take longer to download. An external CSS file can be loaded once into memory, into the cache, and the rest of the web-site can be navigated easily, and quickly. Of course, there are ways of making even this faster, like GZIPing a web-site, which again, I'll get into later on.

How does one create an external stylesheet, and how does one link it to a HTML file? To link an external stylesheet into an HTML file, you use this tag below. You must include this within the head of the HTML document.

<link rel="stylesheet" type="text/css" href="http://whole-url-to-stylesheet.css" />

Now, to create an external CSS stylesheet, open a window like Notepad, Arachnophila, or Aptana Studio 3, and save the file as stylesheet.css. To create a class, the value or name of the CSS property starts with a period(.). To create an ID instead, the CSS property starts with a pound(#). If we take an example like modifying a header, and we name it's class to header-h1, we would write it like this:

.header-h1 {
attribute: value;
attribute: value;
attribute: value;

If you wanted to use an ID instead, you would create the same thing, but one difference, instead of a period, you would use a pound symbol.

#header-h1 { attribute: value;
attribute: value;
attribute: value;

No where near as hard as some web developers may lead you to believe. We create a new class or id, for each element we want to control independently of the others. In order to allow this CSS property to modify an HTML tag, we need to tell the tag what CSS property it must obey. You can also program CSS to affect all identical tags, I'll get to that later on today. For now, to allow for a tag to obey a desired a CSS property, compose the tag like this:

<tagname id=”css-property-name”> or <tagname class=”css-property-name”>

Remember to close the tag. Now to modify any HTML tag, in General, you replace the class or id in the stylesheet, with the exact name of the command. Like this:

H1 {
attribute: value;
attribute: value;
attribute: value;

This gives you a total of three ways of modifying an HTML tag. You can modify the look by tag, id or class.

Now, what are some of the attributes we can use to modify each of the tags. Let's talk about font first. You can modify the size of the font, color, the font face, style, weight, etc... Below is a demonstration of the code:

font-size: 12pt; //Modifies the size of the font, can also be modified in pixels, or px
font-weight: 600; //modifies how bold the characters are, can be set up to 900, in increments of 100
color: #000000; //Font color, and can be set by hexadecimal or real name values.
font-family: serif; //Font family or style, can be set to serif, or sans-serif, or by name of font.

These are just a few of the general font oriented attributes. You can, also, modify the way it shows up by using background color, borders, padding, margins, etc... Below is a demonstration of the code:

background-color: #FFFFFF; //The background color, can be set in hexadecimal or real name values. Border: 1px #000000 solid; // the border can also be modified using suffix after border like -top, -left, -right, -bottom, and you can set the thickness of the border, color, and type. Go to link in show notes for all possibilites.

So, what about margins, and padding. I've already explained the difference, but for those who haven't see my episode on tables, let's go through this again. Margins is the space between elements, or the side of the page or object. Padding is the space between the content element, and the internal edge of the current cell. All HTML elements are treated like cells of content by CSS. To modify padding and margins, you create the code like this:

margin: 10px; // You can modify the distance in pixels,line heights(em) or percentage. And you can suffix the command with -top, -left, -right, -bottom. Padding: 10px; // You can modify the internal distance between the internal edge of the cell, and the content in pixels, line heights(em) or percentage. And you can suffix the command with -top, -left, -right, -bottom.

How about about we combine all that into one example. And best of all, instead of using a custom for podcast example, I'm going to use the actual TQA Weekly headers, the ones with the underlines.

The code used to create this in the header is:

<link rel="stylesheet" type="text/css" href="http://tqaweekly.com/styles/stylesheet.css" />

The web-site locks the style on the tag by using the tag name, and not id or class, in this case. I, use all three on the web-site. The tag modified is <H1>

The code in the stylesheet is:

h1 {
font-family: 'Electrolize', sans-serif;
border-bottom: 1px #fff solid;

To see the finished design, look at the top of any of the TQA Weekly pages.

Next Week, I'll be talking about cookies! I've been playing with cookies for the better part of the last two weeks. I'll talk about what they do, how they work, how they are written to your browser, and things you can do to continue using cookies, and avoid being tracked off the web-site.

Some news about the Podcast, if you go to any of the show notes pages, you can now leave a comment, powered by Facebook's comment box, and you don't even need a Facebook account if you have a Hotmail, AOL or Yahoo account. Also, in the next few weeks, the web-site will be upgraded to a easier to use, slightly more interactive format, which will allow you to communicate faster, and more easily. We have been deploying cookies to allow the transition, which is why next we, we are going to be talking about cookies. Feel free to view some of the source code in our own privacy policy.

Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. Stay safe and online, have a great day!

Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions

Sources & Resources

Community Comments

Share your thoughts, opinions and suggestions

Login or Register to post Your comment.