Tag Archives: learning CSS

Learning CSS Basics

Last week, we covered some basics of HTML, the most fundamental of the web languages. While the Internet could function using only HTML, it wouldn’t be very pretty or as interactive. Luckily, HTML is supplemented with other languages like CSS, which is the second most-important Internet language because it determines the style and formatting of a website.

Without it, everything would look something like this:

Screen Shot 2013-04-30 at 5.00.09 PM

That was the first website created on the World Wide Web 20 years ago. The formatting is basic, the fonts are default, and it’s extra, super boring. Don’t let the same fate befall your website! Learn CSS!

First, it’s important to know that CSS can be written inline or in an external stylesheet. When CSS is inline, it’s written right into the HTML like this:

<p style=”color: #FF0000; font-size: 17px;”>This is a red paragraph.</p>

That code will look like this:

This is a red paragraph.

The “style” tag indicates that everything in the quotation marks will be CSS styling. The “color” property determines the font color, and the “font-size” property is just what it sounds like! Most CSS properties describe exactly what they do. Other properties include border, text-align, and margin. There are tons of possible properties, though, and as browsers advance, more and more properties are being added to the CSS language. This means that CSS is getting more versatile all the time, which is a good thing for web design and functionality!

Inline styling can be useful, especially for unusual formatting that you only need to use once. However, if you had to style every line of HTML inline, it would take forever! Plus, if you ever wanted the change the font color, you’d have to change it hundreds of times in every line!

That’s why most CSS styling is in an external stylesheet. The top of an HTML document will often have a piece of code that looks like this:

<link rel=”stylesheet” href=”style.css” type=”text/css” />

This calls the stylesheet so the browser knows to apply the styles in that document (style.css) to the following HTML.

Depending on the website, the stylesheet might contain just a few properties or hundreds. A smaller stylesheet might look like this:

body {
background: #FFFFFF;
color: #000000;
text-align: center;
font-size: 14px;
}

p {
margin-bottom: 20px;
}

h1 {
font-size: 20px;
font-weight: bold;
}

So what we’ve got written indicates that the body of this HTML document will be rendered with a white background and black text, all the text will be centered, and the default text size will be 14. The next block indicates that all the paragraphs (<p>This is a paragraph.</p>) will have a bottom margin of 20px. The last block determines that any content in the h1 tag will be in a larger font and bold.

The advantage of writing CSS in a stylesheet (as opposed to inline) is that the whole look of an HTML document can be changed by just editing a few lines in the CSS. You can increase the font size easily, or change the color to navy instead of black in no time. And since you can call the same stylesheet from all the pages of a website, you can make those changes across the whole site with minimal editing.

While HTML may be the building block of the web, CSS is the beautifier. This is only a rudimentary introduction, and we hope you’ll be inspired to learn much more about CSS. May we suggest the W3schools tutorials?