11/8/2017 - 3:31 PM


Beginner's guide to learning CSS

CSS: Cascading Style Sheets

  • Used for styling and formatting your html page
  • Sheets are cascading because the sheets can apply formatting when more than one style applies.
  • Linking a CSS file to your html file: include a link tag:
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

CSS Syntax

selector {
  property: value;

/* Ex */
p {
  color: red;
  • A selector can be any HTML element such as <p>, <img>, <table>
  • A property can be font-size, font-color, font-family...
  • A value corresponds to the property and can be red (for colors) or any type of fonts (for font family)
  • Always end each statement with a semi-colon!!
  • You can set many properties within a selector, just remember to separate them with the semicolon!
  • You can provide a list of values incase browsers do not recognize the value you set (can lead to page not behaving properly)
p {
  font-family: Tahoma, Verdana, sans-serif;

Making colored blocks from divs

You'll need to set 3 properties:

  1. background-color
  2. height
  3. width
div {
    background-color: red;
    height: 100px;
    width: 100px;
  • Links are underlined by default! To remove the underline from a link:
a {
    text-decoration: none;
  • You can set the size of an image using height and width properties:
img {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
  • Drawing your own buttons (using a div)
div {
    /* Creates a box*/
    height: 50px;
    width: 120px;
    border-color: grey;
    background-color: blue;
    /* Creates a rounder box*/
    border-radius: 5px;
    /* Positioning your button*/
    margin: auto; /* Tells the browser to add equal margins on the LEFT & RIGHT sides of the HTML element 
                    = object is centered*/
    text-align: center; /* Centers the text within the element*/ 

div div p {

How to reach a child element:

  • The outermost div is the parent, and the next div is a child of the 1st div

  • The p element is a child of the inner div

  • A shortcut to this approach is to use the '>' operator, which targets direct children without having to go through those other parent elements.

  • Universal style: that will apply styles to all elements on the page:

* {


ul li p /* is more specific than */
 /* Meaning that when a p tag is nesed inside the ul li, that style will be applied to the element rather
    than a style for just p elements = override

    Classes and ID ARE MORE SPECIFIC than nested selectors!
    . = class (used to style mutiple elements that should be styled together)
    # = ID (used for when you want only 1 element to receive a certain style)

<div id="hi" >
    <p class="hello"></p>

#hi {

.hello {

Descendent Selectors

  • Denoed by the spacings between elements
#nav li {
} /* Will select all li element's that is nested under an element with an id of nav */

Child Selector (>)

  • Selects the immediate child (and no others!)
#list > li {
  color: black;

Compound Selectors

  • Given a comma separated list will apply the styles to all the elments listed!
h1, h2, #box {
 /* apply styles */

Pseudo_class Selectors

  • Pseudo-class selectors: are a way of accessing HTML items that aren't part of the document tree (where would you find info about whether a link is being hovered over or whether a link is being clicked


selector:pseudo-class_selector {
    property: value;

/* For links, there are a few pseudo class selectors for links
    a:link (an unvisited link)
    a:visted (a visited link)
    a:hover (a link that is being hovered over)

First Child Selector

  • Applies to elements who are first child to their parent element
    <p>1st child</p>
    <p>Not first child </p>

p:first-child {
    font-family: cursive;

/* nth-child selector*/
p:nth-child(2) { /*selects the 2nd child */
    color: green;

Attribute Selector

img[alt=""] {
  border =...


  • Elements populate the page in whats known as the box model: Each HTML element is like a tiny box or container that holds pictures or text you specify
  • BY DEFAULT, each element takes up the space all the way across the page (so no other elements can sit next to it unless you modify their position property)
  • Position property can be changed by modifying the DISPLAY property!
  • The four types of display property are defined below:
  1. block: makes the element a block box, it won't let anything sit next to it. It will take up the full width.
  2. inline-block: makes the element a block but allows other elements to sit next to it on the same line.
  3. inline: males elements sit next to each other on the same line, but without formatting it like a block. Only takes up as much width as it needs (not the whole line)
  4. none: makes the element and its content disappear from the page

How do each box behave?

  • The space around an element. The larger the margin, the more space between our elements and the elements around it.
  • Is the edge of the element, the feature that is set when using the border property.
  • Is the spacing between the content and the border. Can be adjusted with CSS to move the border closer to or farther away from the content.
  • Is the actual stuff in the box.
  • For a <p> element, it is the text of the p element.