Education Committee


Introduction to CSS

How To Build Your Own Personal Website

Part 2: An Introduction To CSS

By Abhinav Bhaskar




Purpose

Welcome back to Part 2 of our Web Development tutorials! This tutorial will take what you have learned in Part 1, and teach you how to add CSS, or Cascading Style Sheets, to your HTML document to make it look visually appealing. This tutorial will be structured like Part 1 where we teach you how to style documents through the explanation of various properties. Part 3 will continue to teach you about CSS and get a bit more in depth about various properties and the positioning of elements. We encourage all of our members to play around with CSS during our bootcamp to get themselves more familiar with the fundamentals of web development as we believe it is a more interactive and beneficial method of learning than a simple walkthrough. If you have any questions, feel free to ask the Web Dev directors or email us!

What is CSS?

As you may have noticed, the HTML webpages you created in Part 1 were very plain looking with not a lot going on. This is because we have not yet introduced CSS to our webpages. CSS, or Cascading Style Sheets, is used in tandem with any markup language such as HTML to describe to your web browser the visual layout of a page.

There are 3 main types of CSS: external, internal and inline. The only real difference between these three is readability. Each type of CSS is listed before with a brief description and code to turn all of the text in a div class named container red.

External CSS is perhaps the most common form of CSS. For the sake of readability and good practice, you should have one external CSS file that services your entire website. It is possible to have multiple external CSS files, but this makes finding the right container very hard and needlessly complex.

.container{
  text-color:red;
}

Internal CSS is CSS that is written at the top of each html document. This specifies styling for an individual web page. Typically you will only use this if one web page does not match the formatting of your external css file. The style tag must go inside the head tags!

<head>
  <style>
  .container{
    text-color:red;
  }
  </style>
</head>

Inline CSS is a form of CSS that is actually written inside the html tag in your html file. This should be used sparingly due to the difficulty in maintaining and updating web pages.

  <div class= "container" style="text-color:red;">

It is also important to understand how these three can work in unison. The Inline will override the Internal and External CSS, and the Internal CSS will override the External CSS. Apart from this, CSS has a hierarchy based on Specificity. Specificity will be the leading cause of your headaches with CSS, so be careful - bad code can lead to a nightmare when you're revisiting or editing your work!

NOTE: The !important rule helps to overrule any CSS by placing !important; immediately after the modified property by telling the browser to ignore any specificity and use this styling. This should only be used very sparingly as it often is overused and results in code that is very hard to maintain. Subsequent (lower line number) !important rules with equal or greater specificity override preceding !important rules.

Because it is the most common form, the rest of this tutorial will deal solely with external CSS. You may reference the above snippets to convert CSS between its external, internal and inline forms.

Step 1: Setting up an external CSS file

To start, we must configure a CSS file and connect it to an existing html document. To do this, first generate an html document such as the one below:

<!DOCTYPE html>
  <head>
    <title>Abhinav is better than Anthony!</title>
  </head>
  <body>
    <p>SAAS is great</p>
  </body>
</html>

Once this is done, adding a CSS file to this document is pretty easy. First create a file in the same working directory and name it style.css. Now go back to your html document and simply add <link rel="stylesheet" type="text/css" href="style.css"> in between the head tags. This bit of code just adds a link to the stylesheet and tells the html document to treat it as a text/css document. The href, as you learned in Part 1, just provides a link to the document relative to your current working directory. At this point everything should be set up so let's go test it out.

The CSS file doesn't need any special formatting to get it working. Just start inputting styles! Paste the following in style.css and refresh your web browser: p{color:yellow;}. If you set it up correctly, the "SAAS is great" text should now be yellow. If it turns yellow, you're now ready to learn about how to style documents on your own!

Step 2: What are Classes and Ids?

In Part 1, Anthony taught you about the div (short for division) and span tags in html. In this section, we are going to introduce two new terms, class and id. Both of these tags are used to apply inline and external CSS efficiently to groups of code.

A Class is a non-unique descriptor and can be created using <div class="container">text</div>. This creates a class called container and all CSS applied to container will be applied to its contents (the code between the <div></div> tags). Classes can be reused as much as you want to apply a specific set of styles to multiple blocks of code. Classes are a great way to reuse existing code and keep your CSS compact. We will learn how to style this in the next section.

An id, in contrast, is unique. An id can be created using <div id="container">text</div>. Like the aforementioned class, all CSS applied to container will be applied to whatever is inside the div tags. Ids should be used to group large blocks of text or other content that each require their own styles. Ids also have some unique interactions with 'a' tags and javascript (especially libraries like JQuery) that classes can't have. For example, the navigation links at the top of this blog post link to ids. Clicking these links takes you directly to the section you want! However because classes aren't unique, we have no way to link to a specific spot on our webpage using them.

Step 3: Styling Default Classes, Custom Classes, and Ids

Default Tags

The general approach to styling Default Classes, Custom Classes and Ids are all the same, but are going to start with the default html classes. These are preset classes included in any html document you create. There are a few of these you'll probably use, namely html, body, p, a and the header tags. For now, we're just going to apply the color:red; property. All you need to know at this point is that this will turn the text-color red. We'll explore other ways of working with color next section. To turn all text on the webpage red, just use the following code:

html{
  color:red;
}
this format will be heavily reused so memorize it now. The semicolon will be used at the end of EVERY property to let the webpage know we're done specifying that attribute. If you want to style any other default class, just replace the html in the code with the class name.

Special Case: 'a' Tag

In addition to styling links, you can also decide what they should look like when you hover over them and click them. by using hover active visited. Hover will change the style when the cursor hovers over the link, active will change the style the moment you click the link, and visited will change the style after you click the link. The general format for styling any of these can be seen below:

a:hover{
  color:red;
}

To style hover and active at the same time, just use a:hover, a:active. You can also use this comma technique to apply properties to multiple Classes or Ids at once.

Custom Classes and Ids

Throughout your journey in web development, you are probably going to create your own classes using div containers. How do we style them? It's very similar to styling default tags, just add a . in front of your class name as shown below:

.container{
  color:red;
}

To style Ids, instead of using a ., just use a #

#container{
  color:red;
}

Step 4: Styling with Color

Now that we know how to style different types of Classes and Ids, let's talk about one of the most used properties - Color. In this section, we will discuss text color, but the same concepts can be applied to background-color to adjust the background color of a section of a webpage.

There are three main ways of specifying color in CSS, via text ("black"), hex code (#000000), or rgba (rgba(0, 0, 0, 1)). The easiest to understand and what you are probably already most comfortable with is text. We simply type in a color and it is recognized by the webpage. However, the number of colors we can input via text is finite. What happens when we wish to use a different shade of red? Of course we can try red-orange, but this isn't specific enough for most of our design needs.

This is where hex code comes in. A hex code is a three byte hexidecimal number of the form (#RRGGBB) that represents a specific color. Each byte (number pair) in the hex code represents an intensity of its corresponding color (red, green, blue). If you don't want to memorize all possible hex codes, you can use a 3rd Party site to look up whichever color you want to use. The hex code for black is #000000 or just #000 (#RBG form)

rgba is pretty much the same as hex code, but it adds in a useful "alpha" factor which specifies a value for opacity between 0% and 100%. If you aren't adjusting the opacity value, you can just leave it at 1, or use rgb() which just leaves out the alpha value. the rgba for black is rgba(0, 0, 0, 1).

That's all for the introduction to CSS! Due to length constraints, I have decided to split the CSS tutorial into two parts. For Part 3, Click Here!