Easy websites with the w3.css style sheet, part 4

See also: Part 1Part 2 and Part 3.

This article will assume you know at least something about HTML, and a bit about CSS – even if it is just the basic stuff like the simple code shown in the example in part 3:

<html>
  <head>
    <title>My First Home Page</title>
  </head>
  <body>
    <p>Welcome to my home page!</p>     
    <p>Check out my other pages:</p>
    <ul>
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
  </body>
</html>

That makes this:

My First Home Page

But, with a bit of additional CSS styles, we can colorize and do other effects.

<html>
  <head>
     <title>My First Home Page</title>
   </head>
   <body>
     <p style="color: red">Welcome to my home page!</p> 
     <p style="color: green">Check out my other pages:</p>
     <ul style="background: black">
       <li><a href="about.html">About Me</a></li>
       <li><a href="mydog.html">My Dog</a></li>
       <li><a href="poetry.html">My Poems</a></li>
     </ul>
   </body>
</html>

That might look like this:

My First Home Page … in COLOR!

Here is an excellent tutorial on CSS:

http://www.w3schools.com/css/

I was visiting this site a few weeks ago looking up some CSS things and I ran across a style sheet they had created which let you easily create navigation bars, menus, and responsive (scales to phone or desktop screens) websites. It was called w3.css:

http://www.w3schools.com/w3css/

By linking in that style sheet, and tagging items in your web page, you can turn a boring, bland HTML page in to something more modern. By just including the “w3.css” style sheet in your page, and adding a “class” parameter to an unordered list, you suddenly have a modern navigation menubar:

<html>
  <head>
    <title>My First Home Page</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  </head>
  <body>
    <ul class="w3-navbar w3-blue">
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
    <p>Welcome to my home page!</p> 
    <p>Check out my other pages by using the top menu.</p>
  </body>
</html>

Since I wanted the menu bar to be at the top, I moved that line to the top. It looks like this:

My First Home Page … using w3.css!

And by adding a few more “class” tags, you can create horizontal side menus and a bunch more. For example, you can easily create a page layout, such as a navigation bar, left box, and main content area:

<html>
  <head>
    <title>My First Home Page</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  </head>
  <body>
    <ul class="w3-navbar w3-blue">
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
    <div class="w3-row">
      <div class="w3-third w3-container w3-green">
        <h2>Thought for the Day</h2> 
      </div>
      <div class="w3-twothird w3-container">
        <h2>Welcome to my home page!</h2> 
        <p>Check out my other pages by using the top menu.</p>
      </div>
    </div>
  </body>
</html>

…and suddenly you have this:

My First Home Page … now with CSS!

And, this design automatically becomes responsive, and resizes for phone screens:

My First Home Page … now responsive!

How cool is that?

I just had to share.

Explore the w3.css tutorial site for many examples. There are a ton of fun things you can do with very little work these days.

Have fun!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.