Basic CSS Anatomy

CSS Diagram

Lets have a look at some basic CSS anatomy.  Styles can be as complicated as we want to get but at its core CSS is very simple.  As you can see below there are a few parts to the statement. The first thing we need to decide is WHAT we are going to style?  In the case below we are styling the body of our page.  In terms of the HTML this is the entire visible area of the page; essentially it is your canvas.

Next comes the declaration.  Here is where we are going to tell the browser how we would like the body of our page to look.  The property being assigned is the “background-color” and the value being assigned to it is “black”.  Adding the semi-colon at the end is a good habit to get into.  In the example below we only have one attribute, but you can list as many property/value pairs as you want as long as they are separated by a semi-colon.

CSS Diagram


Now lets look at a slightly more complicated style sheet.  In the example below we can see all three types of selectors.  First is the tag selector “body”.  CSS can be applied globally to HTML tags to set up an initial page style.  This is particularly handy for font families, text styling, background colors, and anything else that makes up the foundation of your site.

Next is an ID selector.  These are a bit tricky.  The ID selector may only be used once on the page.  This type of selector is great for containers.  You will want to carve up your page into headers, footers, sidebars, and so on.  If you peek at other peoples style sheets you will see things like #main_site_container, #sidebar_1, #google_ad_header, and so on.  CSS is being used to arrange these containers into an organized page.

Lastly is classes.  Here is where we get our flexibility.  If you assign “black” to your paragraph (p) tag it will all be black every time you use the (p) tag unless you apply some classes.  Say you wanted a red paragraph, you could do that by creating a class called .red_text, like we did below.  now when you add class=”red_text” to any of your tags, the text in that area will now be red.  Confused yet?  Me too.  Check out the tutorial on this site.  The best way to learn CSS is to play with it,  you can cut and paste the page file and the CSS and chip away at it to see how things work.  If you’re not ready for that, play with the try it editors on the w3schools site.   Click here for a full list of CSS selectors

Basic main.css file.

Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin

1 Comment

  1. Comment by How to Build a Website from Scratch Lesson – 2 | Web Design for Beginners

    [...] [...]