In the CSS i've been using in this example i've started every new block with "." but you can also use a "#" to create an "ID" for your HTML.
Its easier to explain with code:
.header{
width:800px;
height:200px;
background-color: red;
}
goes with this line of HTML:
Header text and stuff
But this CSS:
#header{
width:800px;
height:200px;
background-color: red;
}
goes with this HTML
Header text and stuff
Both will result in the exact same thing appearing on the page. A class can be used on as many different HTML objects as you want, but an ID can only be used once. Using the example above, with" .header "i can make another div later in the page with the class "header" but if i used "#header" i would be restricted to only using it once as an ID. So IDs are much more restrictive, but they have their uses. When you start adding Javascript to your site you'll need objects to have certain IDs so you don't have two things on the same page with the same JS function screwing it all up. With an ID you can also put a link on a page that moves the scroll bar to that section. In other words, if i put this link in the site:
<a href="#header" alt="header">Header</a>
When the user clicks it the browser will automatically scroll up to the header. This can't happen if there are two divs named header.
In general, i used classes unless i have to use an id, simply because ids are more restrictive.
CSS has a few options to help dress things up a bit. One of the easiest things to make is a background image. To set this up add this line to the CSS for that particular div:
background-image: url(images/bg1.jpg);
Replace the background image with yours, of course. You can ten add text to the div and it will appear above the image.
If the image is something you want to tile you can repeat it by adding this line:
background-repeat: repeat;
This will only work if the image is smaller than your div. If it is larger than your div you wont be able to see enough of it to make it repeat. You can choose to make it repeat only horizontally or vertically as well by changing it to:
background-repeat: repeat-x;
or
background-repeat: repeat-y;
This is useful if you want to put an image across the top of your div to highlight your title text.
If the picture is bigger than your div you can adjust its position with this line:
background-position: top left;
If you change that to 'bottom right' it will align the bottom and right edges of your image with the bottom and right edges of your div, so any extra will be cut off from the top and left. If you are going to position your background image a certain way you should add no-repeat. You can fine-tune it by using these lines instead:
background-position-x: 0px;
background-posision-y: 0px;
You'll need to use negative numbers here. Adjusting the X position moves the image left and right. A positive value will move the image to the right, which would create empty space to the right of the image. This isn't a problem if you want empty space, but if you want the div filled with the image you'll need to adjust it to the left by using a negative number like -40px. The same applies for the Y value. A positive number will move the image down, making empty space above it.
When using a background image you should add a background-color as well in case the image doesn't load correctly. The background-color will still be applied so your div will stand out even if the image doesn't load. You'll likely never have an issue like that, but it is good practice to prepare for the rare things that will break your entire page.
Another really easy way to use CSS to dress up your page is by adding a border. You can add a border to almost anything in the page, and its done like this:
border: 2px solid #00ff00;
This is the condensed version of the border attribute. The border will be 2px thick, bright green (#00ff00) and a solid line. You can make it as thick as you want, any color you want, and a few different styles. The options for border styles are dotted, dashed, solid, double, groove, ridge, inset, and outset. Most of those styles look like an awful site from the late 90s, so you'll probably stick to solid or double. Feel free to play around with it.
If you want to get more precise with the border you can adjust settings for each edge.
border-left: 2px solid #00ff00;
border -top: 1px dotted #ff0000;
border-bottom: 3px outset #7a7a7a;
border-right: 4px double #fafa00;
Which will leave us with this ugly mess:
The next one we'll look at involves the cursor. You can change the cursor when a user hovers the mouse over a certain object. Use this line for that:
cursor: crosshair;
Pretty simple. The cursor will be normal until it is moved over the object with that CSS attached. Then it will change to crosshairs until it is moved back out, just like how your cursor changes when you hover over a link. There are many cursor options. You can find a full list here.
Now we'll look at right now is how to change anything when an user hovers. Make a div and set it up any way you like, i'll be using the header from earlier in this post. When it is all set, make a new section in the CSS like this:
.header:hover{
}
Add anything you want to change inside that CSS block. Anything you don't write will stay the way the not-hovered CSS block tells it to. So you don't need to re-write all of the positioning and size lines, only what you want changed. So if my css looked like this:
.header{
width:800px;
height:200px;
background-color: red;
}
.header:hover{
background-color: blue;
}
The header will change from red to blue when i put my cursor over it. The "hover" here is called a pseudo-class.
Hovering is commonly used to modify links. Remember, links are called "a" in HTML, so to change their appearance in the CSS we simply add:
a{
color: green;
}
There is no "." or "#" because there is no class or id, you are modifying the actual "a" object itself instead of assigning attributes to them individually. That CSS will make every text link in the page green, regardless of what the rest of the text is colored. Coloring links makes it easier for users to find them. Just like with the header, you can change how links look when you hover over them:
a:hover{
color: green;
}
Links also have a special pseudo-class called "visited" for pages your user has already been to.
a:visited{
color: black;
}
Usually visited links are a darker or less bold color than normal and hover links.
Combining everything we learned in this post, we can modify the entire body of the page. Look at a HTML template page and you'll see after the the starts. Just like with links, you don't give the body a class or ID, you modify it directly in the css like this:
body{
}
Here you can add global attributes. In the body CSS you can change the text size for the entire page. The text size will be what the body says unless you change it in a div's CSS. This is an easy way to make the entire page's text larger or smaller without having to put "text-size: 16px;" in every single div.
You can also change the background color for the whole page by putting a background-color or background-image in the body. This will go behind everything else.
You can also globally modify images in your HTML with this line in the CSS:
img {
}
This has limited usefulness because you'll be working with a bunch of different sizes and formats of images in the page and you don't want to change all of them in one shot. I aways add this to my CSS:
img {
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
Certain browsers, particularly older browsers, tend to assign borders to images even if you want want it. This will clear all of it out. You can put padding, margins, and borders back in to each image individually in the CSS later if you need to.
One last thing today, we can do global changes contained within a div for things like images and links. What? Yeah, that makes more sense when you understand it.
Lets say you have a div that you are going to fill with a grid of pictures:
.photo_grid{
width:800px
height:800px;
}
You want every image inside that div to have a border, but you don't want to change the entire page with the global "img" part of the CSS. What you can do is add this to the CSS:
.photo_grid{
width:800px
height:800px;
}
.photo_grid img{
border: 1px solid black;
}
This tells the browser that any image inside "photo_grid" will have a border. It wont affect anything that isn't inside "photo_grid" so you don't have to change any other CSS.
As you progress, you'll learn that HTML coding is 90% CSS. HTML just dictates the order of objects and what is inside of what. CSS does everything else.
No comments:
Post a Comment