CSS

Introduction

Cascading Style Sheets define how HTML elements are to be displayed. CSS is going to save you a ton of work and at the same time will enable you to re-use code.

Inline Styling

Styles were added to HTML 4 to allow users to edit the look and feel of their web pages inline. Inline styling is an HTML-specific style inclusion method, in which style information is directly attached to the HTML element it affects. A universal element attribute, called STYLE [-->Index DOT Html], may be specified for an HTML element, taking, as a value, one or more style Declarations.

External Style Sheets

External Style Sheets are stored in separate CSS files. (With a .css extension). It is considered bad practice to use inline styles in your html. The current day professional defines classes and id's in their elements and add style to them in the .css files. An exception is often made for structural styling such as margins and padding--however with good planning these can often be limited to only a few absolutely necessary inline styles.

You Don't Write CSS, You Design It

CSS is not a programming language! It's a language you use to style elements on your page to look and act the way you want them to. That said, let's take a look at the three types of selectors in css...

By Element

Let's say you want to style every <p></p> element to have a margin of 5px. If you do it through html style attributes, you'll have to write and rewrite a ton of extra code. With css though, it's a super easy one line affects all kind of solution...

p {
  margin-top: 15px;
  margin-bottom: 10px;
}

By Class

Now what if you want to only affect certain elements, but you know you'll need to reuse the css code for multiple of them? The answer is simply: use a class! Classes are meant to be used with css to apply styling to multiple elements on a page at once. To specify that this css applied to a class you will use the period . before the name of the class you want to style.

.errorMessage {
  color: red;
  border: 1px dashed maroon;
  padding: 15px;
  text-align: center;
}

<div class="errorMessage">
  Oh no something went wrong!
</div>

By Id

In the next section you will learn when to use an id and when to use a class, but for now lets see how to style something by it's id.

#main-navbar {
  background-color: #444;
  width: 100%;
  height: 45px;
  padding: 5px;
}

<div id="main-navbar">
  <a href="./home.html">Home</a>
</div>

When Should You Use Id's vs. Classes?

To make things simpler for yourself, you should just always use a class when selecting something for styling with CSS. You can use multiple classes in your HTML and thereby style many things at once, whereas IDs need to be unique and can only style one thing at a time. They don't inherently work better or worse than each other, so stick to using classes for styling with CSS.

When it comes time to use JavaScript, using IDs will be much more commonplace and useful, so we're still going to be using IDs eventually.

Mixing Selectors and Traversing

In the most recent code and image example--the one under the id's section--the navbar looks pretty horrible with that dark blue text on the dark gray background. Unfortunately you can't simply add a color property and expect the <a> element to display it's text as that color, because it has it's own generic styling and that overrides the styling you gave to the id--note that even if you used a class to accomplish the same thing you would still have this problem. To solve this lets traverse through our elements in order to style the <a> element.

Traversing is an extremely useful technique that allows you to apply styling to children elements of an element marked by an id or class. Here's how...

#main-navbar {
  background-color: #444;
  width: 100%;
  height: 45px;
  padding: 5px;
  padding-top: 15px;
  text-align: center;
}

#main-navbar a {
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
}

<div id="main-navbar">
  <a href="./home.html">Home</a>
</div>

In the css above, we are saying all link elements inside of an element that has the id attribute of 'main-navbar' should have the specified styling. Now our navbar looks like this...

Keeping the CSS Namespace Clean

Thus far you've seen how to use id's and classes and how to traverse to their children. Now you need to be made aware of a common css problem. Often times you will have several css classes or id's that are similar and while you're developing it's really easy to lose track of what class and id names you've used and if you forget, you might mess up some styling elsewhere on your website.

The best practice is to wrap every page's content in a div with an id attribute and then every time you need a new class or id, you should make it a child class of the id you wrapped everything in. Here's what I mean:

#other-content .main-title-section{
  background-color: blue;
  color: yellow;
}

#main-content .main-title-section {
  background-color: black;
  color: white;
}

<div id="main-content">
  <div class="main-title-section">
    This is the best!
  </div>
</div>
<div id="other-content">
  <div class="main-title-section">
    This is good too though.
  </div>
</div>
<div id="last-content">
  <div class="main-title-section">
    This is not styled...good.
  </div>
</div>

Even though we've added style to the main-title-section class in multiple spots, they each behave properly without interfering with each other because we've nested them inside of unique id's and styled only that class when it's within that id.