Part 12 - Learning CSS for Beginners

Written by Eric Muss-Barnes, 15 December 2018

CSS is an abbreviation for "Cascading Style Sheets" and it is a special file allowing you to control the look and layout of a webpage. CSS was introduced to HTML back in 1996, by Hakon Wium Lie and Gijsbert "Bert" Bos, although it took a good few years to catch on. There are 2 major advantages to using CSS to control the aesthetics of your website.

1.) It allows you to globally control elements on your entire site.

2.) It gives you the opportunity to use "responsive design".

First, what do I mean by "globally control elements" on your website? Say, for example, you have built a website with 30 or 40 pages. When it was first built, you decided to use a certain font for your entire website. Later, you want to change that font. If you used an inline style, or a font tag, you would have to manually change that font, on every single page of your website. Not only would that be time-consuming, but you could easily make a mistake and miss an update somewhere.

Using an external CSS file, you can change the reference to the font style in the CSS, and it will change everywhere, all over your website, over all 40 pages, all at once.

Pretty cool, huh? And how does this cool technology benefit the users? Simple! By reducing the likelihood of making a mistake, easing your workload makes for a more professional and consistent guest experience.

Secondly, implementing CSS allows you to use "responsive design" in your code. What is responsive design? Well, back in the early days of the Internet, websites were often built with an ideal screen-resolution in mind. Back then, people only viewed websites on CRT monitors with a 4:3 ratio resolution of 800x600 or 1024x768 or 1280x1024 and so forth.

These days, people visit websites on countless devices. HD monitors. Laptops. Tablets. Smartphones. All of these devices have numerous potential resolutions and aspect ratios. How can you design a single website, that will look good, on all of those devices? By using responsive design.

Responsive design is a programming concept, a kind of "design philosophy" if you will, that uses CSS to dynamically reformat your webpage, based upon the resolution of the device it is being viewed upon. In essence, you are actually using CSS to build multiple versions of the website. You can become as granular with responsive design as you want. You could build a website for only 2 resolutions - desktops at 1920x1080 and smartphones. Or, you could build for desktops, laptops and smartphone. Or you could make 5 different iterations at granular resolutions between different tablet manufacturers. Whatever you want. Whether you make 2 versions or 12 versions of your website, catering to various resolutions, all of those iterations are still considered "responsive design".

There are 3 ways you can add CSS to your website:

1.) Inline styles.

2.) Embedded on the page.

3.) Externally linked file.

For this article, I will show you the 3 ways to implement styles, then I will show you some basic functions of CSS, then I will show you some responsive design examples, then we'll do a few neat things with fonts, then I will show you my old Disney training page. Let's start with the 3 implementation approaches.

PART 12 - LESSON A - INLINE STYLE

<html> <body> <!-- Note how the span below simply calls a style. --> <span style="font-family:courier;">This sentence uses the "Courier" font with an inline style.</span> </body> </html>

PART 12 - LESSON B - EMBEDDED STYLE

<html> <body> <!-- Note how the style tag below defines a "class" called "thischangesthefont". Classes are also known as "variables" and can be called anything you want. Variables are a very powerful tool in programming, because they allow you to, essentially, write your own computer language. By giving you the opportunity to define unique words and phrases, then decide on the parameters of those words and phrases, you gain a very powerful tool to control the page. --> <style> .thischangesthefont { font-family:courier; } </style> <span class="thischangesthefont">This sentence uses the "Courier" font with an embedded style.</span> </body> </html>

PART 12 - LESSON C - LINKED STYLE

<html> <head> <!-- Note how the link tag below points to a stylesheet file. Link tags should always be placed inside the head of a document. --> <link rel="stylesheet" href="includes/stylesheet.css" /> </head> <body> <span class="thischangesthefont">This sentence uses the "Courier" font with a linked style. It also colors it blue. Be sure to view the sourcecode on the stylesheet.css file.</span> </body> </html>

The next thing I will show you are "media queries". A media query is a special type of CSS that can change the CSS parameters, based upon the size of the screen. Usually, a media query is used to change the positioning or the size of an element. You may even use it to make things vanish completely. For example, if you have a website with a lot of graphics and information on the screen for a desktop site, you may want it to become more simplified when it is viewed on a smartphone. Therefore, you would use a media query to make some of those extraneous elements invisible at smaller screen resolutions.

PART 12 - LESSON D - MEDIA QUERIES

<!DOCTYPE html> <!-- The tag above declares the "document type" for the webpage. The code I have used lets your browser know this is an HTML5 webpage. As a result, things like the "viewport" metatag below will render properly. --> <html> <head> <title>Media Query Examples</title> <!-- The metatag below is pretty much required these days. This tag is what allows responsive design elements to work on smartphones. If you do not include this tag, pages will not resize properly for a phone. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Note how the link tags below point to multiple stylesheet files. Link tags should always be placed inside the head of a document. Ordinarily, people will put their media queries in their main CSS file. Personally, I do not like to do that. I tend to make a separate CSS file specifically for each media query. Why do I do this? So I can be sure I'm working on the correct block of code and I never make any mistakes regarding which media query I am altering. --> <link rel="stylesheet" href="includes/styled.css" /> <link rel="stylesheet" href="includes/styled-360x640.css" /> </head> <body> <div class="firstdiv"> <!-- In the span below, I am calling an "id" instead of a class. Be sure to check out the CSS file so you can see the difference between how an id is written versus how a class is written. --> <span id="superfonts"> This div contains the "Arial Black" font with a linked style. The div also has a grey background. Be sure to view the sourcecode on the various css files. </span> </div> <br> <div class="picturesomething"> This div contains a photo that will resize itself as the browser window changes size. <br><br> <img src="images/america.jpg" class="alteringphoto"> </div> <br> The below div contains a photo that will change into a different photo, as the browser window changes size down to a smartphone width. <br> <div class="changingimage"></div> <br> The below div contains a photo that will vanish completely, as the browser window changes size down to a smartphone width. <br> <div class="vanishingimage"></div> </body> </html>

Those are some extremely basic media queries, but they illustrate the concept: You can make things change on the page, depending upon the resolution of the browser window. Once you grasp that idea conceptually, there are endless things you can do with it.

Finally, let's look at "web fonts". Web fonts are a feature of CSS which allows you to download and embed anti-aliased fonts on web pages. For example, you may have noticed that I am using a font on this site which looks nothing like the sample font in the code. I also change to a special font anytime I make a reference to Walt Disney Studios.

PART 12 - LESSON E - WEB FONTS

<!DOCTYPE html> <html> <head> <title>Web Font Examples</title> <link rel="stylesheet" href="includes/fontstuff.css" /> </head> <body> <span class="firstfont"> This span contains the "Source Sans Pro" web font with a linked style. Note that the rest of this text isn't really important at all. I just wrote a bunch of stuff on here so you will have a good understanding of what the font looks like. If the example is only a few words long, it doesn't express the font very well. It's better to have a more significant body of text, even if it's completely meaningless nonsense text rambling on about the fact it is nonsense. </span> <br><br><hr><br><br> <span class="secondfont"> This span contains the "Crimson" web font with a linked style. Note that the rest of this text isn't really important at all. I just wrote a bunch of stuff on here so you will have a good understanding of what the font looks like. If the example is only a few words long, it doesn't express the font very well. It's better to have a more significant body of text, even if it's completely meaningless nonsense text rambling on about the fact it is nonsense. </span> <br><br><hr><br><br> <span class="thirdfont"> This span contains the "Quattrocento" web font with a linked style. Note that the rest of this text isn't really important at all. I just wrote a bunch of stuff on here so you will have a good understanding of what the font looks like. If the example is only a few words long, it doesn't express the font very well. It's better to have a more significant body of text, even if it's completely meaningless nonsense text rambling on about the fact it is nonsense. </span> <br><br><hr><br><br> <span class="fourthfont"> This span contains the "Grobold" web font with a linked style. Note that the rest of this text isn't really important at all. I just wrote a bunch of stuff on here so you will have a good understanding of what the font looks like. If the example is only a few words long, it doesn't express the font very well. It's better to have a more significant body of text, even if it's completely meaningless nonsense text rambling on about the fact it is nonsense. </span> </body> </html>

Those are just 4 examples of webfonts. There are thousands available, and you can still use bold, and italics, and headlines, and everything you do with regular fonts. Web fonts are one of the best improvements in website deign in the last 10 years, because it allows the aesthetic of websites to become far more appealing, but you still retain great SEO value, because it is actual text on the page of the site, not a graphical image. Search engine spiders can only catalog and understand text, not images-of-text.

PART 12 - LESSON F - DISNEY PAGE

<html> <head> <title>HTML for Non-Programmers</title> </head> <body> This is the page I used to teach CSS when I was a Cast Member at Disney. I figured I would share it, just so you could see some extra examples. <p> CSS can be added to your HTML page in 3 different ways: <ol> <li>Inline styles (which we already learned). <li>Within a <b>style</b> tag on the page. <li>As an separate "style sheet" file (which is the best way to do it). </ol> Since we already know the first method, let's start with the second. View the sourcecode beneath this sentence... <style> /* Once you are inside a "style" tag, the way to make a comment is different. Instead of the HTML method to begin a comment, you use a slash and an asterisk. Why? I have no idea. It's more computer-nerd weirdness. Computer-nerds do it just to mess with you. I think they need to get out more. Below you will see ".maintext" and some font parameters below it. The ".maintext" is called a "class" and can be named anything you want - "maintext" or "sherbert" or "rock" or "funkadelicclassomatic" - it doesn't matter. Note the formatting is very important - the period before the word must be there. The curly-braces enclosing the parameters must be there. And, obviously, the closing style must be there. This comment is closed by an asterisk and another slash, like so: */ .maintext { FONT-WEIGHT: bold; FONT-SIZE: 14px; } </style> <p> <table width="500"> <tr> <td class="maintext"> As you can see in the sourcecode, directly above this table is a "style" called "maintext" - that word "maintext" is called a variable. Variables are a fancy computer-nerd term for "computer code that you get to make up a definition for". Variables can be whatever kind of name you want. We could call it "maintext" or "mastertext" or "applepie" or "poopyshoes" or "hamster" or whatever you wanna call it. <p> Notice the parameters under "maintext"... look familiar? They are just like the "inline styles" you learned in previous pages! See? I told you learning "inline styles" would pay off... <p> So, there you see how some CSS works just like the "inline style" does. This table cell then has a "class" parameter called "maintext" which calls the attributes in the "maintext" and applies them to everything in this cell. <p> Make sense? <p> So, first you create your custom code - the variable, which you can name anything you want. You assign some features and parameters to that variable - like what size font you want to use, and that the font should be bold. Then, you apply that variable to the text by saying, "Yo! Computer! Slap those styles onto this font right here!" <p> Let's create a new style and add more parameters to the text... </td> </table> <p> But, wait! That's not all! <span class="maintext">Check this out!</span> You don't have to call up the "class" inside of a table cell. You can also do it in a "span" tag, just like I showed you the inline styles. <p> <span style="FONT-WEIGHT: bold; FONT-SIZE: 14px;">So this inline style sentence look exactly the same...</span> <p> <span class="maintext">as this stylesheet sentence right here.</span> <p> But go check the sourcecode, and those previous 2 lines are totally different. One uses inline styles. One uses the stylesheet. <style> .hamstertext { FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 14px; COLOR: #075EAA; FONT-FAMILY: Verdana, MS Sans Serif, Arial, Helvetica } /* Note the formatting of the class does not need to be on separate lines. It's simply traditional to write CSS that way, to make it easier to read. The below example works just the same: */ .hamstertext {FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 14px; COLOR: #075EAA; FONT-FAMILY: Verdana, MS Sans Serif, Arial, Helvetica } </style> <p> <table width="500"> <tr> <td class="hamstertext"> As you can see in the sourcecode, directly above this table is a "style" called "hamstertext" - that word "hamstertext" is called a very-stupidly-named variable. <p> Notice the parameters under "hamstertext" are a bit more detailed? They feature a "color" and a "line height" and a "font family" - thankfully, these terms are pretty self-explanatory. "Line-height" controls the leading and "font-family" determines what font is used, in order of preference. In this case, the preferred font is Verdana. If the users computer does not contain Verdana, the browser will display the next font in the line, and so on, and so on, until the end of the list. </td> </table> <p> Okay, so that pretty much covers the second method. Let's move on... <p> "Whoa! Whoa! Whoa! Wait a second!" - I bet that's what you're thinking, right? Too fast? Too confusing? <p> Sorry. But, much like "tables", the concept of CSS is very powerful and very customizable. Therefore, I can't show you EVERYTHING that CSS is capable of doing. I'm just here to teach the BASICS - explain the easy features conceptually, so you can go out and learn the more complicated stuff on your own. So, if it seems like I'm leaving out a lot - yes, I am. That's the whole point. I'm getting your feet wet - not taking you for extended deep-sea-diving. <p> Finally, let's get to the best way to use CSS, which is putting all your CSS classes in their own separate file, and calling those CSS classes into your HTML page. <p> Why is that the best way? <p> Think about it. Suppose you build a website with 3 dozen pages and you have the exact same style of font on all 36 pages. Now, suppose you need to change that font - you want the color a little darker or you need the font-family to be a little more fancy. <p> If you embed the CSS on each individual page, you'd have to change the code and resave 36 different files (and hope you make no typos on those 36 pages as you're doing it!) That would be really time-consuming and have way too many chances for errors. If your font class was defined in one place, in a single file, you could make those changes once and they would "cascade" down to every page in your site - cascading style sheets! Great idea! Almost as cool as... a hottub time machine! <p> <!-- The code below links to a standalone stylesheet. Note it MUST have a .CSS file extension. If you view this page in a browser, you won't see anything to indicate this link to the stylesheet file. It's purely happening in the "background" of the page. Note that stylesheets are ALWAYS linked in the <head> tag of your document. However, since this is an instructional page, I placed it here, so it would be referenced during the appropriate time during of the lesson. --> <link href="includes/this-be-your-stylesheet.css" rel="stylesheet"> <table width="500"> <tr> <td class="includedtext"> This text uses a class called <b>"includedtext"</b> which is defined in the <b>"this-be-your-stylesheet.css"</b> file. So, you won't find ANY information regarding the parameters for this text on the HTML page itself. Everything is in the <b>"this-be-your-stylesheet.css"</b> file and the <b>"this-be-your-stylesheet.css"</b> file is being referenced by the HTML page. </td> </table> <p> <span class="additionaltext">This text is also being controlled by the <b>"this-be-your-stylesheet.css"</b> file and is using a class called "additionaltext" for formatting. I added a "background-color" parameter too. Yeah, yeah, I know. It looks ugly and is hard to read. That's not the point! The point is to show you that there are other parameters which can be used in addition to the parameters we've already covered. Background colors. Borders. Padding. Margins. Centering the text on the page. All kinds of stuff. <br><br> Again, as with tables, I'm not going to cover every possible permutation of CSS styling - the possibilities are endless. I just want to give you a basic introduction so you can do research on your own. This way, when you research CSS on some website and it offers up an entirely new parameter you've never seen before, you will know where it goes and what to do with that parameter to test things out. Cool? <br><br> By the way, for those of you who are paying attention, you may have noticed I used a double-line-break for the last 2 paragraphs instead of a paragraph break. Did you catch that? Do you know why?... Because the paragraph-break broke the CSS background color in the Firefox browser. Why? No idea. But CSS often has funky cross-browser issues. Cross-browser oddities are one of the great banes of CSS. If you ever encounter any inconsistency in your CSS formatting between browsers, you may not have made a mistake - you might have all your code correct. You'll just need to dig around and do some research to figure out how to make things render consistently. In this case, using the double-line-break worked fine in all browsers, so I switched to that. </span> <p> Okay, enough of that funky-looking text. Let's move on to the next type of code for the class - JavaScript. <p> </body> </html>

Now you have a solid foundation for the basics of CSS. I didn't cover a great deal of layout using CSS, but you get the idea - div elements can be repositioned and resized with CSS classes.

As I mentioned in an earlier article, computer-nerds will tell you to never learn tables and do layouts using DIV tags and CSS instead.

I disagree.

There are good and bad to each.

CSS is good, because it allows for responsive design.

Tables are bad, because they are not as well-suited to responsive resizing.

CSS can be bad too, when used improperly. Using CSS for positioning can be awful, because it becomes horribly confusing and convoluted code, since all the parameters for sizing and positioning things on the page are located in a separate CSS file (or elsewhere in the HTML page) and every DIV parameter is dependent upon the DIV it is nested within. This means if you want to change anything, you are constantly swapping back-and-forth, cross-referencing between the CSS and the HTML files, trying to figure out what goes where and what is nested inside of what? That's an awful way to build a webpage and a nightmare to maintain and make any modifications. To make matters worse, CSS can use a parameter which provides "fixed" positioning on the page - meaning you tell the HTML the exact pixel-coordinates you want the element to appear on the page, regardless of where things are written in the sourcecode! This means instead of things happening in a logical order, a poorly-programmed page can actually have elements scattered all over the sourcecode - the top navigation might be at the bottom of the code - the photos on the side of your page might be the first thing in the code - you never know! Things can get strewn everywhere! Again - an atrocious way to learn programming, because it has too much potential to be total chaos.

Why are tables good for a beginner?

Tables are smart for beginners to learn, because tables control all the layout and positioning within the HTML page itself - in order, right down the document, top-to-bottom. Yes, tables can also get complicated and confusing. Tables can be a bit "clunky" and don't necessarily have the brevity of CSS and DIV tags. However, since tables exist in a single file, and they aren't cross-referencing any of their parameters, tables are MUCH easier to read and learn and understand, because everything is right in front of you, instead of being tucked away in separate files.

Sloppily-constructed tables are bad. Sloppily-constructed CSS is really bad.

Putting content in DIV tags and positioning them with CSS is far superior to tables, when the CSS is used properly.

Now you have a basic understanding of CSS and what you can do with it. There are dozens of parameters that can be assigned to dozens of tag, so it is very powerful. You can even use CSS to do crazy animations or special effects. Explore the possibilities of CSS more on your own. Discover what it can do. Figure out as much as possible, so you can build wonderful things.

And remember, kids, the world owes you nothing... until you create things of value.

Glossary

CSS

CSS is an abbreviation for "Cascading Style Sheets" and it is a special file that allows you to control the look and layout of a webpage.

responsive design

The concept of building a webpage that will dynamically reformat itself, depending upon the size and resolution of the screen it is being viewed upon.

Downloads

Other Articles