Why do we use CSS?

In web design you’ll often hear about the separation of content and presentation. This is so that different styles, ie; the presentation, can be used across multiple documents, ie; the information without having to rewrite out the styling every time it is used. That separate styling info is what makes up your CSS code, or Cascading Style Sheets, which can be applied to multiple pages at once.

Each element can be styled by one or more entries (also called "Classes" or "Selectors") defined within a style section, typically written in, or linked to within, the header element.

CSS is close to a markup language like HTML, but describes the layout differently. The order of the selectors (and the properties within) you define only matters if they have the same target. In that case the last read (lowest) entry will be the one to be applied. Otherwise there is no reason that the CSS selectors and properties should come in a similar order to the HTML (or whatever order you prefer).

Object Oriented Languages are are languages that allow you to create copies or "instances" of objects to modify individually.

CSS is not an object oriented language. You may have come across a few proponents of the opposite idea, but these are mostly authored by bloggers who enjoy the idea of being part of a new wave, and typically don't have a background in actual object oriented languages. Yeah I said it.

It can be confusing because even though CSS makes use of "classes", and these "classes" can be applied to multiple elements, they are not objects. CSS does not support instantiation (You can not create a new copy of a class and modify it seperately), classes can not be extended upon through inheritance, and there are no functions that can be invoked after the initial loading of the document.

They can't even have their properties modified after the page is loaded (without javascript).

Inline VS Linked styling

As mentioned in the HTML section, it is possible to apply many of the properties discussed here to an element within the HTML itself, but at the cost of modularity. Inline styles have to be changed individually for all elements you wish to change.

If we have multiple elements that share similar stylin then we should use an actual style section and link each element to a class in that section. We do this by literally creating a "style" element within the document header. Within that styling element we can add individual CSS classes, each with individual properties, and which can each be applied to multiple elements.

It basic structure will look something like this.


<html>
<header>
<style type="text/css">
    #style{
    }
</style>
</header>
<body>
</body>
</html>

Now let's look at what goes within each of these #style objects.

Syntax

The first thing to know about Cascading Style Sheets (CSS) is that it does not follow the same syntax as HTML.

  • CSS uses curly brackets instead of arrow brackets.
  • CSS styles can NOT have "parents" or "children".
  • CSS can NOT use variables.
  • CSS can NOT execute functions such as addition or subtraction.
  • CSS comments are enclosed by "/*" and "*/".
  • Properties should be seperated by a semicolon at the end of each line.
  • CSS "Selectors" should not begin with numbers or hyphens. Try to use alphabet letters only.

There are three main components to every entry in a CSS file, the selector, the property and the value.

Selectors define which elements to apply styles to.

Selectors will be the way in which you define which elements a set of properties will be applied to. Multiple selectors can be used for a set of properties, and there is no limit to how many properties can apply to a selector.

A Property is an element style we can modify.

Properties define which style should be changed in a given element. Each one defines a small part of an element's look, for instance the width, height, color, and how it is positioned within the screen. Property keywords are predefined, you can not make your own.

A Value is a parameter used by a property to change a style.

For each property you need a value. If the propertis will define which style should change, the value will define by how much. Be aware; some properties will take a single value, some will take multiple values. Furthermore, some might be simple integers, others will be predefined keywords, or even RGB color values.



/*
Here is an example of how actual CSS will look.

The sentences within the slash/asterisk brackets
are simply non-operational comments.

A simple CSS style entry for a simple red box.
Here "my_box" is the selector, "position" is a 
property and "relative" is the value.
*/

#my_box {
	position:relative;
	width:100px;
    height:100px;
    background-color:red;
}

Selectors

Selectors typically come in three basic types, element selectors, id selectors, and class selectors.

Prefix Type Description
# ID selector The styles within this tag are applied to the element with the matching "id=" attribute.
. Class selector This style is applied to all elements with the same "class=" attribute. They can be used on multiple elements.
none Type selector Without a prefix the style looks for an ELEMENT with the same name ("div", "p", etc....).

So again.

“#” denotes an "ID Selector" that links to an id attribute (id=“x”).

“.” denotes a link to a class attribute (class=“x”).

Be careful about forgetting these prefixes as leaving them off a tag reference is valid as well. Using a generic tag like so…


p {
    color:red;
    margin:20px;
}

…will result in ALL "p" elements having red text and a margin of 20 pixels ("color" always refers to the text). This is a valid use, if not recommended, just make sure to remember you added that style or you’ll wonder why an element with an id is not appearing the way you thought it would.



/*
Here is a bare-bones setup with a style set and HTML
section.  If you were to copy the HTML seen here to
to a text file, copy the CSS into the header, and open
it within a browser you should be able to see the same
window next to this one.

Note how since the first box uses a "class" reference 
it can be the source for the other two box dimensions
while new "id" tags change specific things about that
particular box.
*/

.u_box_sizes {
	position:relative;
	background-color:pink;
	width:200px;
	height:200px;
	margin:10px;
	line-height:200px;
	text-align:center;
	outline:1px solid black;
}

#u_blue_box {
	background-color:lightblue;
}

#u_green_box {
	background-color:lightgreen;
}



<html>
<header>
<style>

</style>
</header>
<body>
    <div class="u_box_sizes">
    Red box
    </div>
    <div id="u_blue_box" class="u_box_sizes">
    Blue box
    </div>
    <div id="u_green_box" class="u_box_sizes">
    Green box
    </div>
</body>
</html>

Red box
Blue box
Green box

Many times people will ask why, if you can apply as many classes as you like to an element, do we even have classes and ids instead of just classes. There are a few reasons.

  • An id reference will always override a class. Making it ideal to edit one in a series of similar elements.
  • As you'll see later, when using JavaScript it make referencing those elements much easier. In JavaScript you can edit elements via their identifier name. If you search for just the id on the page you get that id. If you search for a class you get a "list" of all instances of that class which then has to be searched through to find the one you want.
  • Some electric readers for the visually impaired vocalize id names but skip class names as they expect the id to be for a unique element and a class to be for generic properties.

Selectors (Conditional)

Conditional selectors allow you to define which elements are selected based on their location within the document. It's similar to using an "if" statement in traditional programming, but without an actual condition syntax.

Though they are probably used in most professional pages they are not critical knowledge if you are new to web development.

These selectors are numerous enough to warrant their own section later on.

CSS Property Examples

There are literally hundreds of different properties that can be added to a css object. Instead of defining all of them I'll simply list and describe the most widely used below for the sake of explanation. Full lists can be found at the following locations.

HTML Dog

W3 Schools

If you are using a program like dreamweaver, CSS property options should be shown automatically as soon as you hit the "enter" key within a css object.

Sizing

In CSS, giving a size to an element is as simple as using the "width" and "height" properties. The below shape was given a width of 200 pixels and a height of 100 pixels with "width:200px; height:100px;".

And the actual code would be the following.


#cube {
    width:  200px;
    height: 100px;
	background-color:lightgreen;
}

Elements can only be squares or rectangles but they can not be circles or other shapes. Though you'll see it is possible to make odd shapes through combining elements and using images with transparent areas they will always be tricks of the eye. All individual elements are created as rectangles only.

Spacing

To start, two of the most commonly used properties are "margin" and "padding". They both describe the space between an element and the elements around it, but margin leaves this area blank while padding actually changes the size of the element area.

Here we have an element with the different parts color-coded and described.

"Margin" adds *clear* space around an element. Imagine this dotted line is the defined margin around our element pushing other elements away.

"Padding" adds space around an element that is filled with either the background color or image. This is the pink area here.

Element contents

"Border" & "Outline" can be applied to a one or multiple sides of an element, but will appear around the padding, if it is defined.

(Please note: The above was actually made with 3 boxes for sake of the example.)

It is possible to apply margins or padding to just one side of an element by adding a suffix. For instance instead of "margin:20px;" you would enter "margin-left:20px;" to add a margin to only the left side of an element. The four direction suffix are easy to remember:

  • "-top"
  • "-bottom"
  • "-left"
  • "-right"

You might also be wondering about the difference between "Border" & "Outline". Both add lines around the perimeter of an element, but only "border" actually adds width or height to the element, "outline" simple draws over the existing element space. You can see an example of this in the positioning section.

Let's look at an example of the actual code and the result. Keep in mind the text within the element is revealing the actual content area as opposed to the padding area.


#my_box {
    width:200px;
    height:auto;
    
    padding-left:   10px;
    padding-right:  50px;
    padding-top:    30px;
    padding-bottom: 70px;
    
    background-color:pink;
}
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Positioning

Even though it uses the same CSS properties found on this page, positioning elements on a web page is a large area of discussion. Enough that you'll find it comprises the next section entirely.

Overwriting Properties

Lastly, keep in mind that any duplicate properties will overwrite each other. It doesn't matter if the duplicate property is within the same class, a different class, or a differenty linked file altogether.

For instance if we have the following code.


.my_box {
	position:relative;
    width:200px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    background-color:red;
    outline:5px solid green;
}

.my_box {
    background-color:lightgrey;
}

Then the background color of the element will be "grey". The remaining properties established by the first CSS class will persisty. Just because the second instance of the class doesn't have all of the original properties doesn't mean they are being removed, it just means they are using the values we've already assigned in the first class.

The square that results from the code to the left.