Welcome to Advanced GIS, Lecture 6

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

→ to move forward

← to go back

Advanced GIS

Class 6

Gaurav
Ashley

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"

organize your GitHub Pages

when sharing code with me it's helpful to put it online

codepen.io
jsbin.com

neither of these is suitable for publishing a page, just for sharing snippets

CSS

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

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 605"

"class is in 6 E 16th St, floor 6, room 605"

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

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

...

in class exercises part 1

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

in class exercises part 2

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:

.cat-box {
    ...
}

even more specific:

div .cat-box {
    ...
}

most specific:

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

most specific:

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

(this is what you have to use in Carto)

specificity matters

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

source

in class exercises part 3

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

bootstrap

getbootstrap.com

bootstrap can make things like buttons and columns quick and easy

quick example using bootstrap

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

I encourage you to find templates and work from them

CartoDB templates
CartoDB templates
templated