CSS Basics: Part 1


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.

See the Pen CSS in Head by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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).

See the Pen CSS is referenced by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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

See the Pen CSS predefined colors by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Hexadecimal

This is the most common format for colors.

See the Pen CSS colors_hexadecimal by Nicholas Coughlin (@nicholascoughlin) on CodePen.

RGB

A less common format. RGB (Red Green Blue) separates the colors into three channels with options from 0-255

See the Pen CSS colors_RGB by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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!

See the Pen CSS colors_RGBa by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS – Background Color by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS – Background Image by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Full info on background-size can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Border

A border has three parts, Width, style and color. There are two formats to define these three attributes:

See the Pen CSS3 – Borders by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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!

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.

See the Pen CSS3 Selectors – ID by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS3 Selectors – ID by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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

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!

See the Pen CSS3 – Class by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS3 – Star Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS3 – Descendent Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

Adjacent

Selects all of the elements that come after the first element listed.

See the Pen CSS3 – Adjacent Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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!)

See the Pen CSS3 – Attribute Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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:

See the Pen CSS3 – Nth of Type Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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!

See the Pen CSS3 – Nth of Type Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

There is a way to select every other element however, and that would be by using even or odd in the place of n.

See the Pen CSS3 – Nth of Type Selector by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS – The Cascade by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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

That does it for Basics Part 1. For more check out CSS Basics: Part 2

+ There are no comments

Add yours