Malyce's 30-Second CSS Tutorial

Introduction


I'm not trying to re-invent the wheel with this tutorial. There are plenty of comprehensive lessons on ways to use CSS and the tricks you can do. You can check out some of my favorites in the links section. Instead, I've created a bare-bones introduction to making static pages with CSS.

Why Learn CSS?


The short answer is because it gives you more control over how your content is presented in an HTML document. It's not just for the old-school, showcase style websites that I like to create. It's also great for customizing wordpress themes and even Twine games. The main reason coding hobbyists love it is because it's a timesaver. Instead of changing the code on multiple pages, you can keep a consistent appearance by editing ONE .css file.

HTML vs CSS


HTML is your content. The words on the page, the spacing, and the names of different sections. The CSS stylesheet tells your browswer what to do with each element. Let's take a look at the HTML and CSS for the file you're browsing right now:



The pane of the left is my HTML file. It has very little in the way of customization, and it doesn't specify colors. It just spells out 3 things: 1) the text you're reading. 2) the names of each section and 3) How things are spaced. This means you can create content from scratch without having to worry about spacing and positioning things right away. The file on the right pane is the CSS file, or stylesheet. (More on that in a minute).

What's a stylesheet?


CSS stands for Cascading Style Sheet. Basically, your stylesheet finds all the classes and IDs in your HTML file and tells the browswer how to display them. In order to transform your HTML file into a fairly boring-looking bit of text and blue links, you link to the stylesheet. Here's what the header HTML for this page looks like:
<html><head><title>Malyce's 30 Second CSS Tutorial</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<div id="table">
<h1>Malyce's 30-Second CSS Tutorial</h1>
</div>

Classes & IDs


In the HTML file, you may have noticed two bits of code that show up over and over
<div class="something">
and
<div ID="something">


Classes and IDs give names to different sections of your HTML document. The difference is that many different sections of your document can be part of the same class while an ID names one specific section. This is we would change their appearance in the stylesheet:
.something {
background-color: #000000;
font-face: verdana; }

#something {
background-color: #ffffff;
font-face: arial;
color: #c0c0c0;
}

Periods are for classes, and hashtags are for IDs. Just remember that in school, you have many different class periods. Note that each class and ID is followed by an open bracket. The code between those two brackets is what changes the appearance of text in your classes and IDs

Selectors & Properties


The selector picks an element to change. The property decides how it looks. For example:

When you put it together, you have: The semi-colon tells the browswer that you're done defining the selector, much like the ">" when coding HTML.

So, Now What?


Here some of the most common selectors:
Obviously, this isn't an exhaustive list of things you can do with stylesheets. If you really want to dig into the code and learn how to make some more interesting effects, check out the tutorials in the links section.

So, How do I Make Those Pretty Link Effects?


Mouseover links are a psuedoclass; you have to define each link separately, and in this order: Link, Visited, Hover, Active. Remember LOVE HATE. Your code will look like this:
body a:link {color: #COLOR; }
body a:visited {color: #COLOR; }
body a:hover {color: #COLOR; }
body a:active {color: #COLOR; }

Links


  • Brackets- I do all my coding on this program. It lets you edit multiple files simultaneously and preview changes. No more saving and loading!
  • W3 Schools- A more comprehensive CSS tutorial
  • CSS Tricks: CSS Almanac- Complete list of CSS classes and properties
  • HTML Dog- Another good series of tutorials
  • Codecademy- Tutorials for HTML, CSS, & other programming languages.
  • Convert HTML code to plaintext.- I used this to save time when I wanted to display bits of raw code in the HTML file.
  • CSS Minifier
  • HTML Color Picker
    •