Welcome to Advanced GIS, Lecture 5

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

→ to move forward

← to go back

Advanced GIS

Class 5

Moja
Jason

final project proposals are due next week

how I will look at your project:

does it use techniques we talked about in class?

does it work?

is it substantial?

is it legible and well designed?

you will set a milestone due April 1

what does HTML do?

what is the <a> tag for?

what will this look like?

<ul>
    <li>something</li>
    <li>something else</li>
    <li>oh and another thing</li>
</ul>
<ul>
    <li>something</li>
    <li>something else</li>
    <li>oh and another thing</li>
</ul>

target="_blank"

source
source 

<a href="https://www.airbnb.com/rooms/{{id}}" 
    target="_blank">{{name}}</a>

CSS

CSS makes HTML look nice

CSS Zen Garden

What you need to know about CSS:

1. What it looks like

1. What it looks like

(syntax)

2. Where it goes

2. Where it goes

(usually a .css file)

3. How to style specific elements

3. How to style specific elements

(selecting and adding styles)

1. Syntax

2. Where CSS goes

3. Selectors

1. Syntax

CartoCSS

#layer {
    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 a .css file

then load it in the head

<link rel="stylesheet" href="/style.css" />

then load it in the head

<link rel="stylesheet" href="/style.css" />

glitch sets this up for you

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
    </body>
</html>

in-class exercise, part 1

3. Selectors

interneting is hard

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>
interneting is hard 
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

...

the box model

source
source
source

you can also just do one side at a time

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

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

<div>s (and others) are block elements

source

they take up all the width on the screen and push everything after them down

source

<span>s (and others) are inline elements

source

they flow horizontally and do not take up all of the width on the screen

source

in-class exercise, part 2

developer tools is your friend!

selectors aren't always just tag names

what if you only want to refer to certain elements on the page?

you can refer to classes

a class is something you create to make styling work better

first you edit your HTML:

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

then you can refer to the class in your CSS:

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

(in the CSS):

.legend-label {
    font-weight: bold;           
}
interneting is hard

we call this a class selector

interneting is hard

you can add multiple classes to an element

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

put spaces between the class names

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

this means class names cannot have spaces in them

in-class exercise, part 3

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 class="source">
                <a href="...">more info</a>
            </div>
        </div>
    </div>
</span>

and you can combine more selectors if it makes sense

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

this can be like writing an address

"class is in Manhattan"

"class is in room 602"

"class is in Manhattan, 6 E 16th St, room 602"

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

in-class exercise, part 4

order matters

order matters

as with CartoCSS, the last style wins

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

specificity matters

not very specific:

div {
    ...
}

more specific:

.main-content {
    ...
}

even more specific:

div .main-content {
    ...
}

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>

you'll need to use inline styles in Carto

in-class exercise, part 5

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

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

centering elements

making elements sit side-by-side

source
source

both of these use a CSS feature called flexbox

source
source
source
source

media queries

source

media queries are a common way to make pages "responsive"

source 
@media (max-width: 600px) {
    body {
        margin: 0;
        padding: 0;
    }

    .column-right h2 {
        display: none;
    }
}

please get in touch when you're having issues with specific things in CSS!

if you can, include a sketch of what you're trying to accomplish

you don't have to write all of this from scratch

I encourage you to find templates and work from them

templated
html5up