CSS

Background

  • CSS stands for Cascading Style Sheets.
  • Defines the style of HTML
  • The "adjectives" of a webpage

General Rule

selector {
  property: value;
  anotherProperty: value;
}

Where can we write our styles?

Inline

CSS can be placed inline with a tag (Not recommended)

<h3 style="color:pink">blah blah blah</h3>

The <Style> Tag

CSS Can be placed in the <style></style> tags (Not recommended)

<head>
  <title>This is the title</title>
  <style>
    h3 {
      color: pink
    }
  </style>
</head>

Separate File

Write our CSS in a separate .CSS file using the <link> tag (Recommended)

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

CSS Comments

h1{
    color:red;
    /* This is a comment*/
}

Color in CSS

Built-in Colors

h1 {
  color:red;
}

Hexadecimal (number system)

# + String of 6 hexadecimal numbers (from 0-F)

h1 {
  color:#FF0000;
}

RGB

3 channels: Red, Green and Blue. Each range from 0 - 255

h1 {
  color:rgb(255,0,0);
}

RGBA

Just like RGB, but with an alpha (tranparency) channel. Range from 0.0 - 1.0

h1 {
  color:rgba(255,0,0,1);
}

Color and Background

Use color to set text color and background for background color

Background Image

The background property can also set a background image

body {
  background:url(http://xxx.com/pic.jpg);
}

CSS Selectors

Element Selector

Select all instances of a given element

<div>
  <p>You say yes</p>
</div>
div {
  background:purple;
}

ID Selector $#$

Select an element with an given ID. Only one per page!

<div>
  <p id="special">You say yes</p>
</div>
#special {
   background:purple;
 }

Class Selector .

Select all elements with a given Class

<div>
  <p class="highlight">You say yes</p>
</div>

<div>
  <p class="highlight">paragraph two</p>
</div>
.highlight {
  background:yellow;
}

Grouping Selector

h1, h2, h3{
    color:blue;
}

div span will match all <span> elements that are inside a <div> element.

div span {

}

The Box Model

"In a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the standard box model. Each box has four edges: the margin edge, border edge, padding edge, and content edge." (MDN)

CSS_Box_Model

The box-sizing CSS property defines how the user agent should calculate the total width and height of an element. Click [here] for MDN reference on box-sizing.

border-box tells the browser to account for any border and padding in the values you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.

Common Properties

Properties
color font-family
background-color font-size
background-image font-weight (boldness)
background-position font-style
background overflow
margin display
padding list-style
text-align height
float min-height (vh)
border-color width
border-width line-height
border-style text decoration
border opacity (0 to 1)

Tip & Tricks

  • To center elements: margin: auto;
  • To change background color, better use background-color, not background
  • Add space between elements: padding: 10px;
  • Get rid of default underline in <a>: text-decoration: none;
  • Selector button: to change text color, use color
  • To make a rounded border: border-radius: 10px; To make a circle: border-radius: 50%;
  • To clear bullet point in <li> or <ul>: list-style: none;
  • To clear compatibility among browsers: Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Example

PurrfectMatch