Create Custom Side Menus
Frodo's Ghost | Getting Started with CSS (1)
post-template-default,single,single-post,postid-60,single-format-standard,eltd-core-1.0.1,ajax_fade,page_not_loaded,,borderland - frodosghost-child-ver-1.0.0,borderland-ver-1.2, vertical_menu_with_scroll,smooth_scroll,side_menu_slide_with_content,width_470,paspartu_enabled,paspartu_on_bottom_fixed,wpb-js-composer js-comp-ver-4.4.4,vc_responsive

Getting Started with CSS (1)

Once the principals of cascading style sheets is understood, besides time and patience, you should be fine to run with them. They are an easier way to build sites, wih a lighter download per file, and a cached style sheet.

Some pre information links.

  • Stopdesign: This is the site that first gave me insight into building with css. I must of re-read this fifty times, at least. A decent example of what it can do, with out how to do it… I remember thinking “This is great, now how do i do it?”
  • Wikipedia: History of css? A bunch of knowledge that you don’t need to know, but it can make you sound like you know what your talking about…
  • CSS Zen Garden: A great site to understand what can be done with css. They use the same HTML file, and apply a different style sheet. Positioning, images and fonts, everything to show you what can be done.

Okay, now that is over – your all linked up and ready to get cracking – lets do it.

CLICK HERE to download the starting files. Just download those, and unzip them in a folder on your harddrive. Double click the HTML and let it open up in your default editor – we should be right to start from there.

If you downloaded the above file, it is a starting point, nothing more. So once we’ve got the HTML open in a browser, also open that same file in a text editing program. Yes, we shall be skipping all those wonderful layout programs for now – right to the hardcore coder. This way you can learn how the code works first, and decide later if you would like to use those code-bloating programs later.

So the file is open in your text editor. What we have here is a starting page for HTML. I have taken some code that validates and got rid of everything that prints on the screen. In a while you may want to know this stuff, but for now we’ll just take it for a start and move on.

One thing to notice is that when a tag opens it will also close. A tag is shown like this:


and a tag will close with a slash in front of the tag name:


This is called an element. From the open to the close and everything in between.

If you type a page title between these tags, save the file and refresh in the brower you can see the change in the very top bar. Just a simple addition to the page, but it is the start of coding web pages.

No Comments

Post a Comment