How To Make Your Web Pages Look Cool

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

This is the fifth module in the How to Make Your Own Website Tutorial.

In the previous module, we talked about “the secret” that most developers won’t tell you! We saw an example how to discover new HTML tags and plug them into your web pages. In this module, I will show you how to make your web pages look cool!

Watch It On YouTube

The Basics Of Web Programming

So far we have learnt the basics of HTML, the most common tags and got a very simple web page up and running locally (on our machine or using CodePen). But there is more to web programming than just HTML, in fact there are 3 fundamental web technologies that work together to bring web pages to life. All 3 are required to create beautiful websites.

1. HTML

HTML provides the structure to our web pages. You can think of HTML as a noun! This is the content we want to display in our web page. We cover this already in previous modules.


Enter your email below and receive everything you need
to get started with coding! ALL 100% FREE!

2. CSS

Cascading Style Sheets (CSS) provides the styling for our web pages. Think of CSS as a adjective. It describes the noun. CSS is how we want to display our content in our web page. This is what we will focus on in this module.

3. JS

Java Script (JS) is the most advanced out of the 3 technologies and provides the dynamic elements in a web page. Think of JS as a verb which describes action! JS allows our web pages to be more dynamic as opposed to static content. We will cover JS in a future module.

HTML + CSS +JS = Web Page

Introduction to CSS

CSS3

CSS describes the presentation of a web page or more commonly multiple web pages. This separation of data or content from presentation is a very common programming concept that you will find in most languages. It makes sense to have this separation of concerns for a number of reasons.

CSS is a completely different language to HTML with it’s own syntax. We are currently on CSS version 3 which is abbreviated to CSS3.

Why Separate CSS from HTML?

  • Allows HTML to focus just on the content and leave the formatting and styling to CSS. This helps keep HTML files small and concise.
  • We can use a single CSS to define the style of a whole web site not just one web page! So CSS allows us to scale up.
  • A web site maybe made up of dozens or even hundreds of individual web pages, imagine if the the style was defined separately in each web page and then we decided we wanted to change the font size or colour for the whole site? It would be a massive job! But with CSS we would just need to change it in one place.

CSS Syntax

The basic format of CSS is:

selector {
    property1:value1;
    property2:value2;
    ...
}
...

The selector “selects” the HTML element to style. The code between the brackets declares the properties to apply when styling that element. The brackets just enclose the start and end of the declarations. A semi-colon is used to end each declaration. A CSS file defines a number of selectors and style properties to apply to those selectors.

For example:

h1 {
    color:green;
}

p {
    color:red;
}

This simple CSS selects the header element and styles it red. It will also style the paragraph element in colour blue! CSS is usually stored in a file with extension .css and will contain many styles for different elements contained in your web pages.

Much like HTML, the browser knows how to interpret our CSS declarations and apply them to style our web pages.

Colours

CSS defines a set of supported colours which we can reference in plan English. Like red, white, black, yellow. You can find the full list of supported colours here.

We can also define whatever colours we want using hex. With hex, the digit pairs indicate the red, green, and blue component in the RGB system.

For example, #0000ff has 0 for red, 0 for green and ff for blue. ff means the max amount of blue.

Discussing hexadecimal notation is really out of scope for this tutorial. Suffice to say it’s a number system that has is base 16 instead of our usual decimal system which is base 10. Google is your friend if you wish to learn more about hex.

For our purposes of web design, a simple example will demonstrate all we need to know. For instance, to make our header gold, we would declare:

h1 {
    color:#ffd700;
}

But how do I know that hex #ffd700 is gold? Well, we can simply use a colour picker like colors.io to help us get the hex to use in our CSS! Try it out!

Fonts

As well as colours, we can also define what fonts we want to use! Luckily Google has a large library of ready made free fonts that we can simply import into our CSS!

This is the syntax to get one of those fonts and use it to style our HTML content. This should be declared at the top of the CSS file. We simply list the fonts we want to import separated by the pipe (“|”) character. In the example below, I am importing “Holtwood One SC”, “Source Code Pro” and “Abel” fonts.

@import url("http://fonts.googleapis.com/css?family=Holtwood+One+SC|Source+Code+Pro|Abel");

This declaration imports the font so that it can be used by our styles. We still need to apply the font to individual style the elements and this is done like this:

h1 {
   font-family: "Holtwood One SC", Arial, sans-serif;
}

Notice how we have a list of fonts separated by commas. This is to ensure the page works even if the Google font “Holtwood One SC” fails to load for some reason. If this happens, the header will be styled using Ariel and if that is not possible it will be styled using sans-serif.

The browser will always attempt to apply the first font in the list and if that is not possible it will try the next font and so on. It is good practice to end this list with a font that will always be available by default like “sans-serif”.

Useful CSS Declarations

The CSS language defines a large set of keywords we can use to style our HTML elements to achieve the look we want. It would be very boring to go through each single one here. Similar to how we introduced HTML, I will cover the most common ones to get you started and then you can use “the secret” to do the rest!

Again it is the high level concepts that are important to understand. That is how CSS is coded, what is the basic syntax and how it interacts with HTML. The rest is about practice, experimentation and experience! We are merely introducing CSS in this module.

Margin

Margin is used to generate space around elements. There are 4 margin properties that can be used to define space in each direction around the element. You can declare each one separately. Let’s give our header tag some room to breathe! The px means pixels.

h1 {
    margin-top: 20px;
    margin-right: 10px
    margin-bottom: 20px;
    margin-left: 10px;
}

If you want to give the same margin to all four directions you can use a CSS short hand:

h1 {
   margin: 10px;
}

Padding

Padding is very similar to margin.

h1 {
   padding-top: 20px;
   padding-right: 10px
   padding-bottom: 20px;
   padding-left: 10px;
}

If you want to give the same margin to all four directions you can use a short hand:

h1 {
   padding: 10px;
}

Margin is outer space of an element, while padding is inner space of an element. Margin is the space outside the border of an element, while padding is the space that is inside the border of it.

Margin vs Padding
Margin vs Padding

Font-size

The font-size property controls the size of the font. As you can see most CSS declarations are pretty intuitive! Usually font-size is declared using em in CSS, although px (pixels) or percentage (%) can also be used. An em is equal to the current font-size, for example, if the font-size of the document is 12pt, 1em is equal to 12pt.

h3 {
   font-size: 2em;
}

Font-style

Font style allows us to apply effects to font. For example, if we want to make our sub header italic, we would declare:

h2 {
   font-style: italic;
}

Background

Background defines the background colour of the element. If we want to style the whole web page we would set the background on the body element like so:

body {
   background: green;
}

Styling Anchors

Remember anchors are links to other web pages and they also can be styled using CSS. We can style anchors as follows:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: purple;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: blue;
}

The text between /* and */ is a comment for us programmers and will be ignored by the browser. We can put helpful comments for ourselves and other programmers who may need to look at our code.

Here is a CodePen to demonstrate:

See the Pen NdVGxy by Learn To Code London (@learntocodelondon) on CodePen.

Selector Types

So far we have used the most basic form of selector to identify the HTML element we want to apply our CSS style to. We have used the HTML tag directly in the CSS. This is called the element selector. There are other selector types we can use and this gives CSS a great deal of flexibility.

Element Selector

This is what we have covered so far. You use the tag name as the selector and the style is applied to all tags of that type in the HTML document.

tag {
    ...
}

We can also list tags to apply the style to:

tag1, tag2, tag3 {
    ...
}

Id Selector

The id selector will style only the tag with that id. The id selector starts with a hash (“#”). Note: the id you use in CSS must refer to an id attribute applied to exactly one element in the HTML document. You should not have more than one tag with the same id attribute in one HTML document.

For example:

#first {
    font-style: bold;
}

And in our HTML:

<p id="first">This is the 1st paragraph which will be styled in bold!</p>
<p>This is the second paragraph which will not be styled bold</p>

Class Selector

A class selector will style all elements which has a specific class. You can think of this selector as being used across different types of tags. The class selector starts with a dot (“.”).

For example:

.red {
    color: red;
}
<h1 class="red">This headline will be red</h1>
<p class="red">This paragraph will be red too</p>

How to use these selectors to structure your CSS declarations will be up to you. I would suggest starting with the element selector for simplicity. If you want to style a particular tag with a unique style then use the id selector. If you want to apply a style across a number of different tags then the class selector is your friend! Although the latter can also be achieved using the element tag and listing tags. There are sometimes multiple ways of doing the same thing and it will be down to personal choice.

3 Ways Of Using CSS

Now that we understand how to write CSS, we also need to understand how to get the browser to apply the CSS to our web page. There are 3 ways to associate your styles with a web page.

Method 1: Inline CSS

This is used to apply a style directly in the HTML document using the style attribute. You can use the style attribute on any HTML tag! Generally this method of using CSS is discouraged because it defeats the whole idea of separating style and content. However it can be useful as a quick and dirty way to apply style. It is useful where you have only a few web pages making up your website or the element you are styling is quite unique and only appears in one or two web pages.

Let’s use this method to style our Hello World HTML page! Again we will use CodePen to demonstrate this.

See the Pen rjbXeL by Learn To Code London (@learntocodelondon) on CodePen.

Method 2: Internal CSS

This is similar to inline method, but we define the CSS in one section inside the head section of the web page. The styles are inside a <style> tag.

Let’s use this method to style our Hello World HTML page! Take a moment to compare the two methods and identify the differences.

See the Pen GrLVNY by Learn To Code London (@learntocodelondon) on CodePen.

Method 3: External CSS

This is the best method and can be used to define the style of an entire web site consisting of many pages. The styles are saved to a separate file with extension .css. I usually call the file style.css. This file is then referenced from the HTML document.

Have a look at the CodePen below to see this in action. Click CSS to view the CSS file. Notice how style.css is included using the <link> tag in the header of the document.

See the Pen PWgMpV by Learn To Code London (@learntocodelondon) on CodePen.

Putting It All Together

Let’s now revisit our skateboarding web page example from module 3 and apply a CSS style to it! Here is an example how to make our web page look cool!

See the Pen KaLKeE by Learn To Code London (@learntocodelondon) on CodePen.

Let’s compare before and after.

RetroSkatr With No CSS
RetroSkatr With No CSS
RetroSkatr With CSS!
RetroSkatr With CSS!

Take a moment to read through the example in detail and understand how it fits together. Focus especially on the CSS code because we have already been through the HTMl code.

You can change the CSS code and play around using the CodePen. Notice how the HTML is almost exactly the same as it was when we went through it in module 3! We only added CSS to bring it to life! The only one line we added to the HTML was to reference the external CSS file in the header! And that’s how you make your website look cool – with CSS!

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

Exercise

1. Apply styles to the web page you created as part of the exercises in module 3.
2. Try using inline, internal and external CSS.
3. Research additional declarations that CSS3 supports, can get it to do anything cool with your web page? Experiment!

 

New Terminology You Learnt In This Module!

CSS3

Cascading Style Sheets (version 3) are used to define the format and layout of web pages.

Separation Of Concerns

In software, separation of concerns is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program. In the context of HTML and CSS, we saw that it is highly desirable to separate content from presentation.

Responsive Design

An approach to designing web pages in such a way that they work well across all browsers and devices.

Summary

That’s the end of “How To Make Your Web Pages Look Cool” module. We introduced CSS and saw how it can be used to add style to your web pages. If HTML defines the content, CSS defines the style. We also learnt the 3 methods of including styles in our web pages and saw a few examples.

It is worth to note that getting good at CSS is hard, it takes a lot of patience and a good eye for design. An additional challenge is ensuring that your CSS works across all browsers and also different devices!

Visitors should be able to view your website on their desktop, tablet or mobile. We therefore need to use responsive design! I will introduce you to a method to easily get around these problems in a future blog post – so stay tuned!

Next Module: How To Add Social Media Icons To Your Website

Created anything cool? Share it in the comment section with a CodePen, I would love to see your work!

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

2 Replies to “How To Make Your Web Pages Look Cool”

Comments are closed.