Topic: CSS

Explains an overview of CSS. Cascading Style Sheets have cured the symptoms of a boring internet by presenting the possibility of formatting and styling.

CSS Quiz

The Standard CSS Quiz

While HTML is the heart of the internet, CSS provides the beauty. This quiz was designed to test your technical knowledge of CSS and not the graphic design portion. After completing this quiz, you will get a sense of how well you know how to manipulate CSS properties and classes. If you score well, you should consider moving onto a real programming language like JavaScript that will allow you to do even more advanced web development.

Start The CSS Quiz

CSS Tests and Exams

As of now, we only provide a standard CSS quiz that is not intended to be a professional test. There might be the possibility to integrate a testing system into After Hours Programming, but we are not currently working towards that goal.

Background

Setting the CSS Background property of an HTML is easy! It provides one of the greatest changes you can do in styling with the least time required. With only 5 properties, this will be a relatively simple tutorial.

Styling the Background

Common Properties:

  • background-color – sets the background color
  • background-image – links to an image and displays it in the background
  • background-repeat – for HTML elements larger than the background, it determines which way to tile repeat the image
  • background-position – sets the background position
Example
<style type=”text/css”>
div.special
{

background-color:#090;
background-image: url(‘/images/smiley3.gif’);
background-repeat: repeat-x;
background-position: left bottom;
}
</style> 
<div class=”special”>

line 1 
<br/> 
line 2
</div>
Result
line 1
line 2

We have a div with the class of special that has a few line breaks and some text to make it taller. In our CSS, we use background-color set to “#090” (Green) that will be the color of the special div’s background. Next, we set the background-image to a URL that is a reference of “images/smiley3.gif”. The background image needs the url(”) where your link will go in between the single quotes. Quick note here, it might seem like a conflict of interest to set a background color and a background image, but the background color is more of a fallback for what the background image doesn’t cover.

The background-repeat property by default is declared as “repeat”, which commands the browser to repeat the image horizontally and vertically. You must override that property if you expect anything different, just like how we only wanted horizontal repeating, hence the background-repeat set to “repeat-x”. Last and close to least, is the background-position property. Normally, you would not use this with a repeating background image, but I have done so for illustrative purposes. You can utilize this property to position the background wherever you would like, but recognize that it is only useful if the image is smaller than the HTML element.

References

Overview

Welcome to the classy web world of style using CSS. Cascading Style Sheets are arguably one of the greatest things that happened to the web just over a decade ago. As you were writing your HTML in the previous tutorial, you might have thought that building a web page was lacking something. CSS is not only beautiful and stylish, but it is also very efficient.

Cascading Style Sheets reside on the client side, which means the user can, with the correct knowledge, see all of your CSS files. Style Sheets were invented because the internet was plum boring due to the creators being scientists who were primarily interested in using the internet as a medium for communication (At least, that’s how I’ll write the history books on it). Kudos to them on developing the internet though.

While the internet is awesome, thank goodness we have the World Wide Web Consortium (W3C). Some genius over there said, “Hey, let’s make styling into a file type so we can have other pages link to it.” He is my unnamed hero. This means you can create billions and zillions of HTML files using a particular naming structure on the HTML elements and 1 CSS file that can style all of them. That’s right, you don’t have to go into the HTML files to change the style. Isn’t it so beautiful?

References

Introduction

So, you are sold on using CSS to style your HTML elements? First, we need to figure out how to tell the browser we are using CSS. We can do this by referencing the CSS as a separate file or we can place it inside our HTML document.

Referencing a Cascading Style Sheet

There are three ways to define CSS.

  • Inline/element Styling (Not so great)
  • Internal Style Sheet (Not bad)
  • External Style Sheet (The best way)

Inline or Element Styling

Inline/element styles are the worst because if you ever want to change a style later, you will have to drill down through your HTML to find the element and change its style tag. Please don’t do this unless you never want to change that element later.

Example
<p style=”color:#900;”>Sample Styled Text</p>
Result

Sample Styled Text

Internal Style Sheet

The reason I am not too fond of this way to utilize CSS is that it doesn’t permit other HTML files to use it. Yes, it still does permit you to change multiple items in a class, but why not just make it to where all HTML pages can use that class? However, if you argue that it might crowd your external style sheets, I completely understand. Just make sure that your internal styles aren’t going to be repeated somewhere else.

Example
<style type=”text/css”>
p.special_p {
color:#900;
}
</style>
<p class=”special_p”>Sample Styled Text</p>
Result

Sample Styled Text

External Style Sheets

Take everything from the p.special_p to the } and put it into its own separate file with an extension of .css to declare it as a CSS file. We can reference this file to do exactly what happened above, but now we can use the class=”special_p” in every new HTML document we create. All of those new files with a paragraph tag that has that specific class will be colored red. Linking to the file is really easy. Somewhere toward the bottom of your HTML head tag, put the following:

Example
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”screen”/>

A few of these are standard for referencing a style sheet. The rel attribute will always be set to “stylesheet” and type will always be set to “text/css”. The href will be the set to the path to your stylesheet. Finally, the media tag is the most complicated. It is most often set to screen because that is a reference to the computer’s screen. However, there a couple other references, such as “print” for whenever users try to print your page, “handheld” for phones, etc. Can we finally learn some CSS? Of course!

References

Font and Spacing

Let’s start off with using our CSS to make some awesome text by changing the font and spacing. CSS can do so many awesome things, but often the font and spacing are overlooked, much like typography in general. I must admit, I love typography, even though I am not the best at it. So, this will be a rather long tutorial, but you will have a great start!

Setting the CSS Font

CSS has a ton of properties, but no worries. Even guys like me that love CSS don’t use the majority of them. You will definitely possess a solid base of CSS knowledge after reading all of these tutorials that you can nurture and grow later to become a styling master. Common font related properties:

  • color – sets the font color
  • font-size – sets the font size
  • font-weight – sets the font weight (skinny to very bold)
  • text-align – sets the font position inside element (left, center, right, justify)
  • font-family – sets the actual font type
Example
<style type=”text/css”>
p.special_one {
color:#900;
font-size:2em;
font-weight:100;
text-align:center;
font-family:”Arial”, “Myriad Web Pro”, Arial, serif;
}
</style> 
<p class=”special_one”> Sample CSS Demo</p>
Result

Sample CSS Demo

Text Spacing

When I talk about text spacing, I am referring to characters in relation to other characters. The first important property is letter-spacing, which is the horizontal spacing between characters. The second and final is the line-height that is the vertical spacing between text lines.

Example
<style type=”text/css”>
p.special_two {
letter-spacing:.1em;
line-height:2em;
}
</style>
<p class=”special_two”>We will get to the idea of block spacing and margin spacing,
but for now we will only speak of them to have default text.</p>
Result

We will get to the idea of block spacing and margin spacing, but for now we will only speak of them to have default text.

Try using that style with a dark background. You will soon see why, and we will discuss this further in the Graphic Design tutorial. Basically, the extra white space between the lines helps your eyes read the text more easily. Of course, the letter-spacing property usually is not necessary to help with reading. Alright, we can clearly see that the letter-spacing is set to .1em. What the heck is an em? An em is a flexible measurement compared to its brother px (short for pixel). Generally, try to use em instead of px (again, we’ll go into why later). The second property line-height is set to 2em, which gives us a greater difference in the distance between lines. As I said, letter-spacing is not very commonly used, but line-height is and it can make all the difference.

References