Prothumia: Created page with "Here is an introduction to Cascading Style Sheets (CSS) into our coding of HTML pages! '''Case study''' [http://red.asterix.co.za/original/ 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, cli..."

2023-11-18T19:04:44Z

Created page with "Here is an introduction to Cascading Style Sheets (CSS) into our coding of HTML pages! '''Case study''' [http://red.asterix.co.za/original/ 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, cli..."

New page

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

'''Case study'''

[http://red.asterix.co.za/original/ 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 [[CSS|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 [https://www.w3schools.com/ W3Schools] to read up on these tags and others you might see. Here, look...

=== [https://www.w3schools.com/tags/tag_link.asp link tag] ===

It's this <link> tag that is pointing to my [[CSS|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 [[home|index.html]] web page.

When you want to see my [[CSS|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......

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

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|CSS file]] that [http://red.asterix.co.za/original/ 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 [http://red.asterix.co.za/original/ 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...

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

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|Easter Egg]] for this!

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

[[Dragon]] : yes theres no style

Yes! [[student|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 [https://www.w3schools.com/tags/tag_span.asp span tag] ===

Look for this line....

<pre>
<span>The skies were pure</span>
</pre>

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

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

=== Use of [https://www.w3schools.com/tags/tag_div.asp div tag] ===

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

I have well placed, '''divisions''' in my HTML code!

Be sure to see this, before we move on! Let's put the start of one division here, for us to talk about..

<pre>
<div><span>The skies were pure</span> and the fields were green ..... </div>
</pre>

Right, we'll talk about [[tags|these tags]] again a bit later

== 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?
## it turns red!
## it drops a line!
## 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! ...'''<big>Here is <big>[[RearViewMirror.css|my style sheet]]</big></big>'''

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 ==

=== [https://www.w3schools.com/tags/tag_font.asp 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 <font> tags!

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

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

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|HTML 5]].

Now that I have pointed you to the [https://www.w3schools.com/tags/tag_doctype.asp 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 [[CSS|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 [http://red.asterix.co.za/ 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 [http://phoenix.asterix.co.za/portfolio.html this one for Phoinix])

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

== 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 [https://www.w3schools.com/css/ CSS Tutorial] on W3Schools

<small>
[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]
</small>

[[Category:Design]]
[[Category:Lecture]]

Introduction to CSS - Revision history