Monday, October 31, 2011

Exploring CSS

In the last post, which I am working on now, you will be learning about HTML, or HyperText Markup Language.
Besides HTML, there are a few scripting languages besides just HTML that can improve your website's design and functions. The one that I will be talking about now is CSS.

Websites don't always look like sites you would usually visit, with different colors, font faces, and backgrounds. Without CSS, or Cascading Style Sheets, a website would look completely white and boring.

If you wanted to style headings (h1 and h2 for example), this is what some example code would look like:

h1, h2 {color: #000000; font-family: 'Open Sans', sans-serif; font-weight: normal;}

So, if you actually put this example into your site's CSS stylesheet, this is what it will look like.

This is Heading 1 with CSS applied.

This is Heading 2 with CSS applied.

This is normal text with CSS applied.

The example above also shows the output of the style, which is now used on WebAspire. Instead being the default Arial and bold, WebAspire's headings are now not bold and in the web font Open Sans. Pretty cool, huh? Luckily, for all of you HTML-savvies out there, good news. If you know HTML (and read this part of the guide), you can learn CSS very quickly.

CSS is just the programming of what HTML elements look like. For example, with CSS, you can edit how text appears. CSS is laid out in brackets, { }, instead of HTML's angle brackets, < >. If you know the name of the HTML element you want to style, Heading 1 being H1, for example, you're almost done with creating a basic CSS style.

The name of the HTML element ALWAYS goes before the brackets. It should look like this, if you're styling an h1:
h1 {CSS functions go here}

Next, you figure out what color, font, etc. you want the text to have, if you're styling text with CSS. If you want to change the color of the text, your CSS should look like this, if you're styling an h1:
h1 {color: #009900;}
If you want to use hexadecimal colors, RGB, or just words, such as "red", any one of these is fine.

If you want to embed your CSS styles in an HTML page in your site, just use the <style type="text/css">, and the matching </style> attribute.

If you want to write a stylesheet as a .css file extension, make sure that you put the following code in your site's <head> tag, after you write the CSS codes: <link rel="stylesheet" type="text/css" href=""> Make sure you replace the "" stylesheet URL with your website's CSS stylesheet. (Did you notice that the codes are purple? That's CSS in action, too!)

So, that's the basics of CSS. I, too, am still learning it. With some more experience, and some more advanced CSS, you can create fancy-looking, well-designed websites in just an HTML editor. Enjoy!

Wednesday, October 26, 2011

Exploring HTML

If you go up to a random person and say "HTML", they would most likely not know what you mean. HTML, or HyperText Markup Language, makes up the structure of every website. Want an example of HTML? Just go on any website and hit Ctrl-U. Complicated, isn't it? Well, this post just explains the basics.

Unless your website editor, or CMS (content management service) is a really simple drag-and-drop WYSIWYG (What You See Is What You Get) editor, you have to know HTML to create a website. HTML uses markup tags (like <li> and </li> to make a bullet list) to literally mark up web pages.

If you're using a code editor, the first HTML element you'll need is the DocType Declaration (DTD). This is essential for websites since it declares what HTML syntax the page is written in, so the site can easily be indexed by search engines and validated by code validation services. There are quite a few types of DTDs.  
  • The latest version of HTML, HTML5, has the simplest DTD: <!DOCTYPE html>
  • There are many other versions of HTML, but HTML5 is the latest recommendation, and HTML 4.01 is still popular.
  • HTML5's predecessor, HTML 4.01, has a more complex DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">