Lecture #3

 

Web and user interface design

 

slides.com/jkohlin/web3/live

HTML

prep for Lab 1

Basic document structure

Learn it by heart

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    
</body>
</html>

semantic elements

for page structure

<header>
    <nav></nav>
</header>
<main>
    <article></article>
    <article></article>
</main>
<aside></aside>
<footer></footer>

Another grouping of elements:

BLOCK

INLINE

SEMANTIC

NON SEMANTIC

<h1>
<footer>
<p>
<em>
<strong>
<span>
<div>
<ul>
<li>
<q>
<article>
<b>
<i>
<a>
<abbr>
<hr>

Attributes

properties that describe the element

SPACE

  • attributes ALWAYS go in the opening tag
  • multiple attributes are separated with a space

Links

<a href="https://ju.se">Jönköping university</a>
<a href="about.html">About us</a>

Absolute URL

Relative URL

<a href="#article2">Article 2</a>

Document fragment

Document fragment links

linking to a position in the document

<nav>
  <ul>
    <li><a href="#article1">Article 1</a></li>
    <li><a href="#article2">Article 2</a></li>
    <li><a href="#article3">Article 3</a></li>
    <li><a href="#article4">Article 4</a></li>
    <li><a href="#article5">Article 5</a></li>
  </ul>
</nav>
<main>
  <article id="article1">Lorem ipsum...</article>
  <article id="article2">Dolor sit...</article>
  <article id="article3">Amet...</article>
</main>

Lists

  • Arbitrary lists of things
  • Linklists (menu)
  1. When the order matters
  2. Secondly
<ul>
  <li>Arbitrary lists</li>
  <li>Menus</li>
</ul>
<ol>
  <li>First of all</li>
  <li>Secondly</li>
</ol>

Validate your document

if it behaves unexpectedly

W3C: validator.w3.org

whatwg: html5.validator.nu

CSS

Making HTML look good

Separation of concerns

Cascading Style Sheets

–Water the plants

–Don't water the plants

–Bring black coffee

–Bring cappuccino

–Turn the heat up!

–Turn the heat down!

leave the thermostat and bring me an espresso

Cascading Style Sheets

<html>
  <body>
    <main>
      <h1>
        CSS
      </h1>
    </main>
  </body>
</html>

(cascading/trickle down metafor)

Cascading

<body>
  <p>The body</p>
    <nav>
      <p>The nav</p>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="about.html">About us</a></li>
        <li>What makes the links blue?</li>
      </ul>
    </nav>
</body>
body {
    font-family: Arial, Helvetica, sans-serif;
    color:black;
    font-weight: normal;
}
nav{
    color: red;
    font-weight: bold;
}
a{
    font-style:italic;
}

CSS syntax

For a CSS style rule

CSS syntax

For a CSS style rule

Basic Selectors

(a.k.a. element type selector)

ASTERISK SELECTOR 

* {}

(selects all elements)

Basic Selectors

<header>
  <img id="site-logo" src="logo.png">
  <p>
    Jönköping University
  </p>  
  <nav>
    <a class="menu-link">Home</a>
    <a class="menu-link">Products</a>
    <a class="menu-link">About us</a>
  </nav>
</header>

More on selectors in the book

Chapter 11:

Element type selector (p.243)

Grouped selectors (p.252)

Chapter 12:

Descendent selectors (p.281)

ID and class selectors (p.282–6)

Child, next-sibling, and following-sibling selectors (p.283)

Universal selector (*) (p.285)

Chapter 13:

Pseudo-class selectors (p.316)

Pseudo-element selectors (p.320)

Attribute selectors (p.323)

Adding CSS to a page

Three main positions: link-tag, style-tag, style-attribute

<head>
  <link rel="styleshet" href="style.css">
</head>
<head>
  <style>
    a {color: red;}
  </style>
</head>
<html>
  <p>
    Go to <a style="color: red;" href="products.html">our products</a>
  </p>  
</html>

Imported

Embedded

Inline

Web Typography

p{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28pt;
    font-weight: bold;
    font-style: italic;
    line-height: 1.2em;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-variant: small-caps;
    text-decoration: underline; /* line-through */
    text-align: left; /* center right justify */
    color: #000;
}

Units

Fonts

- Only fonts installed on client computer

- (Temporarily) Install web fonts 

Basic box properties

div {
    width: 400px;
    height:400px;
    background-color: aliceblue;
    padding-top: 12px;
    padding-right: 3px;
    padding-bottom: 6px;
    padding-left: 9px;
    /* padding: 12px 3px 6px 9px */
    margin-top: 12px;
    margin-right: 3px;
    margin-bottom: 6px;
    margin-left: 9px;
    /* margin: 12px 3px 6px 9px */
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    /* border: 1px solid grey */
  }

"The box model"

the sum of width + padding + border (+margin)

div {
  width:100px;
  height:50px;
  padding:20px;
  border: solid 10px #grey;
  margin:50px;
}

}

actual size: 160x110 px

To make width and height count

(padding and border grow inwards):

box-sizing: border-box

Color properties

 

CSS property description
color text color
background-color background color of boxes
border-color the color of a box's border
background-image image or color gradient

Color values

color: cyan;
color: rgb(50, 178, 237);
color: #32b2ed;

Color values

named colors

Borders

a lot of properties (30)

border

border-color

border-style

border-width

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

border-left

border-left-color

border-left-style

border-left-width

border-right

border-right-color

border-right-style

border-right-width

border-top

border-top-color

border-top-style

border-top-width

border-radius

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

Mainly

  • -style
  • -width
  • -color
  • -radius
  • -image

Borders

border-style

Borders

border-width

border-width:2px

Borders

border-color

border-color: firebrick;

Borders

border-radius

border-radius: 25%;
border-radius: 50%;

crazy border-radius generator

Selecting

with better precision

using combinators

Combination Selects
article p any p, anywhere, within an article
nav > ul all ul's direct descendant of a nav
h2 + p the p following directly after an h2
li ~ li all li following an li directly (all but the first li)
h1, h2, h3 all h1, all h2 and all h3
ul.menu ul's with a class set to menu

all descendants

nav a {color: #fff;}

hiding all pickles on this table:

table pickle {display:none}

direct descendants

li > a {color: #fff;}

hiding first three pickles on this table:

table > pickle {display:none}

first direct sibling

li + a {color: #fff;}

hiding second pickle on this table:

bento + pickle {display:none}

consecutive direct siblings

ul ~ li {color: #fff;}

hiding second and third pickle on this table:

bento ~ pickle {display:none}

list of selectors

h1, h2, h3, h4 {color: #fff;}

hiding oranges and plates on this table:

orange, plate {display:none}

list of selectors

a.menu-item {color: #fff;}

hiding the small pickles on this table:

pickle.small {display:none}

Importance - order

(who gets to be the boss)

!important

a{
	color: red !important;
	text-decoration: none !important;
}

Importance -specificity

(who gets to be the boss)

Till next time

+ page 80-81 Figures and figcaption

web3

By Johan Kohlin

web3

Basics of CSS

  • 1,310

More from Johan Kohlin