Build A Successful Web Site » CSS Tutorials

CSS – Create Custom Headers

admin — Mon, 05 Apr 2010 20:37:30 +0000

It is a great idea to use custom headers within your HTML document. It is important to put your web page keywords in a header for better search engine optimization. Changing the way your header looks is easy with CSS (cascading style sheets). Heading one tags are considered to be the most important tags by the search engines. Heading 2 tags are less important and Heading 3 tags are usually headings withing a Heading 1 or Heading 2 tag.

Let’s say your web page is about hotels in Ontario, and you decide to make that your heading.

The HTML for that would be:

Hotels in Ontario

To change the appearance of Heading 1, Heading 2 and Heading 3 tags, create a rule for them in your css page or within your HTML document.

If you do not have an CSS file, you can add this somewhere between the head tags in your HTML page (top section).

If you have created a CSS file add this rule to the file by copying and pasting the following code:

H1 {
font-size: 20px;
color: #2a2a2a; /* this is the font colour */
margin-top:-10px; /* this takes away some of the space that browsers will give to a h1 tag */
margin-bottom:-15px;
width: 240px; /* this is the width of the image */
height: 10px; /* this is the height of the image */
background: url( include the url of your image, for example, http://www.mysite.com/images/my_image.gif between these brackets) no-repeat;

You can customize your header further by creating a cool background in Photoshop CS4, or another graphics editing program. Add a gradient to the image and make your headings stand out. Save it as a gif file, upload it to your server, refer to it, and you are finished!

CSS Head Section

CSS Head Section

admin — Sun, 04 Apr 2010 01:08:49 +0000

In this CSS tutorial I will teach you some simple cascading style sheet codes that you can use in your HTML documents to spice them up a little. By the end of this tutorial, your web page will no longer be simply black and white.

The first thing you need to do is create a CSS page and refer to it in your HTML page. This information is found in my What is CSS? (link opens in a new window) post.

Open the CSS document/script in your favourite HTML editor.

Then add this code to the page:

body {

margin: 0;

padding: 0;

line-height: 1.5em;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

background: #2a2a2a;

}

If you are working in DreamWeaver, save the CSS file onto your server. Or, if you do own DreamWeaver, save your HTML document, open your favourite FTP client and upload your file there. If you do not know what I am talking about look read my tutorial on FTP clients.

Now, what you need to do is view the HTML page that refers the CSS file that you saved on your server. For example if the HTML file you saved to your server is called index.html (your homepage) then make sure the page refers to your CSS file. For example, the code could be http://www.yoursite.com/your_css_page.css />

If it your HTML page links properly to your CSS page, then the body of your page should look different.

Let me explain what you have done.

You have told an internet browser how to display the content between the two body HTML tags ( and ) on your web page. Now it knows that the margins are 0 pixels and that there is no padding. You can play with this by changing the value to 10 or 20 pixels. See what happens when you save it to your server.

The font for the document is Arial, Helvetica, sans-serif, and the font size is 12 pixels. This is the default font size of your page. The colour of your font is white and your background is charcoal black.

Every colour is a combination of numbers, letters, or numbers and letters. So if you change the colour #2a2a2a to #2f2f2f the colour will be come closer to black (much darker).

White is #ffffff and black is #000000. Sometimes you will see black written as #000 and white as #fff. I would write them with all six numbers or letters. It only takes slightly longer.

Never forget the number symbol or #. Otherwise, your colour will not appear. Do not forget these two { } symbols either.

ORGANIZING YOUR CSS PAGE

One way in which to organize your CSS is to write multiple pages. Another way to keep it neat and tidy is to add comments that help you remember what codes you have written for what pages or sections within your HTML pages. For example the comment /* header section*/ may help you quickly find the code for your header section.

The better you become at writing CSS, the more complicated your page will become. So, keeping your code neat and tidy is important.

I need a break from writing. Another day I will continue explaining some other CSS codes which you can use and what they will do to your HTML page. Maybe you would like to use tables to spruce up your page, or maybe you would like to learn how to place a nice coloured border around your image. Or perhaps want to spruce up your header section, or change the colour of your links.

What is CSS?

admin — Wed, 10 Mar 2010 02:10:00 +0000

So what is CSS anyways? CSS stands for Cascading Style Sheets. These style sheets are used to control how your web site’s text, borders, headers, links, background, and other HTML elements look.

You can add CSS within the HTML of your page, or save it as a separate css documet. I would keep it out of your HTML document, simply because it will make working with your codes that much more confusing.

To refer to a CSS file on your web server is very easy. Place this code just before your tag.

AND PLACE THE HTML LINK HERE EXAMPLE: http://www.mywebsite.com/stylesheet.css” />

Remember to save your file onto your server FIRST. Otherwise your HTML document will look very funny.

HTML Tags Reference