CSS Basics


Good Afternoon Everybody,

Was not feeling too well and sorry this post is coming late.

In my last post, i talked about basic html. i am sure by now you can now create a simple web page.

Today, we are going to style that html code with CSS.

By the way, CSS means Cascading Style Sheet.

Here is the code for our last tutorial below

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<header>

<h1>This is my header</h1>

</header>

<section>

<article>

<header>

<h3>This is the header for this article</h3>

</header>

<p>This is my first paragraph</p>

<i>this is an italic text</i>

</article>

</section>

<footer>

<b>this is the footer</b>

</footer>

</body>

</html>

here is the product for the html code above.

product

I hope everybody got this when they tested their code.

Now, we are going to style this html with CSS.

First of all, i will like us to create a file named style.css in the same directory with your html file.

 

Then just after the closing of </title> tag, add

<link rel=”stylesheet” href=”style.css” />

You should have this below as in you html file now

<html>

<head>

<title>Hello World!</title>

<link rel=”stylesheet” href=”style.css” />

</head>

<body>

<header>

<h1>This is my header</h1>

</header>

<section>

<article>

<header>

<h3>This is the header for this article</h3>

</header>

<p>This is my first paragraph</p>

<i>this is an italic text</i>

</article>

</section>

<footer>

<b>this is the footer</b>

</footer>

</body>

</html>

Now, Open the style.css file you created earlier and type the following

body{

background-color:#0074A2;

}

h3{

text-decoration: underline;

color: #ff0000;

}

 

You should get this.

style

Now that this worked, let use work with something called ID and something called Class.

ID and Class are like names assigned to elements/tags in html to differentiate them while styling or programming them in a script.

To add an ID or Tag, Just add something like this in your HTML Tag; class=”name” or id=”name”.

For Example:

<b class=”foo”>this is the footer</b>

<i id=”taa”>this is an italic text</i>

Let us do a practice with the previous html code.

<html>

<head>

<title>Hello World!</title>

<link rel=”stylesheet” href=”style.css” />

</head>

<body>

<header>

<h1>This is my header</h1>

</header>

<section>

<article>

<header>

<h3>This is the header for this article</h3>

</header>

<p>This is my first paragraph</p>

<i id=”taa”>this is an italic text</i>

</article>

</section>

<footer>

<b class=”foo”>this is the footer</b>

</footer>

</body>

</html>

the CSS will be like this now.

body{

background-color:#0074A2;

}

h3{

text-decoration: underline;

color: #ff0000;

}

#taa{

color:#ccc;

border-left: 2px solid #00ff00;

padding:2px;

}

.foo{

color:#FF0000;

text-transform: uppercase;

}

Please, Note that you use # for IDs and . for Classes in CSS.

Now let us try this out.

Overwrite your style.css with the last CSS script and your html with the last html code and you should get this.

nustyNow, You know how to write HTML and How to style it with CSS.

To learn more, visit http://www.w3schools.com

Cheers..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s