Introduction to CSS

Here is an introduction to Cascading Style Sheets (CSS) into our coding of HTML pages!

Case study

Red.Asterix.co.za/original is a simple, single-paged website that I have put up for you. This is quite an old web page- from 2008!- so let's see if it still works

Hit Ctrl-'+' if you need, just to get a bit closer to what I'm about to tell you.
And spend some time playing with this page.  Click here, click there, click everywhere!

Take your browser out of maximise and change the width of your browser to see how my web page behaves. You'll see my motorbike on the right hand side knows how to stay in the right place

Testing of web pages

Clicking on my images in Firefox works well- showing you a bigger image (which is what I wanted!), but, alas, Chrome thinks I want to download the images when I click on them! This is why I test your web pages in multiply browsers.

The marks I'll award you will be based on the browser that gives me the worst result for your work! For example, if I was making the persona who wrote this page, Peter Zulu 8E, I'd mark him according to what Chrome is showing me!- viz: That the thumbnails are not launching a bigger image for the website visitor to see.

To be reasonable, I'll only test your work on Firefox, Chrome and Edge

View page source

Once you've got to know my web page, hit Ctrl-U on my web page to view my source code.

...or, if you'd rather do this the long way around, feel free to use your mouse to first right-click on my web page ...and then slowly move your pointer to the bit that says, "View page source" ...and click!

(All this is the same on both Firefox and Chrome- at least on the computer I'm using now)

Yes, Dragon, it really does look neat!  You are going to love CSS!

Style!

Phoenix : Are you calling a css file into the code or doing the css code in the html file?

This is a good question!- we'll work on both of these options over the next couple of weeks

When you see a tag that you do not know, ask! There are clues here, as to what comes next. Use W3Schools to read up on these tags and others you might see. Here, look...

link tag

It's this <link> tag that is pointing to my CSS file, that you are unable to see on my web server. The only thing you can see is the HTML that makes up my index.html web page.

When you want to see my CSS file, I will have to give it to you! ...but first.....

Do you see my <link> tag, that I have in the <head> of this web page? Here is a reformatted version of this line, to emphasise what I want you to see......

  <link
       rel  = "stylesheet" 
       href = "rearViewMirror.css"
       type = "text/css"
   />

This is how you tell your HTML page to make use of a style sheet that is stored somewhere on your web server. Look at the bit that says href and you will see the name of the CSS file that this web page makes use of

Now before we look into CSS, I want you to get a copy of this web page running on your very own computer!

Local copy of this web page

I want you to look at my page source and do the following

Hit Ctrl-A which will select all the text on my web page
Hit Ctrl-C which will copy what you have just selected onto your clipboard
Use Notepad to open a file called mirror.html on your desktop (or some place you're not going to lose later)
Hit Ctrl-V which will paste what's on your clipboard into Notepad
Tell Notepad to save this file
Close Notepad

And keep fingers crossed that you've remembered what I've said about turning, "Hide extensions of known file types" off. Be careful to not end up with a file named mirror.html.txt

Now you can tell your current Internet browser to open your local copy of mirror.html

QUESTION : What do you see?

Yes, Phoenix! ...no style!

Mirror folder

You are about to end up with a number of files. It would be best for you to open a folder called "Mirror" (let's all use a folder called "Mirror", to help me see what you have on your computer later!)

Place your mirror.html into your Mirror folder

And what else is missing

Before anyone asks for a copy of my style sheet, we want to get our images to work!

QUESTION : What do you see? I would like to know.

 Dragon : "the same thing just more stripped down and no pictures"

Good! That is exactly what I want you to see! It means that you only have mirror.html in your Mirror folder. Now go back to my website and fetch the missing images, to put into your Mirror folder!- right next to mirror.html

Look at the code to see lines like this one...

  <a href="batoutofhell.bmp">
      <img class="RightThumb" src="bat1icon.jpg" alt="Bat Out Of Hell" />
  </a>

This tells you that there are two images that you need...

The smaller one is bat1icon.jpg that I use as a thumbnail
The bigger one is batoutofhell.bmp that I use as my full size image

Get all of of the images that are used into your "Mirror" folder!- and be sure to not change any filenames! Some of them are lo-res for thumbnails, some are a bit bigger for when a visitor wants to see a larger version of the image

Now tell your Internet browser to refresh your page with your local copy of mirror.html and tell me what you see!

 Dragon : pictures!

GOOD! You know how to get images downloaded and put into the correct location! Well done! I think you deserve an Easter Egg for this!

So, Dragon! What you see is images, but the style is still missing! Right!?

Dragon : yes theres no style

Yes! Everyone, I want you to focus on some tags in my code, before I start to tell you about CSS

Setting the style

Use of span tag

Look for this line....

  <span>The skies were pure</span>

Here I am using a tag. You will also see that I have not told what to do! In fact, right now (without CSS!), is doing nothing. All I have done here, is put a into my code, that I can use later in CSS!

Look to see that I have used in a number of places in my code...

Use of div tag

There is something else I want you to notice in my code- my use of well placed

Now it gets interesting

Think about these questions...

How do we make what is inside my span tags turn into capitals?
How do we make what is inside my span tags turn blue?
How do we make the very first letter of what I have in my div tag do a number of things?
1. it turns red!
2. it drops a line!
3. it is now italic!
How do we make everything in my div tag turn yellow! (except for what is inside my span tag)
Why is some of my text in red? (...not just the first letter of my div tags)
How did we make the background turn black?
How did some text become centered?

It's easy! I use a cascading style sheet!- to tell div and span and other tags to do what I want them to!

Who is ready to see my style sheet?

 Phoenix : Ready
 Dragon : ready

GREAT! ...and are you looking forward to this!?

 Dragon :  somewhat ...said with a big smile!

This stuff is brilliant! ...Here is my style sheet

Open this style sheet in Notepad and READ the file! Try see answers to the questions that I have just asked you!

Also note that the filename of my style sheet is exactly correct! It is a perfect match...

letter-for-letter
case-for-case

...to the filename that my <link> tag is asking for

Once you have this CSS file sitting right next to your mirror.html, hit refresh (F5) and tell me what you see!

Dragon : it works!

Yes! The style simply flows in!

Deprecated tags

font tag

Be sure to know which tags are deprecated or no longer supported! If you use tags that are deprecated and/or no longer supported, I will mark you down ...let's use a word like... badly! Let me say that again: Do not use tags that are deprecated and/or no longer supported on any web pages that you build for me.

In other words, if the persona Peter Zulu 8E was in my Web Development class this year, I'd fail [his web page], for two reasons...

It works on Firefox, but it does not work properly on Chrome!
It still has tags!

The fact that my web page has declared itself to be HTML 4.0 is no excuse!- as per the line right at the top of my web page. Here, look...

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I might be lenient in the use of deprecated tags, but I certifiably will not allow any tags flagged as, "not supported" on any web pages you work on for me- even if that is in regard to HTML 5.

Now that I have pointed you to the HTML <!DOCTYPE> declaration, I am placing a mark onto your usage of this tag!- onto ever web page you have on your website.

Closing

Now my lecture is done. You have now been dropped into the shallow end of the pool, regarding cascading style sheets! I have given you the start that you need!

Now what I want you to do is play with the code

Change the colours
Change the fonts

Get to know how CSS looks and how it connects. And, yes, there is stuff for me to explain to you!- like why do some things you see start with a ',' (a dot)

We'll work through details like this in my next lecture

Next steps

Somebody ask me if you can now add some CSS to your website

Phoenix : Can I please
Munki : Please

You new goal is make your websites look just like this, except for the wording that you will have on your own website. Start by writing something about yourself into the center of your [portfolio|[portfolio.html]] pages (such as this one for Phoinix)

This is to show me that you know how to get CSS started on your web pages. Once you have shown me this and you have all your web pages in place, all on the same CSS file, I will allow you to change what you have in your CSS files- to set your individual styling on your websites

Notes

Be sure to note how neat my CSS file is! Keep it this way, or lose marks when I look at your CSS
For more, go to the CSS Tutorial on W3Schools