The CSS Tutorial: Part 1

While we cannot cover everything that CSS has to offer in this tutorial, what we can do is go over the information that you need to create a unique and aesthetic webpage with CSS styles.

Fortunately, even after this guide, there are extensive resources on the web to help you hone in on your CSS skills.

Before continuing, here are a few key points to remember about CSS:

  • CSS is really a simple concept – it is a set of instructions that notifies a web browser on how to display a webpage
  • Changes to the web page can include text styling, layout design, animations/transitions and much more.
  • On the other hand, HTML is the sister language to CSS. HTML notifies the web browser as to what is on the webpage.

Recalling these points from our previous pages will help you better understand what we do from here on out.

Using CSS Leads To Cleaner Code and Faster Page Load

CSS is a powerful tool, especially because with CSS, you can work with fewer tags and still achieve the desired result. There are only six types of HTML tags that you need to focus on.

<h> is a heading tag. There are a range of heading tags that span from <h1></h1> to <h6></h6>. As you can image, the <h1> tag is the most significant tag and as you go down to <h6> you are venturing to the less significant.

Web browsers each have a default <h> tag style. When placing text in the default style, the webpage features the text in default form. While default styles can be convenient, they certainly detract from the quality of the webpage because they are not exactly ideal in terms of appearance. Fortunately, this is why we have CSS and why you are learning how to use it. You can override the default with CSS.

<p> is the paragraph tag. This tag alters text on the page by converting it into paragraph form. The text appears in a neat block on the page. Similar to the tag above, it is pretty easy to use.

<ul> and <ol> are list tags that are used to create menus. <ul> stands for “un-ordered list tag” and it creates a bulleted list or a list with other images or icons. There is no order to the list with this tag, so if you are looking to order your list with specific points, then use the <ol> tag. <ol>, as you can imagine, stands for “ordered list.” With the ordered list, numbers instead of bullets or images appear.

<div> is what creates containers for sections on the webpage. As you may recall, we used the <div> tag on the previous parts of the tutorial.

<a href> is the link or “hyperlink” tag. This is perhaps one of the most important tags for you to remember. What it does is turns the text into “hyper,” which then allows us to click on it. When clicking on the text, a command is sent to activate or load another page.

<img> is the “image” tag. With this tag, you can add images to your webpage. Unlike content, you cannot just copy and paste the images onto the webpage and expect them to show up. Here, you actually need to add the tag so that the image appears where it should on the browser when a user loads the page.

Now you can say that you are versed in key HTML tags that we will use throughout the tutorial and that will be of main use to you as you venture into using CSS for your own pages. Also, you do not need to focus on <br> and <font> tags.

Start Building Your Page

To continue with the tutorial, create a new text file, paste in the code below and save it as practice.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
</body>

</html>

After creating the page, to make things easier, create a folder and call it “myCSSwebsite”. Next, add the HTML page into it. Now, go back to the folder and open a new text document and label it “style.css”.

Finally, open the new text document and paste the following template CSS code and click save:

/* Generic Selectors */

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}

p {
width: 80%;
}

li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}

/**************** Pseudo classes ****************/

a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}

li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}

a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}

li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}

li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}

a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}

/************************* IDs *************************/

#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}

#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}

Do not be intimidated. It really is not as complicated at it seems. The details will be explained soon.

After you have completed this step, the next move is to add code into the HTML page.

Where you see <body></body> tags, insert the following code:



<div id="navigation">

<h2>The Main navigation</h2>


</div>


<div id="centerDoc">

<h1>The Main Heading</h1>

<p>Here's a paragraph! We'll do fun stuff with this today. Now time for some lorem. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua.</p>

</div>



Good. Now, in between <head></head> insert:

<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">

Here we go – now we can begin on styling the webpage. We’ve done a lot so far – just look at your HTML page.

Let’s continue.

Continue To Part 2
We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0