Welcome to Advanced GIS, Lecture 8

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced GIS

Class 8

Luis
Kazuha
Davis

CSS

HTML gives structure to web pages

CSS makes HTML look nice

CSS can really transform a page

CSS Zen Garden

remember CartoCSS?

(CartoCSS)

#bids {
    line-color: #ae8;
    line-width: 0.5;
    polygon-opacity: 1;
    polygon-fill: #ae8;
}

CSS

a {
    color: blue;
    font-size: 20px;
}
a {
    color: blue;
    font-size: 20px;
}

pick the a elements (links)

a {
    color: blue;
    font-size: 20px;
}

make the elements blue

a {
    color: blue;
    font-size: 20px;
}

make the font 20 pixels large

if we had HTML like this

<p>
    <a href="...">Link One</a>
</p>
<p>
    <a href="...">Link Two</a>
</p>
<a href="...">Link Three</a>

this

a {
    color: blue;
    font-size: 20px;
}

would affect:

<p>
    <a href="...">Link One</a>
</p>
<p>
    <a href="...">Link Two</a>
</p>
<a href="...">Link Three</a>
a {
    color: blue;
    font-size: 20px;
}

the selector

selectors...select elements

you can use any tag name in a selector

body {
    ...
}

style the body (the whole page)

p {
    ...
}

style all p elements (paragraphs)

selector {
    property: value;
    ...
}

properties are much like those in CartoCSS

properties affect the size, color, and position of elements

there are a bunch:

MDN CSS

but you'll probably only use a handful

font properties

...

color properties

box properties

...

where does CSS go?

in the head!

in the head, and in a style element

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <style>
        </style>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                font-size: 35px;
            }
        </style>
    </head>
    <body>
    </body>
</html>

workflow

workflow

(1) try out a change in developer tools, then copy and paste it to your file

workflow

(2) comment things out rather than delete them

workflow

(2) comment things out rather than delete them:

a {
    /* Trying out a new color */
    /*color: blue;*/
    color: rgb(88, 18, 209);
    ...
}

selectors can be more interesting than just tag names

you can refer to classes

<span class="legend-label">
    land use vacant
</span>
<span class="legend-label">
    land use vacant
</span>

(in your style element) you could say:

.legend-label {
    font-weight: bold;           
}

similarly with ids

<span id="vacant-land-use-label">
    land use vacant
</span>
<span id="vacant-land-use-label">
    land use vacant
</span>

(in your style element) you could say:

#vacant-land-use-label {
    font-weight: bold;           
}

you can combine these selectors to say more complicated things

<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>
<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>

what if we want to style a elements only if they are in elements of class legend-label?

<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>
a {
    ...
}

would style all links

<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>
.legend-label {
    ...
}

would style too much, too

solution: combine selectors

<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>
.legend-label a {
    ...
}
<span class="legend-label">
    land use vacant
    <a href="...">more info</a>
</span>
.legend-label a {
    ...
}

"style the a elements in elements with class legend-label"

it doesn't matter how far inside the a element is:

<span class="legend-label">
    land use vacant
    <div>
        <div>
            <div>
                <a href="...">more info</a>
            </div>
        </div>
    </div>
</span>

and you can combine more selectors if it makes sense

#legend .legend-label div .source a {
    ...
}

this can be a lot like giving directions

"class is in Manhattan"

"class is in room 204"

"class is in 66 5th Ave, floor 2, room 204"

the box model

source

the box model describes boxes, their spacing, and borders

source 
.cat-box {
    padding: 50px;
}
.cat-box {
    margin: 100px;
    padding: 50px;
}
.cat-box {
    border: 1px solid red;
    margin: 100px;
    padding: 50px;
}
catbox.html

you can also just do one side at a time

(use -left, -bottom, -right, -top)

.cat-box {
    margin: 100px;
    margin-left: 200px;
}

need to add styles to just one element?

<p>
    a special paragraph
</p>
<p style="font-size: 100px;">
    a special paragraph
</p>

these are called "inline styles"

you can do as many properties as you need

<p style="font-size: 100px; color: pink; margin-top: 50px;">
    a special paragraph
</p>

but as soon as you start copying these to other elements, make a class for it

order matters

order matters

the last style wins

order matters

so if your styles aren't working, make sure they come after other styles that might be affecting your elements

a {
    color: blue;
    font-size: 20px;
}
a {
    color: red;
}

specificity matters

not very specific:

div {
    ...
}

more specific:

.cat-box {
    ...
}

even more specific:

div .cat-box {
    ...
}

most specific:

<div style="..."></div>

specificity matters

so if your styles aren't working when you think they should be, make their selectors more specific

source
source

recap

selectors look like

p
.class
#id
#id span a

add CSS to your page in two ways

<head>
    <style>/* your CSS */</style>
</head>

<a style="/* your CSS */">...</a>

use your browser's developer tools

CartoDB legend example

map legend example

starter map legend

<ul class="legend-labels">
    <li>None</li>
    <li>< 1</li>
    <li>1 - 5</li>
    <li>5 - 10</li>
    <li>10 - 50</li>
    <li>50+</li>
</ul>
<ul class="legend-labels">
    <li>
        <span></span>
        None
    </li>
    <li>
        <span></span>
        < 1
    </li>
    ...
</ul>

Style the legend boxes:

.legend-labels span {
    display: inline-block;
    border: 1px solid black;
    width: 25px;
    height: 10px;
    margin-right: 5px;
}

this lets you set the width and height on elements that are not blocks (eg, <code>, <a>)

.legend-labels span {
    display: inline-block;
}

give each label a color

<ul class="legend-labels">
    <li>
        <span id="legend-label-0"></span>
        None
    </li>
    <li>
        <span id="legend-label-1"></span>
        < 1
    </li>
    ...
</ul>
#legend-label-0 {
    background: white;
}

#legend-label-1 {
    background: #FFFFE5;
}

...

remove bullets

.legend-labels {
    list-style: none;
    padding: 0;
}

CartoDB templates

CartoDB templates

some things aren't as easy as you'd think they would be

centering elements

making elements sit side-by-side

bootstrap

getbootstrap.com

bootstrap can make things like buttons and columns quick and easy

quick example using bootstrap