Setup and Selectors

As you might have seen in the previous course, the structure of web pages created by plain HTML is very basic and it’s nothing like what we see on modern interactive websites at all! Most of these websites have been styled with CSS along with some other technologies.

CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page. Hereby styling we mean stuff like modifying text and background colors, font size or type, position, etc.

In this lesson, you’ll learn how to select which HTML elements you wish to style and set up your CSS file structure.

Inline Styles

Although CSS is an independent language from HTML, it’s possible to write CSS code directly within HTML code using inline styles.

To style an HTML element, you can add the style attribute directly to the opening tag. After you add the attribute, you can set it equal to the CSS style(s) you’d like applied to that element.

<p style=“color: red;”>This text is red!</p>

 

The above  example demonstrates how to use inline styling. The paragraph element has a style attribute within its opening tag. Next, the style attribute is set equal to color: red; which will set the color of the paragraph text to red within the browser.

If you’d like to add more than one style with inline styles, simply keep adding to the style attribute. Make sure to end the styles with a semicolon (;).

<p style=“color: red; font-size: 20px;”>This text is red and the size is 20 pixels!</p>

The <style> Tag

Inline styles are a fast way of styling HTML, but they also have limitations. For one thing they make your HTML very polluted and hard to read. Also if you need to style a specific element, say an <h1> , you will have to write the style for every single <h1> element.

Fortunately, HTML allows you to write CSS code in its own dedicated section with the <style> element. CSS can be written between opening and closing <style> tags. To use the <style> element, it must be placed inside of the <head> element.

<head>
  <style>


  </style>
</head>

 

After adding a <style> tag in the head section, you can begin writing CSS code.

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

 

The CSS code in the example above changes the color of all paragraph text to red and also changes the size of the text to 20 pixels. Note how the syntax of the CSS code matches (for the most part) the syntax you used for inline styling. The main difference is that you can specify which elements to apply the styling to.

Again, the details of the CSS syntax in the example above aren’t important at the moment. You will learn more about the details of CSS syntax in later lessons.

Linking the CSS File

So far we learned how to add inline styles or using <style> tag. However, doing so will make our HTML file long and less readable. In large projects, developers usually prefer to keep HTML and CSS in separate files. You can write your style in a file with .css extension and then link it to your HTML file easily.

You can use the <link> element to link HTML and CSS files together. The <link> element must be placed within the head of the HTML file. It is a self-closing tag and has three attributes:

  1. href — This contains the address, or path, to the CSS file. Just like href in <a> element.
  2. type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
  3. rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.

When linking an HTML file and a CSS file together, if the CSS file is located in the same directory as your  HTML file you can use a relative path like so:

<link href=“./style.css” type=“text/css” rel=“stylesheet”>

 

But if the CSS file is located somewhere else, say on a remote server, you can use URLs:

<link href=“https://example.com/style.css” type=“text/css” rel=“stylesheet”>

 

Tag Name

When using CSS to style your HTML file, you need to select the elements that you want a specific style to be applied to. That’s what selectors do for us! There are multiple kinds of selectors and we will cover the most important ones here.

The simplest way to  select HTML elements is by using their tag name. A tag name is the word (or character) between HTML angle brackets.

For example, in HTML, the tag for a paragraph element is <p>. The CSS syntax for selecting <p> elements is:

p {

}

 

In the example above, whatever styling we write between the curly braces will be applied to all <p> elements in our document.

Class Name

Another way of selecting elements from the HTML document, other than using tag name, is using class name. Each HTML element can have a class attribute. It is also possible to select an element using its  class attribute.

Look at the following example:

<p class=“coding”>Coding With Basir</p>

 

The paragraph element in the example above has a class attribute within the <p> tag. The class attribute is set to “coding”. To select this element using CSS, we could use the following CSS selector:

.coding {

}

 

To select an HTML element by its class using CSS, you should add a period (.) before the class. So when class=”coding” the CSS selector is .coding  

Multiple Classes

You learned what class does for us in the last section. It is also possible to set multiple classes for a single HTML element. You can do that simply by separating the class names by a space character ( ).

See the following example:

<p class=“italic blue”></p>

 

There is a class element in the example. We need the content of this element to have both the color blue and italic style. So the CSS would be:

.italic {

  font-style: italic;
}

.blue {
  color: blue;
}

 

This method helps us mix different existing styles and prevent repeating a style every time we need to use it.

ID Name

If an HTML element needs to be styled uniquely (no matter what classes are applied to the element), we can add an ID to the element. To add an ID to an element, the element needs an id attribute:

<p id=“first-paragraph”></hp>

 

Then, CSS can select HTML elements by their id attribute. To select an id element, CSS prepends the id name with a hashtag (#). For instance, if we wanted to select the HTML element in the example above, it would look like this:

#first-paragraph {

}

 

Classes and IDs

So far we know that CSS can select HTML elements by their tag, class, and ID. CSS classes and IDs have different purposes, which can affect which one you use to style HTML elements.

CSS classes are meant to be reused over many elements. By writing CSS classes, you can style elements in a variety of ways by mixing classes on HTML elements.

For instance, imagine a page with two heading elements. One heading needs to be bold and red, and the other needs to be italic and red. Instead of writing separate CSS rules for each heading that repeat each other’s code, it’s better to write a .red CSS rule, a .bold CSS rule, and  .italic CSS rule. Then you can give one heading the red bold classes, and the other the red italic classes.

While classes are meant to be used many times, an ID is meant to style only one element. Always remember that IDs override class and tag styles, so you should only use it when you exactly want to a particular style to be applied to your element solely.

Specificity

When deciding which styles to apply, browsers use a specific order. This order is called specificity.

IDs are the most specific selector in CSS, followed by classes, and finally, tags. For example, consider the following HTML and CSS:

<h1 id=“css-heading” class=“css-heading”>Cascading Style Sheet</h1>

#css-heading {
  color: red;
}

.css-heading {
  color: cyan;
}

h1 {
  color: magenta;
}

 

In the example code above, the color of the heading would be set to red, as the id selector is more specific than the class selector. The same goes with class and tag selectors. So the order of specificity for css selectors is as follows:

  1. ID selector
  2. Class selector
  3. Tag selector

 

To make styles easy to edit, it’s best to style with a tag selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.

Chaining Selectors

When specifying css rules for your HTML document, you might need to have more than one CSS selectors at the same time.

This is done by combining multiple selectors, which we will refer to as chaining. For instance, if there was a .news class for h1 elements, the CSS would look like:

h1.news {

}

 

The CSS selector in this example will just select the h1 elements with a class=”news”. Other types of elements other than h1 , won’t be selected even if they have class=”news”.

Nested Elements

It is also possible to select elements nested within other elements. Imagine we have a list like this:

<ul class=‘first-list’>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

The nested <li> elements are selected with the following CSS:

.first-list li {

}

 

In the example above, .main-list selects the .main-list element (the unordered list element). The nested <li> are selected by adding li to the selector, separated by a space, resulting in .main-list li as the final selector (note the space in the selector).

Selecting elements in this way can make our selectors even more specific by making sure they appear in the context we expect.

Chaining and Specificity

In the previous section, instead of selecting all li elements, you selected only the li elements nested inside the .first-list elements. ? The more you add selectors of different types like id, class or tag to a CSS selector, the more specific it gets.

For instance, take a look at the following:

span {
  background-color: yellow;
}

.container span {
  background-color: white;
}

 

Both of these CSS rules define what the background-color of a  span element should be. The first one is more general. So the style will be applied to all the span elements in the document. However, when it comes to elements that are wrapped with an element with .container class, the background-color: white will override the first one since it is more specific.

Important

There is one thing that is even more specific than IDs: !important. !important can be applied to specific attributes instead of full rules. It will override any style no matter how specific it is. As a result, it should only be used in very rare cases. Once !important is used, it is very hard to override.

This is how the previous example would be written using  !important:

span {
  background-color: yellow!important;
}


.container span {
  background-color: white;
}

 

This time since !important is used on the span selector’s background-color attribute, nothing can override that. Even the span elements inside an element with .container class will get that style.

The !important flag is only useful when an element appears the same way 100% of the time. Since it’s almost impossible to guarantee that this will be true throughout a project and over time, it’s best to avoid !important altogether.

Multiple Selectors

CSS also supports adding styles to multiple selectors all at once. This will help developers avoid repeating the same code over and over.

Consider the following code which has repetitive style:

h1 {
  font-family: Arial;
}

.side-bar {
  font-family: Arial;
}

 

We can prevent writing font-family: Arial twice by separating the two selectors with a comma:

h1,
.side-bar {
  font-family: Arial;
}

 

By separating the CSS selectors with a comma, both the h1 and the .side-bar elements will receive the font-family: Arial styling.

Review

This lesson taught you how to use CSS selectors to select HTML elements and apply styles to them. Let’s review what we covered so far:

    • CSS is for styling HTML elements. In order to do this, CSS must select HTML elements, then apply styles to them.
    • CSS can select HTML elements by tag, class, or ID.
    • Multiple CSS classes can be applied to one HTML element.
    • Classes can be reusable, while IDs can only be used once.
    • IDs are more specific than classes, and classes are more specific than tags. That means IDs will override any styles from a class, and classes will override any styles from a tag selector.
    • Multiple selectors can be chained together to select an element. This raises the specificity, but can be necessary.
    • Nested elements can be selected by separating selectors with a space.

 

  • The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.

 

  • Multiple unrelated selectors can receive the same styles by separating the selector names with commas.