COMM 223 -
Introduction to Web Site Design and Construction

for accessibility guidelines, click here

CSS Guide for Beginners - Selectors

People avoid mixing HTML code and CSS by storing code in separate files (HTML files only contain HTML code, and CSS files only contain CSS code).

You can create a CSS file by using the .css file name extension, like this: style.css Like HTML, CSS is in plain text and can be edited in a variety of plain text editors such as NotePad on Windows or using a free third-party software such as TextWrangler on the Mac. (TextEdit is not easily usable for plain text.)

Linking the CSS File

Once you have HTML and CSS code in separate files, the files must be hooked together. Otherwise, the CSS styles on your HTML page won't work.

When linking an HTML file and a CSS file together, the <link> element will look like the following:

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

It must go in the <Head> section of your HTML file and it has the following three attributes:

href — names the CSS file and the path to it, if needed.

type — The value of this attribute should be set to text/css.

rel — this is the relationship between the HTML file and the CSS file. Since you are linking to a stylesheet, the rel should be set to stylesheet.

 

A few basic CSS Commands to style a page

body {
	background: #F3D8D8;
	margin: 10em;
 	width: 70%;
} 

A few basic CSS Commands to style text

h3 {
   color: green;
	font-family: Arial, Helvetica, sans-serif;
font-size: 14px; }

Two curly braces follow right after the selector (an opening and closing brace). Any CSS properties will go inside of the curly braces to style the selected elements.

Making hyperlinks a different color

Links on your page can be any color you like. You can also have the roll-over line invisible until you roll over the link. Here is the code for the four states. Remember, they will apply to all links on your page (and in your site!) unless you make exceptions. Note that the underline function has been 'grayed out'. Remove the */ pair to activeate it.

a:link {
color: #08888A;
}
a:visited {
color: #08888A;
}
a:hover {
color: #963334;
/*text-decoration: underline;*/
}
a:active {
color: #08888A;
}

Tag Name

CSS can select HTML elements by targeting an element's tag name. A tag name is the word (or character) between HTML angle brackets.

For example, in HTML, the tag for a bunch of text or a paragraph element is

<p>

The CSS syntax for selecting

<p>

elements is:

p {
}

 

Class Name

HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the class attribute. It's also possible to select an element by its class attribute.

For example, consider the following HTML:

<p class="shop">Nigel's Shoe Company</p>

The paragraph element in the example above has a class attribute within the <p> tag. The class attribute is set to "shop". To select this element using CSS, we would use the following CSS selector:

.shop {
}

To select an HTML element by its class using CSS, a period (.) must be added to the class's name. In the example above case, the class is brand, so the CSS selector for it is .brand.

Multiple Classes

You can combine multiple classes together in a single line. Say you have these two classes:

.green {
      color: blue;
      }
.bold {
      font-weight: bold;
      }

You can put them together in one element for h1 like this:

<h1 class="green bold">Text here</h1>

We can add multiple classes to an HTML element's class attribute by separating them with a space.

ID Name

ID is a designation that can only be used on one item on a page, unlike Class. This allows you to uniquiely style an element, but again, it can only be used once on a page. You add an ID Name to an element to a selector, just like you do a Class attibrute. Like this:

<h1 id="big-and-blue">Text here</h1> 

When you used a Class ID Name, you put a period in front of it in the CSS file. To do the same with an ID Name, you use a hashtag, like this:

#big-and-blue { 
    color: blue;
    size: 64px;
}

Id names trump class names, class names trump tag names.

 

Adding Images

Images are best handled as "blocks" so you can control their position on the page. Add this to your CSS.

img {
      display: block;
}
    
    

For boxes

This is the Box Model. All of these areas exist on every item in your HTML page - pictures, text, paragraphs, etc. Adjustment to the size of the areas is made directly within each box's CSS. Width and height refer to the box named "content" in the image above. You always need to take into account the total size of each area to know how much space is really being taken up.

.boxName (h2, .image1, etc.) {
	width: 100px; 
	height: 20px; 
	padding: 1px;
	border: 1px;
	margin: 1px;
}

Modify margins and padding with these parameters (substitute the word padding for the word margin in the following examples for padding parameters):

	  margin: 10px 20px 15px 10px; /*Top, right, bottom and left sides.*/
      margin: 10px 20px 15px; /*Top, both sides, bottom.*/
      margin: 10px 20px; /*Top and bottom, right and left.*/
      margin: 10px; /*All sides.*/

 

CREATE A VERTICAL MENU WITH CSS

1. Put the following code in your CSS file.

ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
      }
	  
li a {
      display: block;
      width: 8em;
      line-height: 2em;
      font-size: 1em;
      text-decoration: none;
      background:  #D5973C;
      color: white;
      padding: .2em 0 .2em 1em;
      margin-bottom: .2em;
      }
    

2. Then put an unordered list in your HTML file like below. (Use your own links and names.)

<ul>
<li><a href="dogs.html">Dogs</a></li>
<li><a href="cats.html">Cats</a></li>
<li><a href="fish.html">Fish</a></li>
<li><a href="insects.html">Insects</a></li>
</ul>

Font Stacks

Not every computer has every font installed. When you specify a non-resident font that is not on the user's machine, it will default to Times, unless you tell it otherwise. The way to tell it otherwise is to use a Font Stack. A font stack is a list of fonts to use in case the first font in the list is unavailable. It looks like this:

font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 

This tells the computer to use Arial, if that's not available, use Helvetica Neue, if that's not available, use Helvetica, if not that, any sans-serif font. This maintains your control over layout, to an extent.

Find Font Stacks already made (as well as the likelyhood that a PC or Mac has it available, here: https://www.cssfontstack.com

Using Adobe Web Fonts

If a font is not on an end-users computer it will default to Times, unless you use a Font Stack (see previous section). But, using Adobe Web Fonts allows you to choose from over 500 fonts that will quickly download to a users computer to work in your design.

1. Go to EdgeWebFonts.adobe.com

2. Select the font you want to use. Then hover over that font and choose the "Select this font" link.

3. Copy the script element that is provided.Paste it into the <head> section of any web page that will use the font.

4. Copy the font-family CSS that's provided into your CCS sheet in it's element. Like this.

h1 {    
font-family: source-sans-pro, sans-serif;    
}

In this example, the h1 tag will now display with the source-sans-pro font.

Creating Responsive Design

Here are the basic code snippets that create "break points" in your CSS. Feel free to copy this into the CSS for your responsive site.

/*Mobile View*/ @media (min-width: 350px){ 

 /*Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here. 
Put your mobile CSS here.*/ 
}
/*==========Begin Tablet section here================*/ 

/*Tablet View*/ @media (min-width: 768px){ 

/*Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here. 
Put your tablet CSS here.*/ 

} 
/*Make sure not to delete this closing brace.
It works with the opening media query for this section*/ 

/*==========Begin desktop section here================*/ 

/*Desktop View*/ @media (min-width: 1024px){ 

/*Put your desktop CSS here. 
Put your desktop CSS here. 
Put your desktop CSS here. 
Put your desktop CSS here. 
Put your desktop CSS here. 
Put your desktop CSS here. 
Put your desktop CSS here.*/ 

} 
/*Make sure not to delete this closing brace.  
It works with the opening media query for this section*/

How to center a row of photos

Center a row of pictures on your page like this:

HTML

<div class = "trees">
	<img class = "tree1"src="images/tree1.jpeg">      
	<img class = "tree2"src="images/tree2.jpeg">      
	<img class = "tree3"src="images/tree3.jpeg">  
</div> 

CSS

.trees {     
	width: 900px; /*Or whatever width makes sense*/     
	display: block;     
	margin: auto; 
}

You don't need the tree1, tree2 etc. classes, that's just for individual styling of images as needed. For instance, tree1 needed a clear: both; command to start a new row. You MUST specify a width for the centering to happen in the .trees selector.