CSS Notes

Linking CSS

CSS in a Page

HTML4

<html>
  <head>
    <style type='text/css'>
	...
    </style>
  </head>
  <body>
   ...

CSS in a linked file

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>
   ...

HTML5

<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>
</html>

Selectors

Multiple Selections

tagType1, tagType2, tagType3 {
  ...  
}

html, body, h1, h2 {
  ...  
}

Descendent Selector

Selecting a tag that has a relationship with a parent tag.

parentTag childTag {
...
}

ul li {
 font-size:24px;
}

Pseudo Selector

A modifier that can be added to a selector to select a tag only when a certain condition has occured.

tagName:PseudoSelectorState {
 ...
}

a:hover {
 text-decoration: underline;
 color: darkred;	
}

ol li:first-child {
 color: red;
}

Class Selector

In the html mark a tag as follows…

<ul class="nav">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

In the css, use the following selector syntax

.nav a {
  color : #000000;
  text-decoration : none;
}

The above says ‘find all a tags that are children of any tag with a class of “nav”, and set the color to blue and turn off the underline.’

Attribute Selectors

input[type=submit]{
  width: 120px;
  font-size: 30px;
}

Ordering of Selectors

The order of selectors matters. First declare the broadest rules with type selectors, and then get more specific with class selectors. The broader rules cascade down into the specific rules.

Boxes

Two types of boxing…

Block level tags take up the entire width of their container - push tags to the next line.
Inline level tags don’t take up the entire.

tagName {
  display: inline;
}

You can change a box level tag to be an inline level tag by doing the above.

Border Radius

.box {
    border-radius: 50%
}

Box Shadow

box-shadow:

.box {
    box-shadow: 1px 2px 2px #000;
}

You can also specify multiple box shadows… for example…

.box {
    box-shadow:
        1px 1px 2px #000,
        inset 1px 1px 2px blue;
}

Text Shadow

applies the shadow to text

text-shadow:

h1 {
     text-shadow: 1px 2px #000;
}

Box Sizing

Change the default css box model

Three values:

Content box (default value)
Padding box
Border box

.box {
    box-sizing: padding-box;  
    border: 2px solid black;  
    margin: 20px;  
    padding: 10px;
    width: 300px;
}

The above box would work out to width including the padding, calculated width is 304px.

.box {
    box-sizing: border-box;
    border: 2px solid black;  
    margin: 20px;  
    padding: 10px;
    width: 300px;
}

The above box would work out to total width of 300px.  

Box Model

The box model is a way to describe the borders and spacing of a box.

The content
Padding - used to control the size of the box without adjusting the size of the content inside.
Border
Margin - used to control space between two boxes.

Resetting Defaults for Boxes

html, body, h1, h2, h3, p, ol, ul, li, a {
   padding : 0;  
   border : 0;  
   margin : 0;  
}

Centering Block Level Tags

Fixed width

margin-left:auto; 
margin-right:auto;

Centering content inside a block level tag

text-align : center;

Images

3 different types of images :

Content Images, just as necessary as the content
Layout Images, appear in the background, not necessary to understand the content
User Interface Images, help users understand navigation

Content Images

<img src="cake.png" alt="description of conent of image">

Centering images - change as block level element and use margin:auto to center

Layout Images

Added in CSS

body {
  background-image : url(images/gobbler.png};  
  background-position : top left;  
  background-repeat : repeat;  
  }

Background Images

backgrounds are stacked in the order your specify them

.element {
    background: 
        url(bg1.png) top left no-repeat,
        url(bg2.png) center right no-repeat;
}

Colors

Can specify in various formats including

RGBa (0, 0, 0, 0.75)
HSLA (240, 100%, 50%, 0.75)

HSLA is generally more intuitive than RGBa, and it’s much easier to make color adjustments on the fly.

Opacity

You canspecify the opacity of any element.
Opacity on an element affects all the elements that are nested inside it.

.element {
    opacity : 0.45;
}

Gradients

two main types of gradients
1. Linear gradients (starting point, ending point, optional color stops)
2. Radial gradients (center, ending shape contour and position, color stops)

Linear gradient example…

.element {
    background : linear-gradient(to bottom, red, yellow);
}

Radial gradient example…

.element {
    background : radial-gradient(circle at top left, aqua, blue);
}

Fonts

Translate

.element {
    transform: translateX(20px);
}

Rotate

.element {
    transform: scale(1.2);
}

.element2 {
    transform: scaleX(1.2);
    transform: scaleY(1.2);
}

Skew

.element {
    transform: skewX(25deg);
}

Transitions

.element {
    background-color: black;
    transition: background-color 0.2s ease-in-out;
}

.element:hover {
    background-color: blue;
}

Fluid

Formula for determining em’s is…

target / context =  result

For instance, assume you have a sidebar of 305px in a site of 940px, what is the resulting ratio?

305px / 940px = 0.32446809

.sidebar {
    float: left;
    text-align: center;
    width: 32.446809%; /* 305px / 940px */
}

Useful Flexible Math Calculator

References

HTML5 Doctor
HTML5 Boilerplate
CodePen
Mozilla Developer Network
Can I Use?
HTML5 And The Document Outlining Algorithm
The New Bulletproof @Font-Face Syntax
HTML5 Outliner
HTML5 Outliner Chrome Extension
Datalist Experiment
Box-Shadow Demonstration
transition-timing-function - MDN
Autoprefixer
Dash
JavaScript Regular Expressions - MDN
Art Gallery Blog Source

Journey into Mobile References

Responsive Web
Adaptive Web Design
Responsive.is
The Personal Disquiet of Mark Boulton
Future Friendly Resources
LukeW Ideation + Design
Media Queries
Viewport Meta Tag
Front-end Formations
CSS Cross-Country
Example website: The Lost World

19 March 2015