Author: paul.gray

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

Use the buttons below to navigate through the lesson

[show_slider name=more-advanced-css]
[the_ad id=”13518″]

Let’s learn some new styles that may help.

Border-radius

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

 

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

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

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:

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?

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!

[the_ad id=”13518″]

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

Use the buttons below to navigate through the lesson

[show_slider name=loading-external-css-files-using-the-tag]
[the_ad id=”13518″]
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.

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

Should become:

Once you have removed the <style> the HTML should look a lot shorter!

Let’s refresh our page.

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:

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!

[the_ad id=”13518″]

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.

Use the buttons below to navigate through the lesson

[show_slider name=padding-border-and-margin-in-css]
[the_ad id=”13518″]
Each HTML element has “content”. This is the text or images or whatever is in the actual element.

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:

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!

[the_ad id=”13518″]

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.

Use the buttons below to navigate through the lesson

[show_slider name=using-simple-css-styles-for-text]
[the_ad id=”13518″]

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

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

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.

[the_ad id=”13518″]