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

Table of Contents