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

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

<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,887

More from Johan Kohlin