Basic Structure
The most basic structure of CSS is the following:
selector {
property: value;
anotherproperty: value;
}Where the selector is an html element and the property is the style that we apply to it. For example <h1> tags, classes, paragraphs, tables or ID’s (if we want to be very specific). If you don’t know what I am talking about head over to the HTML5 Basics post and start there.
CSS Location – link
Where does the CSS go?
-Head of the html document vs referencing the style sheet
You can place your CSS directly into the <head> of the html file. This works, although it is not considered to be best practice. The best practice is to keep the CSS in it’s own separate file and then reference that style sheet in the <head>. But for science, here is an example of the CSS placed directly into the HTML file.
We can also see a very basic application of selection and styling. We have selected the two headings, the paragraph and the unordered list and given each of them a different color.
The correct way to do this however would be to save this styling in another document with a .css extension and then reference the document in the <head>.
<link rel="stylesheet" type="text/css" href="Style1.CSS" />In this sample the “Style1.CSS” file is in the same directory as the html file, so I can simply name the file without providing further context to it’s location. Let’s see what it looks like when we separate the HTML from the CSS (Hint: it will look the same).
Colors
There are 4 ways to represent colors in CSS.
Predefined
There are 147 pre-defined colors in CSS3 that can be used without hexadecimal or RGB. The full list of predefined colors is available here: MDN: CSS color
One example is springgreen
Hexadecimal
This is the most common format for colors.
RGB
A less common format. RGB (Red Green Blue) separates the colors into three channels with options from 0-255
RGBa
This is a relatively new way to display colors but it has a big advantage over the others. It adds an alpha channel (which is another way to say opacity), so that you can make semi transparent text and elements!
It’s pretty self explanatory. The 4th number is the alpha channel. But do note that the scale on the alpha channel is from 0-1 instead of 0-255 like the others. But you can use decimal places!
Background
Color
Now that we know the different ways to define colors, lets use them to play around with changing the background of various elements.
These are just a few examples. Remember that we can also set properties for <div>‘s and many other elements. More on that later.
Image
We can also use images as our background. We just have to specify the location of the image with it’s url.
After we have pulled in the image we can specify how it is displayed with background-repeat and background-size.
Full info on background-repeat can be found here: MDN: background-repeat
Full info on background-size can be found here: MDN: background-size
Border
A border has three parts, Width, style and color. There are two formats to define these three attributes:
As you can see, the second method is much more efficient. Remember that you can use all of the different color methods to style the border, including RGBa!
Here is some fun with the border:
Selectors
Remember the basic format
selector {
property: value;
anotherproperty: value;
}Element
The element selector will select all instances of a given element. This is what we have seen in all of the examples up until this point.
ID
By selecting an ID we provide a “hook” in the html sheet, and then reference that hook in the css.
As you can see we can overwrite the element selector by selecting the ID. And in fact, the ID will always override the element selector, no matter the order that they are placed on the sheet. In this next example we will put the ID selector first, and you will notice that it will not be overwritten by the element selector that comes afterwards.
The important thing to remember about ID‘s is that they can only refer to 1 element! Only 1 single element per page! If you want to create a new category of elements that will all be styled the same, you will want to make a Class.
Class
A class is just like an ID but it can be applied to multiple elements on a page. Let’s make a class called “highlight” and make the background yellow. Then we just apply that class to some spans of a paragraph and we can highlight the text!
Note that we select a class buy using a period(.) instead of an octothorp (#) like we did with ID’s.
Also we added another class in there called .strike which uses the text-decoration: strike-through attribute. I’m not sure how to get both of them to overlap however without using a 3rd class…
Star
The star selector is used to select every element on the page. EVERYTHING.
This can actually be a useful tool if you are trying to visualize all your elements.
Descendent
Selects all of the elements that are a descendent of the first element listed. Here we have two sets of identical anchors (links). But we are going to color the background of just the links that are inside of li‘s by making a descendent selection.
Adjacent
Selects all of the elements that come after the first element listed.
Attribute
Allows you to select based on the attribute of an element (ID, name, href etc). So for example we could select all of the links that link to Google specifically. Or all of the inputs of a certain type like type=”checkbox” (as opposed to selecting all inputs at once!)
Fun fact, it turns out that styling checkboxes is actually very limited and tedious. So in this example, to show that we have selected it, we have simply hidden it.
Nth of Type
Selects of nth of the selected element. It follows this basic format:
element:nth-of-type(n) {
styling
}But it is important to note that it selects the nth of a given group. But will not repeat in the same group. For example:
We have selected the 3rd h3 heading, but it did not repeat again on the 6th. However if we create a series of ul and select the 3rd li it will select the 3rd li in every set!
There is a way to select every other element however, and that would be by using even or odd in the place of n.
The Cascade
The Cascade in CSS is simply referring to the parent child relationship, and how styles will cascade from a parent through to the children, unless another specific style is named for those children. For example, the highest Parent object would be the body element. If you select a background color for the body, every element inside of the body will have that color, unless otherwise specified. If you select a background color for a <ul> all of the <li>‘s inside of that list will inherit that background color unless otherwise specified. This applies to all elements that have a parent/child relationship.
In the above example we have several elements, and all of them have a blue background because they inherit this color from the body. Except for the one element that we have defined a specific style for, which is the li‘s.
Specificity
In the last example we saw how we were able to override the cascading background color for the li element by specifying a different color for it. Specificity is the hierarchy of selection that lets the most specific selector “win”. The general hierarchy of selectivity would be as follows:
element < class/attribute/pseudo-selector < ID
with ID being the most powerful. This makes sense as there are fewer of each element as you go down the line (with ID’s having only 1 per page!).
You can read the full write up on Specificity and the Cascade at MDN.
You can calculate the levels of specificity with The Specificity Calculator
