Basic CSS Tutorial
Formatting Decisions
The first thing to do when creating a page with CSS is to decide how you want it to look. You should set your link colors, font color and size, background color and background image, if you want one. In CSS, there are two ways to set a color. If it's a simple color, you can use the name that's been assigned to it - white, black, blue, red, green, etc. You can find a list of those colors online. You can also use a hexidecimal code prefaced with a pound sign (#ffffff). If you use a 'color' that is one repeating character such as white, black or the 14 shades of gray between them, you can shorten it to three digits (#fff).
IF you want a background image on your page, you should wait until after you learn how to create a box with a solid background so you can read your text - probably after lesson 8 or 9.
To add a background image, add the line inside the body section of your css file. You can't call for it with a full URL but must use a 'relative' link. If your css file is in a subfolder, the URL will be different - ../images/background.jpg. My CSS is in the include folder and my background would be in the images folder. The ../ means go up one level in the directory structure and THEN look in the images folder for this file. More help with understanding relative links.
Similarly, if all your files are in the same folder, use
background-image: url("background.jpg");
The next thing I do is decide how I'm going to use my headings. It's probably best to use only one h1 heading on a page.
I like the larger headings centered; if I use h4, I like it left-aligned.
OR vice-versa - I like the smaller heading to be different so it appears as 'not as important' but different.
In your CSS file, go down to where the hr styling is and, just above it, add
h1, h2, h3 {text-align: center;}
default is align: left so h4 doesn't need to be formatted.
Google search now compares the <title></title> of your page with the <h1></h1> and the <meta name="keywords" content="tutorial, basic, CSS, decorate, HTML"> to determine the relevance of a page to the search being conducted so I'm having to change all my pages to use h1 and h2, where I used to start with h3 and h4.
Now go to your page and add two headings. Save the page.
<h1>This is a basic web page.</h1>
<h4>First Section</h4>
Go to your browser and refresh the page (F5); you should get something like the image below.
For any BLOCK container, you can simply use 'style="text-align: center;"' inside its tag to center everything in it.
How it looks. Our headings are formatted.
Previous Next