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

According to the HR people who devised this test, around 90% of the employees they tested got all the questions wrong – whilst many primary school children managed several correct answers.


1. How do you put a giraffe into a refrigerator ?

The correct answer is: Open the refrigerator, put in the giraffe and close the door. This question tests whether you tend to over complicate simple things.

2. How do you put an elephant into a refrigerator ?

Did you say, open the refrigerator, put in the elephant, and close the refrigerator ? Sorry, wrong answer.

Correct Answer: Open the refrigerator, take out the giraffe, put in the elephant and close the door. This tests your ability to think through the implications of your previous actions.

3. The Lion King is hosting an animal conference. All the animals attend. Except one. Which animal does not attend ?

Correct Answer: The Elephant. The elephant is in the refrigerator. You just put him in there. This tests your memory.

4. There is a river you must cross but it is used by crocodiles and you do not have a boat. How do you manage it ?

Correct Answer: You jump into the river and simply swim across. Have you not been listening ? All the crocodiles are attending the Animal Conference.

Basics of Website Development.


cool-html-codesIn my last post, I talked about where to start journey if you want to become a web developer. Today, I am going to go a little further and show us the most basic things you need to know, the old school way and the new school way.

I am sure you have decided on with IDE you want to be using for development and I want to assume you have know the meaning of the following; HTML, CSS, PHP. if not, HTML stands for Hyper Text  Makeup Language (as said in the name, it is a makeup language, not a programming language. So if you know html, that doesn’t make you a programmer.), CSS stands for cascading stylesheet (also not a programming language) and lastly, PHP stands for Hyper Text Preprocessor (it is a programming language, and yes, the name doesn’t sound like the abbreviation. It has a long history that goes way back to 1996. You can look up the story in Wikipedia J)

How to write basic html the old school way.

We are going to write our first html script. WOW! I am so excited, because this will be my first website.

But first of all, I want to bring our notice to something important. You may have noticed that when you hear anything about HTML, you also here about CSS. Let me just put it this way, HTML is the frame/Brick, CSS is the paint. CSS is what gives beauty to HTML.

So here we go.

  1. Open a new file in your IDE and name it helloworld.html
  2. Type the following into the file

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>This is my header</h1>

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

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

<b>this is a bold text</b>

</body>

</html>

  1. Now save and open the file in internet explorer.

YOU JUST DEVELOPED YOUR NEW WEBSITE. ISN’T THAT AWESOME?

Now, let us go a little bit futher and write this code the new school way (HTML5 Way)

  1. Open a new file in your IDE and name it helloworld.html
  2. Type the following into the file

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

  1. Now save and open the file in internet explorer.

You have just written your first HTML5

There are a lot of tags in html that you must know. To know more about this tags, the best place to start is w3schools (www.w3schools.com ).

Now what about CSS. We are going to be talking about CSS in the next post. For now, keep on practicing on the basic html tags and do cool stuffs with it. May the force be with us all.