Before I jump into the most complicated part of the tutorial (in my opinion), I wanted to do a little bit of CSS learning. I don’t want to leave you in the dust by being too vague about CSS coding. My only hope is that I make things a little clearer instead of more confusing.
To get started it might be easier to take TNG out of the picture and just show you the basic purpose and functionality of CSS.
When I first open up my HTML Editing program, I can start a blank HTML document. I usually use this option because it will fill in all the important parts the browser needs to determine what exactly the page is trying to do.
The above example is a little more sparse then what I’m used to but it’s perfect for this example. This shows the structure of an HTML page.
- html: This tag opens the page and tells the browser exactly what type of code it’s going to be interpreting.
- head: The head tag is an important one. A lot of the behind the scenes work happens in the head tag. Our next step will be taking place there.
- title: This is simply telling the browser what to display in the title bar of your browser.
- body: This is the meat and potatoes of your website. You content is going to go here.
The highlighted section above shows how I link my separate stylesheet to my HTML page. Now whatever CSS coding I put in testpage.css will apply to whatever page is link to the stylesheet.
Now lets learn some of the more basic coding.
I used the ‘body’ tag as the example to show you that whatever CSS code I apply to the body tag in this file will apply to my HTML page to whatever is between the body tags.
The only exception to this is that the code will always use the most recent open tag.
For example:
body
div one
div two
/div two
/div one
/body
So using the example above you can set a default font size and color in your body tag. For me, my divs are usually one for content and one for a navigation menu. So if my div one is my content and I can set it to have a slightly larger font size or even just a different color. Now whatever I set the font at for div one will be for the whole thing until I either close the div tag or open a new one. It’s a heirarchy that once you realize what’s going on, it’s actually quite fun to mess around with… Well, as long as you remember which tag is which (why I leave notes) and then remember to close them (again with the notes).
Above I had two example pages. One is a CSS and the other an HTML. I want to show exactly what divs are in a very visible way.
You can see the two different boxes in the example above. However we don’t call them boxes in CSS because boxes are something different that we aren’t getting into right now. Now lets play with the divs a little bit.
Now if I wanted the text at the bottom to be it’s own div and not wrapped around the other two, I could by creating another div.
As you can see, I nested another div into backbone of the site.
I made it the full size of the backbone, and I floated it to the right. I did this so that it will come out on the bottom of the longest section. If I had floated it to the left, it would have been covered by the right div.
Now on the example page you can see that the last paragraph has default back to the body tag style choices. Also, the gray background no longer goes behind it because there isn’t anything continuing the backbone div down the page. It is still open, but it doesn’t have anything to put a background on.
Today’s post was mainly to help set up the basics of what I’m trying to explain about CSS. I really recommend playing with CSS options on a few tutorial sites I love:
- w3schools.com CSS tutorial
- CSS3.info <– This one shows off some of the newer things CSS can do.
Previous RMC Posts:
- RMC: Part 1 is the Planning Stage
- RMC: Creating a Database and Installing TNG
- RMC: My Design Inspiration Sketch
- RMC: Programs You Might Need
- RMC: The Site Design Images- Part 1
- RMC: A Note on Things to Come
- RMC: New Plan and New Background
- RMC: Creating the New Banner
- The Test Website!
Disclaimer: Again I have to say that I’m not an expert. It’s possible I have no idea what I’m talking about. Everything I know about CSS and HTML I’ve taught myself over the years on an as needed basis. Feel free to ask me questions and I’ll try my best to answer them.
One thought on “RMC: A little CSS tutorial”