 |
|
 |
|
 |
||||||||||||||||||
|
Let's Make a Layout When I FIRST started making layouts I didn't touch CSS, I didn't know what it meant let alone how to use it. I use those damned page builders that did everything for me. Now... there isn't a layout that goes out that doesn't include CSS. It's a handy tool that's simple to use, and can make a website move from alright to wow.While there are many different functions of CSS that can be done, for our layout we're going to use it to change the scroll bars, the fonts, the link colors and simple effect for hover as well as adding a repeating background. As you noticed back in the first part we decided to link to an outside style sheet, for doing this we need to now create this style sheet. Much like with HTML we can do this in Notepad. Open notepad. (Your you can forget learning how to do it on your own and get one of those fancy creators. Still a stickler for learning it myself I am. If you don't want to, why are you reading this?)
Whenever saving this file the extension should be .css In the case of this layout we called our style sheet style. So the file name for this particular case would be style.css You need to remember to save it as such or it will not work. Unlike with HTML there is no real set beginning to the file, but there are tags. HTML tags are opened with a < and closed with a > and the command is inside <body> but CSS tags are opened with { and closed with } with the command on the outside body { }
body {
Spacing is important, when you space correctly you can read your tags easier. Much easier.
body {
Next we want to change the margins. WE don't want a top margin, and we want the left margin at five. This is going to affect the positioning over our div layers so be sure to go back and correct those (Corrections: Id Content - Left: 84px Top: 495px -- ID Links - Left: 526px Top: 65px -- A general reduction by 10px should set it back to where it was. ) body {
Now we have our background color and margins time to put our background image in. body {
As you may have noticed this line is a little more complicated. When using an image the background: url('') should never change. Keep in mind this is a style sheet for all pages on the site so we want to have that / root slash, and then the folder where the image is located, followed by the name of the image. If the image is in the root director it would look like this ('/bg.jpg')
Next is the Scrollbars for the page.
body {
Next is the font property. We change it here incase something isn't inside the div and we add it in. However we'll be changing it for the div as well. body {
In HTML we tend to make our fonts larger or smaller by going <font size=+3>This however is BAD practice. It's better to set the font in the CSS and use that as only a highlighting measure, and even then don't use it. It'll not really aid your design any. But of course this is your choice. HTML uses smaller numbers where as CSS uses pixels... and thus the number is larger. Keep in mind people like me are getting old and size 8px font is NOT a font to be used on a website. Size 12px or 13px is small enough. For this design I recommend 13px. Our Next CSS code will be the div
div {
A good practice is to use the div properties the same as the td and p properties. To do this we simply add a comma and the other name. (That is of course unless you want them different, but if you want them the same, inlcude them here. div, td, p{
This will just make those areas the same as the div, if you don't want them the same, don't include them (If you don't know what these are refer back to Html 202)
div {
You can use whatever color suits your fancy, #A5339E is the color I've chosen to use for this layout. Remember the ; at the end. ^_~ The next part is adding in the font size. Remember 8px font is FAR too small, try and keep it reasonable without making it huge. We're not blind but we also don't have x-ray vision.
div {
Once you have this set (Play with it till you get what you're looking for) you can add in the font family.
div {
The font family can be anything you want, but a few things to keep in mind. Not everyone has the same fonts on their computer. Some are new to newer versions of Office and Windows, and some are downloaded. If the person doesn't have the font it will result to the default for their computer, often Times New Roman. Which honestly isn't a pretty font.
Righto, we now have our div, td and P set up as we want, we need to set the links. Everyone likes fancy links.
Most often people decide to have the visited, active and regular link properties the same throughout the file. At which point we can combine the different properties so as not to type the same thing out. We'll start by showing you what it looks like seperate and then what it looks like combined.
This is them seperate: A:link {
A:active {
A:visited {
This is them all together: A:link, A:active, A:visited {
The reason you would want them all seperate is if you decided that the links would look different after they had been visited or that they would look different when they are clicked. The properties for them are all the same, and so for the purpose of this design we want the link, active and visited to all remain the same.
A:link, A:active, A:visited {
The #591494 color is a moderate purple color that I chose for the layout. Now instead of being the standard blue color the links will be the color I've chosen. The next part is to add the type of text decoration that is desired. By default links are underlined. Personally I don't like underlined, I like none. (For types of text decorations see CSS 101) A:link, A:active, A:visited {
By setting the text-decoration to none there will be no lines anywhere on the link it'll just be like it was normal text, but a different color so it still stands out.
A:link, A:active, A:visited {
This will space the letters apart more and make the links stand out. You can change the pixels to your tastes but keep in mind the size of the area you're working with and the overall appearance. I would not recommend ANYTHING higher than Five for anytype of letter spacing.
The next step is to add our hover. A:hover {
Hover is completely optional but will allow a user to see it's a link because it's not dull or flat, it moves and adds an overall elegant feel to the site.
A:hover {
The #5F3CF8 color is a light blue color that I've chosen to use for this portion of the layout. You can change it to many different things. Some people like to make the link almost invisible. Some like to make it completely disappear, play with it.
A:hover {
When you're adding a text decoration, you do not place comma's to seperate what each part is. If you want only an underline, just don't include the overline part, or overline alone, or perhaps you still want it to be none, then you type none.
A:hover {
So we set the letter-spacing back to 2px... you CAN change this, but like I said bad design because your layout will move with the links. Your choice however. Finally we're done what we've chosen to do in the CSS and we can add in the finishing touches.
Our HTML code looks something like this (Depends on how you added your navigation):
Our Site looks something like this (Once again depends on your navigation and colors):
So onto the Next Part! Let's Make a Layout Part One :: Getting Started
|
