menu

ICC565

CSS

2.1 Intro to CSS

Contents

Overview

CSS, or cascading stylesheets, describes how HTML elements are to be displayed. With CSS you can control the aesthetics of your web page — colors, fonts, sizing, spacing, borders, etc. — by creating styles. With external CSS you can control the layout of multiple web pages all at once.

In this overview lecture you will learn:

  1. What CSS is
  2. The difference between HTML and CSS
  3. How external stylesheets will save you time
  4. Syntax and rules to follow

CSS Terminology

  1. Selectors: A selector represents the element that you have selected to modify. In this example, to add style to the <h1> element, you would use the h1 selector.
    2. 

h1{ 

}
  2. Properties: A CSS property names a characteristic of a CSS selector. In this example, to modify the background color of your website, you use the body CSS selector and change the background-color CSS property.
    3. 

h1{
    background-color:
}
  3. Values: A CSS value works the same way it does in HTML. The CSS value describes how you want to modify a particular CSS property. In this example, to modify the font size of an h1 element, you use the h1 selector. You can modify the font-size CSS property and assign a new value. 
    4. 

h1{
    background-color:orange;
}
  4. CSS Declaration: A declaration is a combination of a property and a value.

  5. CSS Style Rule: A rule is a complete statement, including the CSS selector, properties, and values. A style sheet is made up of one or more rules.

Creating a CSS File

Using your text editor, create a new file. Save it with the file extension “.css” in a sub-folder called “css” within your project folder (keep folder names lowercase and do not use spaces). Since it is technically possible for a website to have more than one CSS file, you should name your CSS file based on it's purpose. If it is the general CSS file, you may choose "general.css" or "styles.css."

You should add a rule to your file so you will know whether you have done this correctly (once through the entire process). I suggest changing the backround of the page since it will be most noticeable:



body{
    background-color:yellow;
}

In order for your style rules to be applied correctly, the HTML file needs to know where the style sheet is. Since an external style sheet is a separate text document, you will need to point the HTML file to the CSS file using the <link> element. The <link> element always goes inside the <head> element.



<head>
<meta charset="utf-8">
<title>Sample Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>

The rel attribute describes the relationship between the web page and the item that is being linked to it. In this case, it is a style sheet, and you’re telling the browser to use it in that manner.

The type attribute identifies the media (or MIME type) of the sheet, so the browser knows how to read it. The proper value should be “text/css” since CSS files are text.

The href attribute tells the browser where to look for the style sheet, and identifies the name of the file. Notice how there is a "css/" before the filename. This points it to the proper sub-folder. This question will help you remember how to link the file: “Where is the CSS file located, and what is it called?”