Day 4 Home

All About CSS

CSS stands for Cascading Style Sheet. If HTML is the skeleton of your webpage, defining structure, CSS is the skin. It describes the visual style of a page. The syntax of the language is different from HTML and there are a number of different ways to use it. You can link to an external CSS file, you can write CSS in the head of your page, or you can write CSS as an attribute of an element.

Ways of using CSS: Selectors

CSS can be used to style a page in four different ways.

  1. Element selector: You can apply a style to every element of a paricular type. For example, you can have the text in every paragraph tag be colored purple:
  2.                 p{
                    color:purple;
                }
                
  3. Class: You can apply visual style to a specific html elements by adding the class attribute. You may call your class by any name, as an example, you can write class attributes like this: class="moving". Classes allow you to target specific elements and modify them. This is often used with the div element for layout purposes.
  4. ID : You can also apply visual style to a specific html elements by adding the I D attribute. I Ds give you the ability to change style and content using Javascript. I Ds are useful for adressing specific elements with unique I D s and therefore, you should only use an I D once.
  5. Pseudo class : you can apply a style to elements when an action happens. For example, when you select a link, you can italicize the text.

Syntax

When writing CSS in a separate file, or including in the head of your page, there's a specific way the code is formatted. Examples for element, class and ID selectors follow.

Element selector

h1 {
font-style : italic ;
color : blue ;
}

Class selector

.information {
font-face : san-serif ;
background-color : aliceblue ;
}
    

ID selector

#update {
border-style : dashed ;
border-width : thin ;
}

Design tips