INTRODUCTION TO HTML, CSS & WEB HOSTING

INTRODUCTION TO HTML, CSS & WEB HOSTING

What is the internet?

The internet is a network of computers which spans the entire world.
The internet is a decentralized network – in other words, every computer connected to it is treated the same. There are no special internet servers which control the whole internet, but some servers have a special role which we will discuss in later lessons.

Computers which have content that people want to access are often called ‘servers’ because they serve up that content to other computers.

In practice, the internet is made up of many (many!) computers all around the world connected together by dedicated infrastructure. It is impossible to know exactly how many computers there are on the internet, but it is estimated there were more than 100,000,000 servers online by 2013. Imagine huge rooms filled with computers, joined by cables that cover every country and go under every ocean – that is what the internet is like physically! It doesn’t matter to us where the computers are or how we are connected to them – once you’re connected to the internet you can talk to any of the other computers.

The internet isn’t owned or controlled by any one organization. Many large organizations have a huge amount of servers they make available on the internet – for example it is estimated that Facebook alone had over 200,000 of their own servers in 2013, and Google have over ten times that number.

What is the World Wide Web?

The World Wide Web – or web – is not the same as the internet. The internet is the globally-connected network, and the Web is a way of accessing information over that network. We will understand more about how the web and websites work as we progress through this course.

How do web browsers work?

When you navigate to a website, your browser makes a request to the server that hosts the website.
Depending on what is contained in that request the server sends back different content in the response.
This request/response cycle is the basis of all websites.

You can see this happen when you navigate to a page – your browser shows an icon indicating that it has sent a request and is waiting for a response.

For example, in Google Chrome:

You can see in these images that the spinning circle is the way the browser indicates it is waiting for a response from the server. In the second image you can see that it has received some data: in this case, the title of the website which begins “Welcome to Facebook…”. However, it hasn’t yet fully received the entire response so it continues to show the spinning circle.

(This is similar to how other browsers, such as Internet Explorer or Firefox operate.)

The responses change depending on what is happening as you browse. For example, when you first load a website the server will send the first page: often a login page.

When you enter your login details the browser sends another request. This request contains extra data: your username and password. Now the server knows you are logged in so it sends a different response – the response it gives to users that are logged in, for example their own profile page.

As you continue interacting with the website you send more requests to the server, and the server sends back more responses.

Next time you are browsing websites try and notice when your browser makes a request and recognise the responses coming back from the server.

Multiple Request/Responses

Most modern websites require many requests and responses to load a single page. This is because modern websites are very complex and there are a lot of parts that must come together to form each page. As we go through this course we will learn more about each of these parts, but for now just remember this: each time you load a page your browser makes many requests, and the server sends many responses.

What is in a Response

The response from the server can contain a large variety of data: image data, HTML, JavaScript, CSS, or many other data types.

Sometimes these are even combined: perhaps the server sends HTML, CSS and JavaScript all together in a single response.

Again, we will understand more about each of these types of data as we proceed through the course.

For now the most important thing to understand is that when you view a web page you are viewing a ‘conversation’ between your computer and the internet server. Your computer comes up with part of the conversation via requests and the server finishes the conversation with responses. Try and see this back-and-forth conversation happening as you browse the internet – it will help your understanding the rest of the lessons very much!

What is HTTP?

So far we have learned that when we navigate the internet, browsers make requests to a web server and the servers send back a response. Today we are going to learn how these requests and responses are transmitted.
Have you noticed that web addresses (also called URLs) often begin with “http://” or “https://”?

This first part of a URL (URL stands for Universal Resource Locator) tells the browser how to communicate with the web server. This is almost always HTTP, so often the “http://” part of the address is left out. This is why you can just type “www.google.com” to get to the Google homepage: your browser assumes if you don’t say otherwise you want to use HTTP.

But what is HTTP?

HTTP stands for HyperText Transfer Protocol. This is an agreed standard which defines a way for computers to talk over the internet.

For our purposes we don’t need to understand the underlying details of exactly how the protocol defines computers can talk. We can think of it like a language that both our browser and the web server speak so they can understand each other when they make requests/responses.

It is also important for us to understand that there are different types of request in HTTP. These are defined by having different verbs.

So our browser makes a request using a particular verb and the server responds appropriately depending on the verb.

There are more than 20 HTTP verbs defined, but the most common are GET, POST, PUT, DELETE and HEAD. Of these, by far the most important are GET and POST.

When your browser navigates to a new webpage it sends a GET request to the URL you have typed. Sending a GET request asksW the server for some particular data that is located at the address you have supplied.

Here is a fake URL as an example: http://www.myfakeblog.com/category/this-is-my-post

When we type this into our browser, the browser makes a GET request to the webserver located at www.myfakeblog.com. The browser uses GET as a default in this case.

The server looks at the extra address information: /category/this-is-my-post and uses this to find the exact page that the browser is requesting.

This is a common pattern for a GET request.

POST requests usually mean the browser is sending data to the server, for example login details or other requests that require data from the browser to formulate the correct response. These POST requests are usually used for requests that change the state of the web page.

What is HTTPS?

HTTPS stands for HyperText Transfer Protocol Secure. This is an encrypted form of HTTP.

When we send a request it doesn’t go immediately to the server. Because the internet is a connected network of computers each request passes through many computers before arriving at the server, then the response comes back via the same route.

Since HTTP is unencrypted that means that all of the computers between your browser and the website can read all of the data you are sending back and forth!

You can use a utility called tracert to see how many computers are between your browser and the website you are accessing.

Try this experiment:

On windows, press your Windows key:

Then type “cmd” and press Enter. This brings up a command prompt, which looks similar to this:

Now type “tracert google.com” and press Enter. This shows you the number of computers (hops) between your computer and google.com. You can try this with other websites too by replacing the website name “google.com” with whatever web address you like.

You can see that many computers are between you and every website – because the internet is a connected network. Using HTTP each of those computers can read the traffic that passes through them.

To solve this problem an encrypted form of HTTP was developed, called HTTPS. This encrypts the data so only your browser and the web server can read it, using a technology called SSL (Secure Socket Layers). HTTPS is used for secure transactions such as financial information, private information, and login on most websites.

You should always look for the HTTPS symbol when using websites where security is important. On many browsers this appears as a padlock:

If we build a secure website we need to ensure it supports HTTPS for any private transactions.

 

Web Server Responses

We have learned that web servers respond to our requests by sending back various types of data.

HTML

One of the most important types of data returned by web servers is called HTML.

HTML stands for HyperText Markup Language. We can think of HTML as the content of our webpage, plus some extra information which tells the browser about the content.

For example, it may tell the browser how the content is structured, or how to get from the current web page to another web page, or how the page should be displayed. In the next few lessons we’ll start learning how to write our own HTML. For now the important lesson is:

HTML is the content of our webpage formatted in a way that web browsers can understand

CSS

CSS is the next most important type of data returned by a HTTP Response.

CSS stands for Cascading Style Sheets. This is a special display language which tells the web browser how to present the content in the HTML. This is what makes websites look pretty (or ugly!).

Again, we will learn how to write our own CSS later in this course, but for now the important lesson is:

CSS tells web browsers how to display the HTML content

HTML without CSS

It is possible to have HTML without any CSS. Web browsers are perfectly happy to display just HTML, or even just plain text.

HTML also contains several ways to display text in different ways, e.g. font size, color, bold, italic, even very simple animations. However, in modern web development it is very bad practice to change your display using HTML.

This is because CSS has many advantages over HTML display:

1.      CSS is much more powerful than HTML for styling

2.      CSS can be re-used across many pages on your site

3.      It is much easier to change your site if all the display logic is in one central place: your CSS files

It can be very very difficult to make changes to a site when some display logic is in HTML and some is in CSS, so it is considered good practice to keep your display logic purely in CSS, and keep HTML purely for content.

This is part of the software development practice known as separation of concerns – making sure that each part of your web site is responsible for only what it should be responsible for.

HTML: Content

CSS: Display

JavaScript

JavaScript is another important type of data returned by responses.

JavaScript is a coding language, unlike HTML and CSS which are markup languages. In other words, JavaScript is much more like a standard programming language.

JavaScript is the coding language that tells websites how to behave. It is responsible for the functionality of a modern website, including loading data in the background, changing CSS dynamically to provide animations, validating data and handling user interactions.

JavaScript code runs locally in your browser, not on the web server. The server sends the JavaScript code down as part of the response, and your browser then runs it on your computer. This allows your computer to understand how to interact with the website.

We will learn more about JavaScript later in the course too. For now, the important lesson is:

JavaScript is responsible for the behaviour of a web page

HTML: Content – a markup language

CSS: Display – a markup language

JavaScript: Behaviour – a programming language

As we progress we will understand more how each of these types of response is generated, and how the browser knows how to request all of this data from the web server.

Introduction to HTML

In this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to your browser.

Remember what HTML stands for? It stands for HyperText Markup Language.

Let’s look in more detail what this means.

‘Markup’ in computing means adding extra data to text in order to tell computers more information about that text. For example, in HTML we tell the computer which parts of the HTML document are to be displayed, which parts make up the navigation, even which parts are titles and which are content.

What is a HTML document?

A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more special than that. All we have to do is type our HTML into a document in a writing program – for example Notepad, or even Microsoft Word – and we have a HTML document.

Starting from the next lesson of this course we’re going to make our own simple HTML pages on our own computers, and learn all about HTML as we go.

First let’s understand what makes HTML special.

What are HTML tags?

HTML is just normal text, with additional information. This additional information is delivered through tags. Tags are the fundamental building blocks of HTML.

A tag looks like this:

Anything inside the “<” and “>” symbols defines the tag.

Can anything be a HTML tag?

Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only understand certain tags, so unless you use the tags that are officially defined as part of HTML then your tags will not work correctly.

We will learn all about the important HTML tags as we proceed through this course.

More about tags

Tags can be both opened and closed. For example, let’s look at a tag (don’t worry about what a tag is for now – we’ll get to it later):

This is inside my span! I can put anything I like here.

You can see that a tag is opened by having an initial tag such as . It is then closed with a second tag that has an additional “/” symbol. Anything can go between the opening and closing tags – this is known as the tag contents.

This whole example from the opening tag to the tag contents to the closing tag is known as a HTML element. In this case we have created a span element, because we are using a span tag to define the element.

Elements are made up of tags.

Self-closing Tags

Some tags don’t require opening and closing tags, they can effectively open and close themselves in just one tag. These are often known as self-closing tags.

Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags don’t actually close themselves, but it’s a helpful way to picture what is happening. (If you’re interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’t have to self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to have.)

A self-closing tag looks like this:

Tags that can exist on their own, i.e. be self-closed include: , and , amongst others.

Again, we will understand more about each of these tags as we encounter them when we start building our own website!

Tag attributes

The last important concept to understand about tags is that tags can have attributes as well as contents. Let’s add an attribute to our tag from before:

This is inside my span! I can put anything I like here.

Now our tag has a class attribute. Attributes can have values. In this case our attribute has the value exampleTag.

As with tag names, attributes can technically be anything. For example, we could have said:

This is inside my span! I can put anything I like here.

This gives our tag an attribute named “lemon” and with a value of “fruityAttribute”.

However, just like with tags there are certain attributes that are important and have meaning. We will learn about these as we learn about each tag.

Putting it all together

Here we can see all of the parts that make up an element.

Make sure you understand which part of the element is a tag, which part is an attribute, which part is an attribute value and which part is the element contents.

We will be referring to all of these throughout the course so try and memorise these now.

Viewing Website HTML in our browsers

In this lesson we learn how to view HTML using the free Developer Tools in our browser.
Before we begin building our own websites let’s look at the HTML that websites are already sending us.

Doing this helps us to ‘demystify’ HTML and to realise that websites aren’t magic – we can understand them and learn to build them ourselves!

All modern browsers – for example Google Chrome, Mozilla Firefox and Internet Explorer – have built in tools that let us look at the HTML sent to us from a web server.
Let’s try using these tools now.

I’m going to use the Online Training Courses lesson “What is HTTP” (http://www.free-online-training-courses.com/what-is-http/) as my example. But you can use the current lesson.
Each browser is slightly different. In my example I’m using Google Chrome, so what you see might be different.

First I see the webpage I’m looking at:

In order to see the HTML that this page is made up of I PRESS F12. This works in Google Chrome and in modern versions of Firefox and Internet Explorer. If this doesn’t work for you you might want to try upgrading your browser or installing another one.

Pressing F12 brings up the Developer Tools, which looks like this.

I have highlighted the Developer Tools in red. Let’s take a closer look at it.

We can see there are many tabs we can click, each of which shows different information about the webpage we’re looking at (again if you’re in a different browser this may look different for you – be brave, click and explore the Developer Tools until you can find the HTML! ).

For now, we’re only interested in the “Elements” tab – we want to see the HTML elements that make up this page.

Because my “Console” tab is selected at the bottom I have to press ESCAPE to hide it. Now I can see the Elements tab more clearly:

Hopefully you can recognize that we’re looking at some HTML tags like the ones we learned about in the previous lesson.

You can see that the HTML here is more complex than our previous examples, but they are still the same principle: elements made up of tags that have attributes and contents.

Take some time to explore the HTML of a few of your favourite websites. It’s ok if you don’t understand it – for now we just want to get used to what HTML looks like, and to become familiar with using Developer Tools to view HTML that our browser is displaying.

Creating our first HTML document

In this lesson we will walk through creating an empty HTML document and learn about HTML document structure and some simple HTML tags.

First, create a place to put our simple website on your computer. Right-click your desktop and select New -> Folder, like this:

You may have different programs installed or be on a different version of Windows so your options may be different, but you will have New Folder. If you’re on a different operating system such as OSX or Linux you can still follow this tutorial: just choose a place of your own to store the files we’re going to create.

Name your folder with a name you’ll remember. We’re going to use this folder to keep all our files in for this whole project. I’ve named mine “SCI Website Tutorial”:

Open your new folder, and right-click inside it. Again go to New, but this time click “Text Document”, like this:

Rename the text document to “index.html”. You need to replace the “.txt” extension with “.html” – when you do this you’ll be prompted if it’s ok to change the extension. We want to make a HTML file so click Yes.

Note: If you cannot change the file extension, you need to enable the option to show file extensions in Windows – by default file extensions are invisible. When working in web development it is useful to have file extensions visible so it is recommended to change this setting. Instructions for changing it (and a handy utility you can download that will change it for you automatically!) are available at this link: https://support.microsoft.com/kb/865219

Right click the HTML file and click ‘Edit’. This will open it in Notepad. If you can’t find Edit, you can open Notepad through the start menu, then use File – Open to open the index.html file you’ve just created.

When you’ve done this you should have an empty document in Notepad like this:

You can use much more advanced software than Notepad to do this, but an important part of this lesson is that you can use very simple tools to make websites, so we’re going to use Notepad. If you have a preferred text editor, such as TextMate, Notepad++ or another, then feel free to use those instead.

Copy the following text into your index.html file and save it:

This is our first SCI web page.

Once you’ve hit save you can close Notepad.

Now if you double-click your HTML file it should open in your local browser. If this doesn’t work you can open a browser (such as Chrome, Firefox, Internet Explorer) and drag your file into it to open it.

Here’s how the file appears when I open it in my web browser.

You can see that the location of the website starts with file:/// instead of the http:// we’re used to. (If you can’t remember what HTTP:// means then go back and review the lesson on “What is HTTP” earlier in this course). Now that you understand what HTTP is you can understand that we don’t need to use HTTP to access our index.html because the file exists on our own computer: HTTP is used for talking to other computers.

So we can guess that “file:///” means that the browser is accessing a file on our local computer.
The rest of the web address is then the location of the file on our own computer.

Underneath that we can see our web page. It’s not very exciting at the moment, as it just has a single sentence.

Go back to editing your notepad document and change the HTML contents of the  tag, like this (you can change it to whatever you like):

Make sure to save your index.html in Notepad. Then go back to your browser window and press F5 to refresh.

As you can see the text is changed on our simple webpage:

You can put whatever text you like in and it will appear on the web page.

This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to refresh is the simplest way of making websites. Of course when it comes to making more complex websites we will need to learn more complex tools, but this is an excellent way to understand the fundamentals of HTML.

In the next lesson we will look in more detail at the HTML we have so far in our simple webpage.

Understanding Basic HTML

In this lesson we’ll learn about some of the simplest HTML tags and how they function.

So far we have a very simple index.html:

This is our first SCI web page.

Let’s look in more detail at this HTML.

First, we can see a strange-looking tag that says

This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser what language we’re using to communicate with it. In this case, we are using HTML.

The DOCTYPE declaration must always come first in a HTML page. There are other possible values for DOCTYPE. If you look at webpages using the F12 Developer Tools (see earlier in the course for an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our course we are not interested in these other DOCTYPES: tells browsers that we want to use the updated version of HTML, which is currently HTML 5.

After the DOCTYPE declaration we can see our first HTML tag: .

If we look at the very end of the document we see the matching closing tag:

.

This means that everything else in the document is inside our tag. The tag acts as a container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.

Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested inside the tag.

Inside the tag we put two very important tags: and .

This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration, then a single tag, which contains and tags.

The Tag

The tag can contain a number of other special tags. We will learn about more of those in later lessons.

The important fact to remember about the tag is that it contains data that is not directly displayed as part of the page. Often it tells the browser about extra resources the browser needs to fetch to display the page properly, such as additional CSS or JavaScript files. The tag is also where we put metadata about the page.

Metadata is a fancy way of saying ‘data about the web page’. For example, in our tag we have a

About Me

Mr Sharahbil

I am currently following a course to learn all about HTML!

There’s nothing here you don’t already know. We’re just showing different text. You can replace “Mr Sharahbil” with your own name, and say whatever you like about yourself. Make the text in the tag personal!

Let’s add something new – how about a picture of ourselves?

Copy a picture you’d like to display into the folder, and give it the name “me.jpg”. If it’s not a .jpg file then replace .jpg with whatever the current extension for your picture is. I’m using a PNG file so I’ll call it “me.png” like so:

We want to add this image to our About page. To do this we’re going to use a new tag, the tag.

The tag

The tag is a self-closing tag that uses attributes to determine how it displays. If you don’t remember about self-closing tags and attributes then go back and revise our “Introduction to HTML” lesson from earlier in the course.

We want to add this tag:

We can see that the image tag has several attributes. Of these, the most important is the src attribute. This tells the browser what the source of the image is – in this case, our image is “me.png”.

The title/alt attributes tell the browser more about the image. When you hover an image with your mouse the title text is displayed, and the alt text displays instead of an image if the browser can’t find the image, or for people who use screen readers to look at the web, such as the visually impaired.

It’s good practice to always include a title and alt attributes, which should describe the image.

Let’s put the image in at the end of our “About Me”

:

Mr Sharahbil

I am currently following a course to learn all about HTML!

So our HTML should look like this:

And now our About page looks like this in the browser:

Troubleshooting: If your image doesn’t load properly then use the F12 Developer Tools to see the error. The browser will tell you where it is looking for the image – check that it’s looking in the correct place. If not then you can move your image to where it IS looking, or change your img src to point to where the image actually is. If you see funny characters like %E2%80%9D in your error, then it means your quote marks around the “src” attribute aren’t the right kind of quotemark… try deleting them and typing them again. Sometimes when we copy-paste we copy characters that LOOK the same but the computer treats differently! We will look at why this is in a future lesson.

Next – the tag

So we’ve added an image to our ‘About’ page. But what if we wanted to get between the Index and About pages? We need a LINK.

We all use links all the time to navigate the web – we’re so used to clicking text to take us to other pages we often don’t stop to think about how they work.

Links are just simple HTML tags that tell the browser “when someone clicks here, go to this page”. The tag is the tag – one of the most important HTML tags there is.

Here’s an example tag:

About

As you can see, we have another attribute to learn: the href attribute. This tells the browser where the link is pointing to. The contents of the element is what is displayed that you can click on. Of course, this doesn’t have to be just text: if you put an tag inside an tag then the image acts as the link!

Let’s add one link to each of our pages.

1. Put About into our index.html
2. Put Index into our about.html

You can put them wherever you like. I’ve added mine before the start of the

element, so it looks like this:

Now our pages both have links, so we can click from one to another!

Save both your files, and hit F5 to refresh. Try clicking from one page to the next, and back again. It’s starting to feel more like a real webpage!

How to add navigation to a simple HTML page

In this lesson we’ll add navigation between our two simple HTML web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
Our link at the top looks a little lost and alone. Most websites have more than one page, so let’s add an element that lets us navigate between multiple pages. In the process we’ll meet some more new tags, and even add our first CSS style.

Make the following changes to your index.html:

• Home


• About

SCI Website Tutorial

Making our first page

It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.

For now we only have a simple page, but later we will make it more complex and interesting.

What have we learned so far?

So far we have learned a few simple tags for placing text onto a page.

You’ll note that I’ve removed our old tag from inside the

. I’ve added an id attribute to the section – don’t worry about that for now, we’ll need it later.

I’ve also added a new

element which contains some HTML.

Make the same changes to about.html – remove the old link, add the SAME

element and the id attribute to section.

Now both pages should have a list at the top that looks like this:

Let’s look in detail at these changes.

The

,

and

elements

The

element is a special grouping element. It doesn’t do anything technically to the site, but it allows computers and search engines to understand how to get around your site. It is short for navigation. Each webpage should have one

element which contains links to the different sections of your website.

Inside our

element we’ve used another new tag, the

tag.

This tag stands for unordered list – it is used whenever we have a LIST of items… such as a list of sections for our website. There are other kinds of list tags, such as an ordered list or a numbered list, but the most appropriate list for navigation links is an unordered list because it doesn’t matter what order the links are written in.

Inside the unordered list we have two

tags. These stand for list items – a

must have one
• for each item in the list. And each list item contains our links.

Now whenever we want to add a new page to our site we just have to add a new

to our list which contains the appropriate link. For example, if we wanted a Contact page, we might create Contact.html and add:

Contact

I’m sure you can think of many other pages you might want to add to your own sites.

Styling our navigation list

We are going to look at CSS in more detail later. For now let’s just add some to make our navigation look a little nicer.

Inside our element on both pages, add the following HTML:

Now if you save and refresh you’ll see we have a navigation bar on both of our pages, and the pages all look much prettier.

For now, don’t worry about understanding the code we’ve just added. All of the unfamiliar looking text is CSS, which we will cover in a future lesson. You may notice the names of colours we’ve added – you can change those colours and save and refresh and see what happens!

Experiment by setting the colour names to different colours and seeing how it affects your website. See what combinations you like!

Wait, didn’t you say NOT to put styling in our HTML? What is this

This is a list of rules. Let’s look at some of them to understand how a rule is made up.

html { font-family: Arial; }

Each rule has this structure: first it describes what HTML elements the rule applies to. Then, inside curly braces “{” and “}” it describes what the rule does.

So this first rule applies to the HTML element “html”. Remember the tag we learned about? This tag contains ALL the html for our whole webpage. So any rules we put in the “html” rule apply to every element on the page.

What does this rule do?

Each CSS rule has a property and a value. In our example, the property is “font-family” and the value is “Arial”.

Properties are defined by CSS, so we have to use the correct properties to get the effect we want.

In this case, the CSS property “font-family” lets us set the font on any element. In this case, we are setting it to the font ‘Arial’.

So our rule

html { font-family: Arial; }

sets the font for anything within the tag to be Arial.

Let’s look at another rule:

body { padding: 10px 30px; }

This rule applies to the tag. It is setting the padding property to the value “10px 30px”.

We will look in more detail at properties like “padding” in later lessons. For now we just want to understand how these rules are formed.

Finally look at this rule:

a { text-decoration: none; color: blue; }

This rule applies to the tag. This rule sets more than one property. It sets “text-decoration” to “none”, and “color” to “blue”.

So we can set multiple properties by putting a semi-colon “;” between them in our rule.

In this case, we are setting all links on the page (remember, links are defined by the tag!) to have no decoration (i.e. no underline) and to be blue.

CSS Rule Structure

Now we can see how our rules are created. First there is a selector, which tells the browser which elements to apply the rule to. Then there is a list of properties and values.

In the next lesson we will learn more about selectors in detail.

Understanding CSS Selectors

We have seen that CSS is a list of rules that tell our browser how to display the HTML, and we have looked at how rules are formed. Let’s look in more detail now at selectors.
In this lesson we learn about one of the main parts of a CSS rule: CSS selectors.

Remember, a selector is the part of a CSS rule that goes outside of the curly braces “{” and “}”. This tells the browser which elements the rule acts upon.

For example a selector a applies to ALL tags. The selector html applies to all tags.

What about this selector that is in our example?

.important

Remember when we learned about classes and ids earlier in the course? If not, you should go and review the lesson “Class, ID and

and in HTML” which came in the last part of the course.

Just in case, here’s a reminder. Class and id are both attributes we can put on our HTML tags. We put a class on any tags we want to share particular CSS rules, and we put an ID on any tags we want to be unique.

For example:

We only want ONE main heading, so we give this tag a unique name. We only have ONE element with any ID on a page.

We might want lots of elements to be marked as ‘important’ so we make a class called important and apply it to LOTS of elements.

To put a CSS selector via ID we use the “#” symbol, and for a class we use the “.” symbol.

So our rule .important applies to any element with a class of “important”.

If we wanted to apply a rule to only one element, then we give that element an ID, e.g. id=”myElement” and then create a rule for it:

#myElement { … }

What if we had a lot of elements that we had marked with a class, but we only wanted some of them to have a particular rule? For example, imagine this HTML:

Some list item

Another list item

Here’s a link!

We don’t want to change the way our ‘important’ things appear everywhere, but we do want our link to have something extra, maybe be in bold.

We can do this by combining parts of our selectors. We can specify BOTH a type of element and a class, like this:

a.important { font-weight:bold; }

This means that this rule only applies to elements that have a class “important”.

Similarly, we could use an ID in the same way:

a#myUniqueLink { font-weight:bold; }

Of course, since there should only be ONE id #myUniqueLink on the page then we can have the same effect without the “a”.

Inherited Selectors

What about the very long selectors we have in our example CSS file? Look at this one:

nav ul li a { color: white; }

This specifies FOUR tags.

When we list tags like this, we are saying that we only want this rule to apply to tags that are inside the preceding tag. So we would translate our rule as saying “apply this rule to any tag that is inside an

that is inside a

that is inside a
”.

So only links inside our

get colored white!

This means we can have different rules for different parts of the page, like this:

#mainSection a { color: orange; }
#otherSection a { color: green; }

Now any tags inside the tag with ID #mainSection will appear orange, while any tags inside the tag with ID #otherSection will appear green!

Pseudo Selectors

Finally there are some selectors called ‘pseudo selectors’. These apply to elements that are in certain states. For example:

a:visited { color:purple; }
a:hover { color: orange; }

This kind of selector is mostly seen with the tag. Remember, is a link. Links can be visited or unvisited. Often websites show you a different colored link when you click it – that is achieved using the a:visited pseudoselector. Now when you click a link on our page, it shows as purple so you know you’ve already been to it.

Similarly, :hover allows you to change an element when your mouse hovers over it – so we get a nice visual effect on our links by changing their color when we hover them.

Selector Specificity

This is a complex topic, but it’s important to understand how different rules apply. Remember the golden rule is:

The most specific rule always wins

For example:

What colour is this text?

What colour will our paragraph be?

It has BOTH a class and an ID. And one tells it to be red, and the other tells it to be blue.

Since the most specific rule always wins, and an ID is more specific than a class (because you can only have ONE ID) we know that the #someParagraph rule will “win” and it will be red.

Similarly, any rule that specifies a type of element is more specific than one that does not:

p.superSpecial { color: yellow; }
.superSpecial { color: green; }

In this case the colour will be yellow because the first rule is more specific: it only applies to elements whereas the second rule applies to any element with the class .superSpecial.

It can be very difficult to understand specificity – the best way is to practice and experiment with your own website. We want to give you the ability to start experimenting for yourself so you can learn by experience!

Using Simple CSS Styles for text

In this lesson we learn some styles we can apply with CSS to make text on our websites more visually attractive.

Let’s make some changes to the CSS in our sample website so we can learn some new CSS styles.

(If you don’t have a sample website then return to our course on understanding basic HTML and work through those lessons)

Find the selector that applies to the

tag. From the last lesson you should know that the selector for that is just “h1”.

Change the CSS for that line from this:

h1 { font-size: 1.8em; }

To this:

h1 { font-size: 1.8em; text-transform: uppercase; text-align: center; text-decoration: underline; color: white; background: black; padding: 10px 0px; }

So we have added a number of extra styles to our

tag. Let’s look at what has changed.

Originally our

element (which you hopefully remember is the main title of the page – the “heading 1”) on the page appeared like this:

Now with all the extra styles it appears like this:

Let’s look at why by looking at each style in turn:

Font-Size Style

The “font-size” style hasn’t changed. We originally set it to “1.8em” and that is still the same. Font-size determines how big the text appears on the screen. It can be in pixels or ems or points.

We are usually most familiar with expressing font sizes in points – these are the units we use in word processing programs when we change the font size. So we would express this as “font-size: 12pt” in CSS.

An em is an alternative way of expressing how large a font can be. They are scalable depending on how large the font size is set to in the users browser. So a font-size of 1.8em is saying “set it to 1.8x the size of the font”, or “set it to 180% of the normal font size”. In other words anything larger than 1.0em increases the font size, anything less than 1em shrinks it.

You can experiment with this yourself using the Browser Tools – practice setting the “font-size” element to 0.5em, then 1em, then 1.5em so you can see if for yourself!

Text-Transform Style

Text-transform allows us to change the case of the letters. For example, if we have a particular part of the page we want to appear in all uppercase or lowercase, we set text-transform to “uppercase” or “lowercase”. If we wanted to draw attention to all our links perhaps we would put all of our tags in uppercase:

a { text-transform: uppercase; }

Text-Align Style

Text-align defines how the element is aligned on the page. You may be familiar with centering text, or aligning it to the left or the right. Text-align takes everything inside the element(s) defined by our selector and aligns it either left, right or center, e.g.:

text-align: center;

You can see the the text of our title is now centered since we applied this rule.

Text-Decoration Style

By now I’m sure you’re guessing what each of these styles does! Text-decoration allows us to apply effects to the text. In this case, we are adding an underline:

text-decoration: underline;

We could also set it to “overline”:

Or to “line-through”:

Color and Background Styles

color: white; background: black;

These are self-explanatory – you can choose a foreground and background color using the color and background styles. For example:

color: orangered; background: aliceblue;

As you can see, my browser supports complex colors like “aliceblue” and “orangered”.

However, we cannot rely on naming all of our colors: what if we want a very subtle shade? This is where hex color codes come in.

Usually we specify our colors using a hex code. This is a six digit number, written beginning with a “#” symbol, e.g. “#000000”.

Each digit can be 0-9, or A-F. This is a hexadecimal system, so A, B, C, D, E and F are all considered larger “numbers” than 0-9. Think of them like the Jack, Queen, King and Ace in a pack of cards: in many card games they have a value of Jack = 11, Queen = 12, King = 13, etc.

So in hexadecimal A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15.

So the lowest possible value for a colour code is “#000000” and the highest is “#FFFFFF”.

The six digits are divided into three pairs, one for Red, one for Green and one for Blue – in that order.

So pure red would be “#FF0000”. In other words, the maximum amount of red, and no green and no blue.

Pure Green is then “#00FF00” – maximum green, but no red or blue.

Pure Blue is “#0000FF” – maximum blue, but no red or green.

Now you know this you might be able to guess what color “#000000” corresponds to. No red, no green, no blue… so it must be black!

Similarly, “#FFFFFF” is all red, all green and all blue – when we mix all the colors together we get white!

We can also mix colors. So

color: #EE5566; background: #99AADD;

translates to look like this:

Try experimenting with your own color codes by entering values in the “color” field using the Browser Tools. Start with the “#” symbol then enter six digits from 0-F and get a feel for how they are created!

Padding Style

The final style we have added is “padding”. Let’s see if we can see what difference our padding makes.

Let’s look again at our title:

This is with padding set to “10px 0px”. What if we set it to “0px 0px”?

Can you see the difference? Without the padding there is less space above and below the text. So padding adds extra space to the inside of an element.

Padding can get very complex so we will look at that in more detail later in the course.

So we have learned a number of CSS styles:

font-size, text-transform, text-align, text-decoration, color, background, padding

We can apply these to any element to transform the way our text appears.

Padding, Border and Margin in CSS

In this lesson we learn about three of the most important CSS styles for positioning on our web pages: Padding, Border and Margin.In the last lesson we first learned about ‘padding’ and saw how it adds extra space to the inside of a HTML element. Let’s look at this now in more detail.

This may look complicated, but once you understand how these four pieces fit together you will have a great understanding of how HTML elements are displayed on the page.

Each HTML element has “content”. This is the text or images or whatever is in the actual element.

e.g. My content goes here inside the tag!

The sentence “My content goes here inside the tag!” is the content of the span element.

If we don’t do anything special to the tag then it will just display as a ‘normal’ sentence.

But we can apply CSS rules to it. Let’s give it an ID first so we can apply a rule easily:

My content goes here inside the tag!

This appears like this on the page:

Let’s add a border by applying some CSS:

#testSpan { border: 1px solid black; }

Now it appears like this:

By now you’re familiar enough with CSS that you can probably guess how the border tag works. The first part of it is the border thickness, in this case “1px”. Then there are some definitions for how the border could appear – dotted, solid, etc. Then finally a colour, which can be a named colour or a hexcode, like we saw in the last lesson.

So we could say:

#testSpan { border: 6px dotted #FF0000; }

And this looks like this:

In this case it’s a thicker border: 6px, instead of 1px. And it’s dotted instead of solid. And you remember that #FF0000 is the hexcode way of saying “all red, and no green or blue” – in other words, red!

For simplicity I’m going to reduce my border back to solid and only 2px:

#testSpan { border: 2px solid #FF0000; }

Now we can see where the border goes compared to the content. As you might expect, it goes all around!

Let’s look at how padding affects the element. We remember from the last lesson that padding adds space inside the element.

#testSpan { padding: 10px; border: 2px solid #FF0000; }

So now we have 10 pixels of space between the content and the border.

What if we wanted 10px on the top, but not on the bottom?

Well, there are two ways of doing that. We could specify only padding on the top, like this:

#testSpan { padding-top: 10px; border: 2px solid #FF0000; }

Or we could specify it using the padding tag with some extra inputs, like this:

#testSpan { padding: 10px 0px 0px; border: 2px solid #FF0000; }

Both of these have the same effect.

This is because with padding, border and margin, you can specify different values for “top”, “bottom”, “left” and “right” by putting “-top” after the name of the style.

For example:

padding-right: 3px;

Sets a padding to 3px on the right only.

Or “border-bottom: 5px solid yellow;” puts a solid yellow border 5 pixels thick only on the bottom.

If we just write “border” or “padding” without specifying a direction then the browser assumes we mean all four directions. So “padding: 10px;” is a short way of saying:

“padding-right: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px;”

Each style also allows us to use shorthand.

If we put just one value, it applies to all four directions.

If we put two values, then the first applies to top/bottom, and the second applies to left/right.

For example:

Padding: 10px 200px; looks like this:

Top and bottom both get 10px, and left and right both get 200px.

What about three values?

Padding: 10px 200px 60px; looks like this:

Top gets the first value (10px), left and right both get the second value (200px) and bottom gets the final value (60px).

And all four allows us to put a different value on each direction:

Padding: 10px 200px 60px 45px;

So we can set a different value for each. This helps us to position text, elements etc within other elements.

What about Margin?

We have seen that padding adds space inside an element. Margin does the same for outside the border. Remember how they all fit together?

So increasing the margin puts space between our element and any other elements.

Just like padding, margin can be specified as margin-top, margin-bottom, etc. And it uses the same shortcuts as padding, so “margin: 10px” means “put a 10 pixel margin around the whole element”.

Now we understand how to space out the elements on our page!

Loading External CSS Files using the tag

In this lesson we will learn how to separate our CSS into separate files and load it using the tag.

So far we have been putting CSS straight into our HTML files using the