📱 🖥 🌐

Class 02 — 15.11.2016, 9am

Anatomy of a CSS Rule

A single CSS rule consists of three parts:
— Selectors
Selectors are used to declare which element you want to give a style to, in this case the <h1> element. When you the select the element you don’t need to use the angle brackets < >.

— Declaration block
The declaration block for the element you have selected opens with a curly bracket { and ends with a curly bracket }. You define the properties and values of your element inside this block.

— Declarations; property and value
Each declaration has a property and a value. The property is the style (colour, typeface, position, font size etc.) that you want to change. After the property you give the value or values.

You can define as many properties and values as you want inside one declaration block. There must be a semicolon after each declaration.


h1 {
  color: red;
  font-size: 50px;
  text-decoration: underline;
}

Selected Elements

A declaration applies to all elements of that kind in your web page.Now try adding a new declaration for the <p> element. You will see that all of the <p> elements change.

p {
  font-family: serif;
  color: blue;
}

Cascade

CSS declarations cascade. Imagine a river and waterfall. You drop in some blue paint at the source of the river. The river will run blue all the way to the end of the waterfall. However, if you add some yellow paint further down, the river will now turn yellow.

CSS works the same way. The declarations start from the top of the file and are overwritten (or inherited) as you go down the file. If you declare that text in

elements should be blue at the top of your CSS, and then further down redeclare that it will be yellow, the last declaration will be used. Try this:

p {
  font-family: sans serif;
  color: blue;
}

p {
  color: yellow;
}

Inheritance

Certain properties are inherited by nested (child) elements. Let’s add a nested element in your index.html file. Add a <strong> element inside one of your paragraphs. You will see that the content of the <strong> is now also yellow:

<p><strong>Description</strong>The src part of an image...</p>

Let’s make it black again. Add this underneath your p declaration:

strong {
  color: #000;
}

Classes and Ids

We can target and give styles to specific elements by using classes and ids. A class allows us to target a group (or class) of multiple different elements. An id allows us to target one single unique element. Let’s add a class that will make text green. First we add the class to the elements. Add this after the p of the paragraph opening tag that tells us where you are from, and after the h1 in the heading opening tag with your name:

<h1 class="green-text">Luke Archer</h1>
<p class="green-text">I am from York></p>

In your CSS file, you do the same as you would to declare properties for an element, except class names must be preceded by a peroid. You will see that for both elements with this class, the text is green.

.green-text {
  color: green;
}

Now let’s add an id to the h1 element, like so:

<h1 id="uppercase" class="green-text">Luke Archer</h1>

And at the bottom of your CSS file add the id name preceded by an #:

#uppercase {
  text-transform: uppercase;
}

Exercise: Colour Composition 1

When designing for the screen, limitations of colour are significantly less than with print. There are 1,114 Pantone spot colours, where as we can choose from 16,777,216 hexadecimal colours with CSS. With such freedom, it is becomes even more important to be conscious of how colour is chosen for digital projects. For this exercise you will be creating digital interpretations from work in an important book on colour; “Interaction of Color” by Josef Albers. I will give an introduction to positioning elements with CSS, and you will then use what you have learnt to make your own HTML/CSS colour compositions.

Resources

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors http://www.colorpicker.com

Div Elements

The <div> element (or document division element) is the generic container for content, which does not inherently represent anything. Divs can be used to contain blocks of content, or they can be used as building blocks themselves.

Step 1

Now we will use <div> elements and CSS positioning and colour properties to make one of Albers’ examples of the subtraction of colour.

Let’s make a new folder with new HTML document. We’ll call it color.html. Set it up as an empty page with no content and add an empty <div> element with the id of “colour-1”.

<!DOCTYPE html>
<html>
  <head>
    <title>Subtraction 01</title>
    <link rel="stylesheet" href="color1.css" type="text/css" />
  </head>
  <body>
    <div id="colour-1"></div>
  </body>
</html>

Step 2

Now let’s try to manipulate the div. Make a new file called color1.css. First of all we need to set some basic properties. We will set the html and body elements (which contain everything else) to be 100% of the height and width of the browser window, and also remove any default margin and paddings (which would appear as white space around our page):

html, body {
  width: 100%;
  height: 100%
  margin: 0;
  padding: 0;
}

Let’s declare some properties for the <div> element with the id “colour-1”.

— position: absolute
This sets this element to be absolutely positioned in relation to its parent (or nearest ancestor, the element which it is inside of, in this case the body).

— top: 0
This sets the element to be 0px below the top edge of its nearest positioned ancestor

— left: 0
This sets the element to be 0px from the left edge of its nearest positioned ancestor

— width: 50%, height: 50%
This sets the element to be 50% of the height and width of its nearest positioned ancestor

#colour-1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 50%;
  background-color: blue;
}

Step 3

Now try manipulating the position and size of the div by changing the width, height, top and left values (values can either be in px or %).


Step 4

Underneath the first div, add a second div to your page with the id “colour-2”.

<div id="colour-2"></div>

Add a CSS rule for this id:

#colour-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background-color: red;
}

Step 5

Now we will add two more divs, as children of our existing divs:

<div id="colour-1">
  <div id="colour-3"></div>
</div>
 
<div id="colour-2">
  <div id="colour-4"></div>
</div>

And some CSS rules:

#color-block-3 {
  position: absolute;
  top:50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

#colour-4 {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100px;
  height: 100px;
  background-color: blue;
}

Finally we will add two more divs at the bottom of our page:

<div id="colour-5"></div>
<div id="colour-6"></div>

With the CSS rules:

#colour-5 {
  position: absolute;
  bottom: 20px;
  width: 50%;
  left: 25%;
  height: 20px;
  background-color: red;
}

#colour-6 {
  position: absolute;
  bottom: 40px;
  width: 50%;
  left: 25%;
  height: 20px;
  background-color: blue;
}

Step 6

You should have something that looks like this. Now try manipulating the position and size of your divs.


Step 7

The last step is too change the colours of your divs so they reflect those of Albers’ example. Use a colour picker to select the colours in an image editing software. You should have a grey, a mauve, and two browns. The browns are different, but appear similar when they are placed on backgrounds of solid colours, because the colour lightness and hue of the background colour is subtracted from them.


Assignment

1. You have to re-create the exercises from pages 3,4,5 of this PDF using CSS and HTML. Make 3 versions with your own colours from each of these pages. Remember, to goal is have two colours that appear similar when on different backgrounds, but in reality are different. This happens because the “lightness” and hue of background colour is optically subtracted from the colour the smaller square. Try to make versions where the two inner colours are as different as possible, yet appear as close as possible.

2. Using what you have learnt, try and make a version of page 9 from the PDF. That is, five rectangles on top of each other on the left, and rive rectangles on top of each other on the right. First of all copy it exactly. Note, on the left black is added in equal amounts by 1, 2, 3, 4 parts and on the right it is added by 1, 2, 4, 8 parts.

3. Now make a version using one of Google’s “500” colours from the style page: https://www.google.com/design/spec/style/color.html#color-color-palette

4. Make your own version with two different colours (left and right), of your choice.

Note, no copy and pasting, write of your code yourself. This will help you to understand that semantics of HTML and CSS, and the importance of formatting your code.


Once you have done this, finish "Learn HTML & CSS: Part I" on codecademy.com.

Schedule

01 — 2.11.2016, 9am
02 — 15.11.2016, 9am
03 — 6.12.2016, 9am

04 — 20.12.2016, 9am

05 — 10.01.2017, 9am

06 — 24.01.2017, 9am

07 — 7.02.2017, 9am

Presentations — 14.02.2017