CSS

Cascading Style Sheets

aka making your HTML pretty

Created by Alicia Sykes / @lissy_sykes
Presentation built with reveal.js by Hakim El Hattab

What is CSS?

CSS stands for cascading stylesheets, it is a language used for describing the look and formatting of a document written in HTML.

Example
CSS Code:
p.myText{
	color: blue;
	text-deccoration: underline;
}
HTML Code:

Hello, I am now blue underlined text!

Introduction to selectors

What are CSS Selectors?

CSS selectors are patterns used to select which elements you want to style


Down arrow

Applying the same styles to multiple elements

One of the factors that makes CSS so good, is that you can apply the same styles/ formatting to multiple elements.

This of course means writig less, and loading less at run time, not to mention much more maintainable code.

Example of reusing CSS style sets

CSS Code:
.importantText{
	color: red;
	font-weight: bold;
	}
HTML Code:

I'm a title, the styles in the .importantText class have been applied to me

Hello, I am some important text, that's why I am red and bold

The Element Selector

You can easily select all elements of a certain element (such as div,span or h3)

This CSS will make all h4 elements size 18px and center alligned
h4{
  font-size: 18px;
  text-allign: center;
}
This will target all div elements with the class='squareBox' 
and will apply an equal height and width of 20 em and a 1px black border
div.squareBox{ width: 20em; height: 20em; border: 1px solid black; }

CSS Comments

Often you want to supllly a bit of extra information about a set of styles, such as what the purpose of it is, where it's used etc.. This can make your stylesheet more maintainable in the future and easier to understand for other developers.

Comments are ignored by the browser

The syntax for a comment/* This is a comment */
Example:
.boldText{
  font-weight:bold; /* This makes the text bold - who'd have guessed */
  } 

Structure of CSS styles

Each set of CSS styles is layd out in the same structure, with the following parts

  • A selector
  • Open curley brace to surround styles {
  • New line for each style
  • Style name (e.g. background) followed by colon (:) followed by value (e.g. red) followed by semicolon(;)

Example

These example should illustrate the structure of CSS style sets

div.wrapper{
  margin: 10px;
  padding: 5px;
  border: 1px solid grey;
}
.titleText{
	font-size: 20px;
	text-align: center;
	color: orange;
	}
.smallText{ font-size: 10px; }

Using Colors in HTML and CSS

If we denoted colors by just 'red', 'blue', 'green'... we'd soon run out of colors, also these colors are not clearly defined, we often need to specify very particular colors and shades. There are several ways we do this.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors
  • Predefined/Cross-browser color names

Hex

Hexadecimal color or hex, is the most comon way to specify color values it's supported in all browsers.

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF.

.redText   { color: #ff0000;}   /* red */
.greenText { color: #00ff00;}   /* green */
.blueText  { color: #0000ff;}   /* blue */

Developers usually use a color picker to choose the perfect color, it's quicker. For example http://html-color-codes.info/

RGB and RGBA

RGB also is supported in all majour browsers. It is similar in the way that you have 3 values red, green and blue. Each can be between 0 and 225. RGBA also has a 4th value, alpha which is transparancy and is between 0 ant 10.

.redBackground  { background-color: rgb(255, 0, 0); } /* no alpha */
.greenBackground{ background-color: rgba(0, 255, 0, 0.8); }
.blueBackgeound { background-color: rgba(0, 0, 255, 0.3); } 

Which attributes can you assing color to?

Here are just a few places you can use color on your pages, we'll look at more of these later on

.myVeryColorfullElement{
  background:    #FF00D5;    /* element background */
  color:         #8900FF;    /* text color */
  border-color:  #3300FF;    /* color of border */
  outline-color: #008DFF;    /* color of outline */
  text-deccoration-color: #00FFF3; /* underline color */
  box-shadow: 7px 7px 3px #00FF26; /* color shadow for objects */
  text-shadow:    2px 3px #CDFF00; /* color text shadow */
}

Further CSS Selectors

Earlier we only touched on selectors, a lot more can be done when combining selectors.

Examples

Spaces DO matter
 /* Makes all p elements text color blue*/p{ color: #3300FF; }

 /* Makes all elements with class="myClass" text color green*/.myClass{ color: #008DFF; }

 /* Makes all div elements with the class="myClass" text color pink*/div.myClass{ color: #FF00D5; }

 /* Makes all elements with class="myClass" inside a div text col purple*/div .myClass{ color: #8900FF; }

Multiple selectors

You can use multiple selectors on a style set very easily, just seperate them with a comma

 /* Makes all p and h1 and h2 elements text color blue */p, h1, h2{ color: #3300FF; }

 /* Makes all p elements only h2 elements that have the class="normalText" color orange*/p, h2.normalText{ color: #FF8000; }

 /* Makes all h3 elements AND all span text INSIDE a div element that has a class="cow" black and white */h3, div .cow{ color: #FFFFFF; background: #000000;  }

The ID selector

The id selector works in much the same way as the class selector with 2 differences

  • Instead of the selector begining with a "." for class, it should begin with a "#" for id
  • Because the id attribute in valid HTML must be unique to each element, classes with the id selector can only be used onece, they are not reuable. For this reason it is somethimes considered bad practice to use this selector at all in some style guides.
CSS code#i-am-unique{ color: pink; }
HTML code

Hello World!

The all selector

This selects all elements
It doesn't have much use on it's own, but can be combined with other slectors
The all selecor [selects all]* { color: green; }

CSS Box Model

All HTML elements can be considered as boxes in terms of the CSS box model, which is essentially a box that wraps content. The diagram below best illustrates this.

css box model diagram

CSS Units

Used to set the sizes of text and components on a web page.
Sizes in CSS can be absolute or relative.

CSS Units

In CSS there are different units used to express lengh and size. When you specify a size, you give a number followed by it's units. For example "width: 10px;" or "height: 2em;"
There must be no white space between the number and it's units.
The only number that doesn't need a unit, and shouldn't have one is zero 0.
For some CSS properties negetive sizes are allowed. (e.g. margin-left: -10px; will actuall pull the object left 10px rather than push it out)

Px

Pixels (px) are the easiest to use unit, they are fixed, and each pixel is equal to one pixel on the users screen. They come with the big disadvantage of not being very responsive and hence are not a good chice if you'd like your web page to respond perfectly to the users screen size

Percentage %

Percentage works by using the partent container as a 100%, so if your html body is 100%, and you create a div inside it to fill 40% it will fill 40% of the body and hence the screen. These can allow you to build responsive websites, but can be tricky to work with if your just starting out.

Remember, the % unit fills a percentage of the parent element not necciasrily the screen

em

em is another responsive unit, and generally a lot easier to use the % It is releteve to the font size of the element, and that is usually relevant to the default font size of the device too.

Formatting Text with CSS

Text Formating

Text colorp{color: #00FF00; }
Text allignmentp{ text-align: right; }
Text underline / overline/ strikethough p{ text-decoration: overline; }
Text transformation (ippercase, lowercase, capitalize) p{ text-transformation: capitalize; }
Text indentation (size in any unit accepted) p{ text-indention: 40px; }

Fonts

Font family (ie font)p{ font-family: "Times New Roman", Times, serif; }
Font style (italic, oblique, normal)p{ font-style: italic; }
Font size (number with unit px/em/%...) p{ font-size: 30px; }
Font weight (in number 100-500 or text) p{ font-weight: bold; }
Font varient (such as caps) p{ font-varient: small-caps; }

Advanced Selectors

There is so much more you can do with selectors, you can use them to target very specific parts of your web page and combine them for further better results.

Down arrow

[attribute] Selector

This selector selects all elements with the matching attribute

Makes all links to this tutorial site color reda[href="http://web-dev.as93.net"] { color: red; }
Selects all input elements of type textinput[type="text"] { padding: 3px; }
Selects all a elements that are a sub-page of as93.net a[href^="http://as93.net"] { color: red; }

More Selectors

SelectorExampleDescription
elementp p Selects all p
element,element div, p Selects all div elements and all p elements
element element div p Selects all p elements inside div elements
element>element div > p Selects all p elements where the parent is a div element
element+element div + p Selects all p elements that are placed immediately after div elements
element1~element2 p ~ ul Selects every ul element that are preceded by a p element

CSS Gradients

background-image: linear-gradient(red, orange);
Colorzilla tool for creating gradients

Float Propert of CSS

div{float:left;}

Pseudo Class Selectors

Pseudo class selectors are used to define a special state of an element


They can be split into 5 main categories

  • Link related
  • Input related
  • Position related
  • Text related

How to make a HTML5 + CSS3 Navigation bar for your website

Pretty much all modern web apps and sites have a navigation bar at the top, because this is what users are used to and it makes finding pages very quick and easy.

THE END