In the last post you learned some basic html tags and some basic attributes. Instead of going over every single attribute and tag in existence, we will move on and learn the other things in from examples that will help you understand them… and I’ll explain them as well as possible there. So don’t worry about any attributes or tags that I missed.
In the last post I ended with introducing the div tag but I didn’t really go into it. Now that we will be trying to understand CSS, you will be a little easier to explain it. For now just think of the div tag as an invisible box.
Let’s begin by making a css document and connecting it to our html page.
CONNECT A STYLE SHEET
Make a new document and make sure that the extension is .css. If you have a special program like Dreamweaver, you can just go to file=>new=>CSS document. Name it style.css and place it in the same directory as your html file.
Now open your html document and write the following inside the head tags:
<link rel="stylesheet" href="style.css" media="screen"/>
The link tag connects the css page to the html page. It also has three attributes that you must have to complete the connection.
<link/> : the link attribute is used to connect a number of documents but is most usually used to connect style sheets.
The rel attribute describes the relationship of the linked document to the current document. In this case we say that it’s a stylesheet
The media attribute defines the intended media.
The href is the hyperlink reference. It is used to direct an object to the location of a document.
Now that we have it connected, let’s move on.
CONNECTING TO ELEMENTS
Let’s get back to the div tag. As I said, the div tag is like an empty box. We put things inside the div tag to separate elements in a page and modify the div box with CSS. To do this, we need a way to connect to the div tags. We do this in two ways:
Now that we have them named, we can call on them from our css page. To connect to the two I wrote above, you would write the CSS like this:
So what’s the difference between the two? Simple: You can only have one id with a single name but you can have as many classes as you want with the same name. So if I wanted to have a bunch of objects affected by the same properties, I would give them all the same class name and just set up one definition in css. With an id, as I said, you can only have one.
Back to what we just wrote… Note that when I connect to the id, I used a hash tag. When I connected to the class, I used a period. But there is a third way to connect to tags. Let’s say I want to make all the img tags in my document have some CSS property. The way I would affect every single one without giving them all some class name is by using the name of the tag.
The following would connect to all the img tags in a document:
Basically what happens is it affects all the img tags. Now you know how to connect to objects! Now let’s say you want to connect to an img tag that is inside a div tag with a class name “foobar”… how would you connect to it?
The following code is how
Ok so we know how to connect to objects but we haven’t really done anything to those objects. There are a crazy amount of css properties that you can use. I will go over a few of them that I think you will need the most but if you want to see more of them you can go to w3schools.com or wait because I’ll probably end up using one of them in the later tutorials. Even if I went over each one of them, you wouldn’t remember them. It takes practice and then more practice to really remember most of them.
So let’s go over the basic ones.
First of all we have the “color” property. You write it this way:
Notice that I just said “white” for the color but that’s only one out of many ways to describe the color. You can also use hex codes, rgb, rgba and a few others that we won’t go into.
Hex code is what I use most because I design my websites in photoshop and it’s easy to see the hex code there. It’s a six character code. White is #ffffff and black is #000000 (note the hash tag). Visit this w3schools page for more information
Rgb stands for red, green, blue. You write it as rgb(0, 0, 0) where each number ranges anywhere from 0 to 255.
The same as RGB but you now add the A which stands for alpha. Alphas is the opacity or, in other words, the visibility. It ranges from 0 to 1 where 0 is see-through (100% opaque) and 1 is completely visible.
What the color changes the color of the text inside the object that is affected.
Next let’s take a look at the classic box model.
THE BOX MODEL
Remember I said that a div box is like an empty box?
Write the following in your HTML inside the body tag:
And this is CSS:
border: solid 1px black;
What we just did is add a border to the div tag and made it 100 by 100 pixels. Take a look at the rendered out page in your browser. You can actually see the div box!
Notice that I used three different values for the border property. First I said that I want the border to be solid (instead of dashed or some other ugly border) then said that I want it to be 1px thick and a black color.
The complete box model is comprised of three parts. Change the CSS to look like this:
border: solid 1px black;
margin: 10px 5px 10px 5px;
margin : margin adds space outside of the box.
Padding : padding adds space inside the box. (you won’t see it unless you write some txt inside the div tag) Adding padding will make the width greater.
/* */ : The comment format for CSS. Everything inside the asterisks will be commented out.
Notice that I wrote the margin and padding differently.
In the case of the padding, I added 5px to all sides.
In the case of the margin, I used a short hand method and wrote the equivalent long hand in the comment. The order of the short hand is top, right, bottom, left… clockwise.
There you go! The basic box model =)
MORE CSS PROPERTIES
Next I will just list all of the properties I think you will need because going through them any more in depth will take way too long and I bet your guys are getting tired already.
/* background property */
background: white url(image-url.gif) repeat 0 0; /*shorthand */
background-color: white; /*or any other color type we learned */
background-image: url(image-url.gif; /*place a picture in the background */
background-repeat: repeat-y; /*by default, the picture will repeat in the x and y. This can also be 'no-repeat' 'repeat-x' or 'repeat' */
background-position: 0px 0px; /*x, y movement */
/* font */
font: italic small-caps normal 15px Arial, sans-serif; /*shorthand properties in order: style, verient, weight, size, font-family */
font-family: Arial, "MS Trebuchet", sans-serif; /*not all fonts are allowed. Google the standard web fonts to see which ones can be used */
font-size: 15px; /*size of the font */
font-style: normal; /* style of the font. can also be italic*/
font-variant: normal; /*varient. can also be small-caps*/
font-weight: normal; /*weight... like bold*/
letter-spacing: 1px; /*spacing between letters*/
line-height: 18px; /*the line height... ie how much space there is between lines*/
text-decoration: underline; /*text decoration. could also be line-thorugh*/
float: left; /*can also be right or center. This property 'floats' the object to the side specified (we'll go over some examples in the next post)*/
clear: both; /*can also be left, right, or center This clears the float property of another object so that it doesn't affect the current object*/
/* Positioning */
position: relative; /*can also be absolute. if relative then the object will be moved 'relative' from its actual or original position. Absolute places the (0,0) point at the top left of the enclosing box*/
left: 20px; /*how far form the left will the object be moved (so it will move right) Same for the rest of these*/
/* Sizes */
width: 20px; /*Defines the width of the object. these sizes can also be in %*/
height: 20px;/*Defines the height of the object. */
overflow: hidden; /*if the contents of an object go out of its bounds, what will happen? can also be visible or inherit*/
display: none; /*hids the object*/
visibility: hidden; /*also hids the object but leaves the area*/
z-index: 100; /*z-index is like layering. The object with a greter z-index will be on top of one with a smaller z-index*/
In the next tutorial, we will look into CSS a bit more and learn about mouse events and some new CSS3 properties. See ya tomorrow!