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 [...]
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 <link rel=”stylesheet” type=”text/css” href=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 (<head> and </head>) 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.
Related posts:
Leave Your Response