Wednesday, 15 March 2017

Learn The Basics On How To Code The HTML ''Part Four'' What Is CSS

What Is CSS?

Description: css thumbnailThis is the third part of a series in which we learn how to make websites. If you haven’t completed Part Two then you should do that first. In Part Two we made a very simple website consisting of a couple of HTML files on our own computers – you’ll need that website to continue, as we’re going to build on it in this part.

In this lesson we learn about one of the main types of data websites send to our computers over the internet: CSS.

We now have a basic knowledge of HTML – enough to start working on more advanced topics.

We would like to make our website look more attractive. The best way to do this is using a technology called CSS.

CSS stands for Cascading Style Sheets. Let’s look at what this means.

A ‘style sheet’ is a list of rules for how we want our webpage to look. For example, we might have a rule that says “all headings are green”, or one that says “put a big space between every paragraph”.

What does it mean that our style sheets are “cascading”?

In this context, ‘cascading’ means that we can have multiple rules applying to the same piece of HTML, and the rules will ‘cascade’ to determine which one wins. In CSS the most specific rule always wins. Let’s understand this with an example:

If I have two rules like this:

  • All headings are green
  • The second heading on the page is blue

Then what colour will the second heading be? These two rules contradict each other: it can’t be both green and blue!

Because the most specific rule always wins we can see that the second rule is going to be used. The second rule is more specific: it only applies to the second heading. So on our page all the headings will be green, except for the second which will be blue.

This is an example of the ‘cascading’ effect of the rules in our style sheets.

What kind of rules can we put in our style sheets?

CSS contains many possible rules and is very powerful. Here are just some of the rules we can apply:

  • Colour of items on our page
  • Position of items on our page
  • Size of items
  • How parts of the page are divided up
  • Background images
  • Animations
  • Visual effects, e.g. rounded corners

Example CSS

Here is the CSS we have added to our site so far. At the moment it lives in the <style> tag in the <head> section of our HTML. We will look at a better place to put it in a later lesson.


html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
.important { font-weight: bold; color: red; }


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 <html> 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 <html> tag to be Arial.

Let’s look at another rule:

body { padding: 10px 30px; }

This rule applies to the <body> 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 <a> 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 <a> 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.

Description: CSS1

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

Description: css thumbnailWe 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.

Description: CSS1

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

What about this selector that is in our example?


Remember when we learned about classes and ids earlier in the course? If not, you should go and review the lesson “Class, ID and <div> and <span> 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:

<h1 id=”mainHeading”> 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.

<li class=”important”> 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:

<li class=”important”>Some list item</li>
<li>Another list item</li>
<a class=”important”>Here’s a link!</a>

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 <a> 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 <a> tag that is inside an <li> that is inside a <ul> that is inside a <nav>”.

So only links inside our <nav> 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 <a> tags inside the tag with ID #mainSection will appear orange, while any <a> 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 <a> tag. Remember, <a> 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:

<p id=”someParagraph” class=”superSpecial”>What colour is this text?</p>

#someParagraph { color: red; }
.superSpecial { color: blue; }


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

Description: css thumbnailIn 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 <h1> 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 <h1> tag. Let’s look at what has changed.

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

Description: CSS3-1

Now with all the extra styles it appears like this:

Description: CSS3-2

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 <a> 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.

Description: CSS3-1

Description: CSS3-2

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”:

Description: CSS3-3
Or to “line-through”:

Description: CSS3-4

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;

Description: CSS3-5
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:

Description: CSS3-6

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:

Description: CSS3-2
This is with padding set to “10px 0px”. What if we set it to “0px 0px”?

Description: CSS3-7

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

Description: css thumbnailIn 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 understandi Each HTML element has “content”. This is the text or images or whatever is in the actual element.Description: CSS4-1

e.g. <span>My content goes here inside the tag!</span>

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:

<span id=”testSpan”>My content goes here inside the tag!</span>

This appears like this on the page:

Description: CSS4-2

Let’s add a border by applying some CSS:

#testSpan { border: 1px solid black; }

Now it appears like this:

Description: CSS4-3
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:

Description: CSS4-4

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; }

Description: CSS4-5

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; }Description: CSS4-6
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; }

Description: CSS4-7

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

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

Description: CSS4-8

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:

Description: CSS4-9
Top and bottom both get 10px, and left and right both get 200px.

What about three values?

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

Description: CSS4-10
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;

Description: CSS4-11

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?

Description: CSS4-1

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

Description: css thumbnailIn this lesson we will learn how to separate our CSS into separate files and load it using the <link> tag.
So far we have been putting CSS straight into our HTML files using the <style> tag.
However, we have seen that this has many disadvantages. If we have many pages on our site we have to copy the same CSS into every page. Then if we choose to change it we have to change it on EVERY page… and if we miss one then everything will look different on that page.

It would be better if we could put all of our CSS in a separate file, then changing that file would automatically update every page on our site.

Luckily we can do this, using the <link> tag.

First, let’s move all of our CSS out of the <style> tag.

Copy all of the CSS and save it in a new Notepad document:

html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; text-transform: uppercase; text-align: center; text-decoration: underline; color: white; background: black; padding: 10px 0px; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
.important { font-weight: bold; color: red; }

Save this as “Site.Css” in the same folder as our HTML files.

Description: CSS5-1

Description: CSS5-2

Now remove the <style> tags from the <head> section in BOTH our HTML files.

Description: CSS5-3

Should become:

Description: CSS5-4
Once you have removed the <style> the HTML should look a lot shorter!

Let’s refresh our page.

Description: CSS5-5

Oh. That hasn’t worked – we’ve lost all our CSS styles!

Why is that?

It’s because even though we’ve put all our CSS into a separate file we haven’t told the browser that we need to load that CSS alongside our HTML.

We do this using the <link> tag.

Add this tag to your <head> section:

<link rel=”stylesheet” type=”text/css” href=”site.css” />

There are several attributes to the link tag.

The “type” attribute tells the browser what kind of information is contained in the linked file. In our case it is “text/css” because it’s a text-based CSS file.

You may recognise the “href” attribute from links you’ve seen on the <a> tag. This tells the browser where the link is located. In our case, we want to load “site.css”.

Finally the “rel” attribute tells the browser that what we are loading is a stylesheet that it should apply to the page.

Now if we hit refresh:

Description: CSS5-6

Everything looks just like it is supposed to!
Now we can change our CSS file, and update the entire site.

Try experimenting with editing the CSS in your file – space things out differently, change the colors, make it look however you like!

More advanced CSS

Description: css thumbnailIn this lesson we will learn some more CSS styles we can use to develop the look of our pages.
By now we’re used to applying styles, and we have our own separate CSS file to add them to.
I hope you’re beginning to have ideas of how you could make your personal webpages look and how you can use each style to get the maximum effect.

Let’s learn some new styles that may help.


Border-radius is a new style that gives a modern-looking “rounded corners” effect. For example:

H1 { color: white; background: red; border-top: 10px solid #ffaadd; border-bottom: 10px solid #ffaadd; padding: 10px; border-radius: 54px ; }

 Description: CSS6-1

Here you can see that the border-radius takes a pixel value and makes the corners appear round. You can see that it affects both the background (red) and the border (pink).


Box-shadow adds a shadow effect to our element. Let’s put a shadow on our title:

H1 { color: white; background: red; border-top: 10px solid #ffaadd; border-bottom: 10px solid #ffaadd; padding: 10px; border-radius: 54px ; box-shadow: 10px 10px 10px black; }

Description: CSS6-2

Float Styling

Float is a complex style. It removes the element from the flow of the page and makes it ‘float’ to either the left or the right, letting everything else flow around it. For example:

Description: CSS6-3

In this example we have a few paragraphs of text, and a couple of images.

Instead of having the images above or below the text we want to mix the two, so we float the images within the text. The CSS syntax is just:

.selectorToFloat { float: left; }

(or float:right, of course!)

Floats can get very complicated. The best way is to try them, so put some text and images in your HTML (remember the <img> tag!) and try moving the images around with “float” to see how it works.

Width and Height

Sometimes we want to set the width and height of particular elements in CSS. We do this by simply setting “width:” and “height:”.

E.g. “width: 200px; height: 100px;” would resize an image to those heights in pixels.

Display Style

The CSS “display” style is the final one we will look at in our introduction to CSS.

Remember when we learned about <div> and <span> and how one behaved as a block, and the other inline?

Description: CSS6-4

We can achieve the same effect for any element we choose with a selector by setting the display style:

Display: block;
Display: inline;

Display can also be set to hide/show elements. Currently this isn’t very useful as we haven’t yet learned how to apply code to our pages, but when we begin to write JavaScript it is sometimes useful to set a CSS style to hide elements.

CSS Introduced

I hope you now have enough understanding to see how to layout a basic page in CSS, and how to apply selectors to elements.

By using the CSS we have learned you can begin to design your own pages.

Try creating a HTML page with your own content and styling it however you like! Practice will make you a much better web designer.

We have only covered the basics so far, but if you understand everything so far in the course you are well on your way to making some awesome websites and understanding how the internet works!

No comments:

Post a Comment

Designed by Anyinature