What is CSS?


CSS, or Cascading Style Sheets, is the technology that allows us to create beautiful, maintainable and flexible designs. It controls formatting, presentation and the overall layout of websites. A main reason we use CSS isn't only to create flexible, maintainable website designs, but also to keep content separate from presentation, which is a best practice. It's also much easier for human eyes to read what's happening in the HTML if there aren't styles thrown in too.

A little history

CSS was first introduced in 1996 and it had the power to change fonts, colors, alignment and spacing. In 2004, CSS 2.1 added layout and positioning. The current standard of CSS is CSS3, which can add effects like transitions and animations, and change sizing. Modern browsers support CSS3, but there are still a few aging ones, like IE8, that don't support all of the different properties available. All you need to start writing CSS is a text editor, since CSS files are just text files. If you're saving the CSS in a separate file, which is recommended, the extension is .css. So your first CSS file could be called something like "main.css". If your page is relatively simple, you won't need more than one style sheet. But, sometimes you might want to have more than one CSS file to keep your code a little more organized. If you decide to do that, then you should make sure to put CSS files in a folder called Styles or simply CSS. You have to link your style sheet to your HTML or the style sheet will be ineffective. You'll do this using a link element in your HTML's head. This is an example of a link element:

<link rel="stylesheet" type="text/css" href="main.css">

The rel attribute tells the browser how it's related to the HTML. Don't forget to add the link to the location of your CSS in the directory. Our CSS file is in the same directory as our HTML file, so we don't have to tell the browser to change directories, but here's where you would do that.Example of selector, property and value in CSS

Selectors, Properties, and Values

The term used to change the look of a site is always "style" or "styles". Styles are set using rules by using selectors to find the elements you wish to alter from the HTML and then property-value pairs to set the values. The selector tells the browser where to apply the rule. The "body" selector finds "body" element in the HTML. So this block of code would make the entire body element's background color purple:

body {
       background-color: purple;

  It's important to pay attention to the different punctuation elements and the curly braces. All the values that you want to change for that particular selector must be within the curly braces. The property must always be followed by a colon and there should always be a semi-colon after the value. If any of these three aspects are missing, your CSS will probably not perform correctly. There are dozens of different properties available to style HTML. Background-color, alignment, opacity and font-style are just a few of them. You can find a great list of them at the W3C. It's possible to add more than one style to a selector. This is a great practice because it's a way to achieve DRY - Don't Repeat Yourself - code. If you know you want the body element to be purple and also have a width of 1200 pixels, you should just include it all in the same selector, like this:

      background-color: purple;
      width: 1200px;

Also, you can give the same styles to different selectors at the same time by just adding a comma between them before the first curly brace. Here's an example where we want all our headers to display the same font and color:

h1, h2, h3, h4, h5, h6{
                       font-style: cursive;
                       color: red;

Where to add the styles You can add styles directly to HTML elements without including CSS. However, if you add your styles directly to the HTML instead of separately with CSS, you can create some major headaches for yourself in the future. This is because if you want to change something simple, like the color of the text, you'll have to change the HTML of every page, instead of simply changing the CSS for that specific item. Also, your HTML will be easier to maintain because it's only focused on content. A bonus to using a style sheet is that it's much simpler to experiment with different designs. An option to add CSS styles to the HTML is to include them in the <head>. You can go into the <head> and add a style definition inside of a style element, like this:

      background-color: purple;

You can't really use those style rules throughout a website easily though. You'd have to add that style element to every single page of your website. So if you've got a pretty simple site with just a "Home", "About", "Contact" and a "Services" page, you still have to change all the code four times instead of just once with CSS.

Putting it all together

Here we have some simple HTML with a couple classes added to our elements:

     <title>I love Superheroes</title>
     <link rel="stylesheet" type="text/css" href="main.css">
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700' rel='stylesheet' type='text/css'>
          <H1>My Favorite Superheroes</H1>
     <div id = "superheroes">
          <ul class="bold">
               <li class="avengers">Avengers
                    <ol class="numbered">
                         <li>Iron Man</li>
                         <li>Captain America</li>
               <li class="justice">Justice League</li>
               <li class="turtles">Teenage Mutant Ninja Turtles</li>
               <li class="xmen">X-Men</li>

You can see that we've given the different superhero groups different classes. That makes it much easier to target them to change their styles. The way you tell CSS that you want to target an HTML class is with a period before the class name, like this:

	color: #DB1421;

That'll change everything with a class of "avengers" to be red. The way that you target an id is with a pound sign. So if we want to target the HTML element with the id "superheroes" and give it some style we would write this:

	background-color: rgba(184, 184, 184, 0.5);
	padding: 5px;
	width: 50%;
	font-size: 20px;
	overflow: hidden;

Superheroes page with CSS added.


You may have noticed that we've used three different versions of color in our CSS. First we used the name, (purple) then we used the hexadecimal value (#DB1421) and lastly we used the rgba value (rgba(184, 184, 184, 0.5)). The "a" at the end or rgba stands for "alpha" and it controls the transparency or opacity of a color. A best practice is to not use the name, since that makes it a little more difficult for consistency with other objects in the brand since it's not a specific color. You can use the hex value or the rgba value- they're both universally accepted. However, sometimes the rgba can be more useful since you can add the opacity directly to the color value.

In Conclusion

There's a lot to learn in CSS, especially all of the properties and rules. Hopefully you now have a little bit of a foundation to get started. The best way to learn CSS is to just keep practicing. Create a simple HTML file and play around with a style sheet. It's not necessary for you to memorize everything since there's so much documentation, but it's a great idea to get more familiar with it!