Part 12 - Learning CSS for BeginnersWritten 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
PART 12 - LESSON B - EMBEDDED STYLE
PART 12 - LESSON C - LINKED STYLE
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
The below div contains a photo that will change into a different photo, as the browser window changes size down to a smartphone width.
The below div contains a photo that will vanish completely, as the browser window changes size down to a smartphone width.
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
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.
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.
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.
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
CSS can be added to your HTML page in 3 different ways:
- Inline styles (which we already learned).
- Within a style tag on the page.
- As an separate "style sheet" file (which is the best way to do it).
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.
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...
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.
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!"
Let's create a new style and add more parameters to the text...
But, wait! That's not all! Check this out! 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.
So this inline style sentence look exactly the same...
as this stylesheet sentence right here.
But go check the sourcecode, and those previous 2 lines are totally different. One uses inline styles. One uses the stylesheet.
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.
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.
Okay, so that pretty much covers the second method. Let's move on...
"Whoa! Whoa! Whoa! Wait a second!" - I bet that's what you're thinking, right? Too fast? Too confusing?
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.
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.
Why is that the best way?
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.
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!
|This text uses a class called "includedtext" which is defined in the "this-be-your-stylesheet.css" file. So, you won't find ANY information regarding the parameters for this text on the HTML page itself. Everything is in the "this-be-your-stylesheet.css" file and the "this-be-your-stylesheet.css" file is being referenced by the HTML page.|
This text is also being controlled by the "this-be-your-stylesheet.css" 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.
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?
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.
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.
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.
CSSCSS 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 designThe concept of building a webpage that will dynamically reformat itself, depending upon the size and resolution of the screen it is being viewed upon.