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 Zen Garden

What you need to know about CSS:

1. It looks a lot like CartoCSS

2. It usually goes in the head of your document

3. How to select elements and style them

1. Like CartoCSS

2. Where CSS goes

3. Selectors

1. 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

2. Where CSS goes

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>

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>

3. Selectors

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;
    ...
}

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"

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

...

the box model

source
source
catbox.html

you can also just do one side at a time

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

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

order matters

order matters

the last style wins

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

in class activities:

bit.ly/advgis-8-inclass

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);
    ...
}

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