HTML & CSS

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 1

Outline
In this Chapter we will cover the following topics:
• The structure of an HTML page.
• Tags.
• ID and class.
• CSS selectors.
• Common CSS properties.
• Building layouts with HTML and CSS.
• Common tasks and idioms.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 2

The structure of an HTML page
• HTML documents are text files with two features:
1. HTML documents have an .html or .htm file extension.
2. HTML documents have tags.

HTML is based on SGML, and is distinct from XML. The HTML 5 specification
details the HTML parsing algorithm.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 3

The structure of an HTML page (2)

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 4

Two types of Elements
• Block level elements
• Can contain other block level elements as well as inline elements
• Causes a line break
• Typically used to build the page layout and structure
• Inline elements
• Can only contain text and other inline elements
• Does not cause a line break
• Formatted text, images, links etc.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 5

Elements of HTML
I. Block level elements: Elements used to create the page structure
• <div>: a general purpose block element
• <span>: a general purpose inline element
• <header>: a container for the page header
• <nav>: a container for navigation
• <section>: a major part of the content
• <aside>: a sidebar or other auxiliary content
• <footer>: the page footer

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 6

Tags (2)

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 7

Tags (3)
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: six levels of headings.
• <a>: an anchor, i.e. a link.
• <ul>, <ol>, <li>: for creating lists. Unordered List, Ordered List and List Item.
• <img>: for embedding images.
• <address>, <figure>, <time>, <article>, etc.

<address> Output
MindRoad AB<br> MindRoad AB
Teknikringen 1F,<br> Teknikringen 1F,
583 30, 583 30, Linköping
Linköping<br> Sweden
Sweden</address>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 8

ID and Class Attribute
• The different between ID and Class that the HTML element can only have one unique ID
that belongs to that single element, while a class name can be used by multiple elements.

I. ID Attribute
<style>
#company {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>

<h1 id="company">MindRoad</h1>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 9

ID and Class Attribute (2)
ii. Class Attribute
The class name can be used by CSS and JavaScript to perform certain tasks for elements
with specific class name.
<style>
.mindroad {
background-color: green;
color: white;
padding: 10px;
}
</style>

<h2 class="mindroad">Embedded System</h2>

<p>The development is often done in: C, Matlab, Simulink, FPGA.</p>

<h2 class="mindroad">Application</h2>
<p> The development is often done in: Java, C# or C++.</p>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 10

CSS
• Cascading Style Sheets (CSS) is a style sheet language used to produce different
presentation of a document written in a mark-up language.

• CSS is designed primarily to create rules that specify how the content of an element
should look like, and that including aspects such as the layout, color, font style, etc.

• The Advantages of CSS :

o Very powerful.
o Reuse of style rules makes pages load faster.
o Easy to maintain.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 11

CSS Selectors
From the name implies, CSS selectors are patterns used to select the elements or element that
you want to style. There are many different types of CSS selector {Universal, Child, Type, Class,
Descendant, etc.}, but we’ll go through some of them:
o Universal Selector: o Class Selector: Selects o ID Selector: Select
* { all elements that have the an element with the specified
padding: 0; given class attribute. id that has a value that
}
.intro { matches the one specified after
Select all elements and background-color: gray; the pound or hash symbol (#)
clear their padding. } #error {
background-color: red;
<h1>Welcome to MindRoad</h1> }
<div class="intro">
<div id=”error”>…</div>
<p>Embedded Linux System</p>
</div>
Output:
Embedded Linux System
Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 12
Writing CSS
• A CSS file consists of a set of rules. Each rule has one or several selectors, and a list of
properties.
h1 {
color: white;
text-align: center;
}
• There are many properties in CSS. Mastering CSS is mostly about having a good idea of
what properties there are, and how they are used.
• The primary way of loading a CSS file from HTML is through the link element
<link href=“layout.css" type="text/css" rel="stylesheet" /> .
• It’s also possible to write CSS directly in an HTML document in a style tag. This is useful
when starting out on a page, but generally grows unwieldy with time. It also prevents you
from reusing the same style in another document.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 13

Common CSS properties - Display
• One of the most important CSS properties is the display property, which controls the
layout behavior of the element.
• Here are some of the most common values:
• none - Hide the element from view. Useful for dynamic behavior, and for semantics.
• inline – Makes the element behave as an inline tag.
• block – The element will behave as a block level tag.
• inline-block – Will prevent the element from line breaking, while still allowing you to set certain CSS
properties that are without effect on inline elements, such as margin.
• flex – Create a flexbox container.
• grid – Create a grid container.

nav > a.nav-link {

display: inline-block;
}
Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 14
Common CSS properties - Dimensions and padding
• width – Set the width of the element
explicitly
• height – Set the height of the
element explicitly
• margin – The distance from a block
element to the neighbours of that
element
• padding – The distance from the
content of the element to the edges of
that element
h1 {
Only valid for block elements!
margin: 0 auto;
padding: 10px 20px 0 10px;
}

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 15

Common CSS properties - Dimensions and padding
• width – Set the width of the element
explicitly
• height – Set the height of the
element explicitly
• margin – The distance from a block
element to the neighbours of that
element
• padding – The distance from the
content of the element to the edges of
that element
h1 {
Only valid for block elements!
margin: 0 auto;
padding: 10px 20px 0 10px;
}

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 16

Common CSS properties – Text formatting
• There’s a master property called “font” which can combine many of the properties listed
below. I tend to prefer using the separate properties for clarity.
• There are many, many text formatting properties, but these are the most common:
• font-family – Which font to use.
• font-size – Set the font size in units of px or pt. Or em if you want to feel clever.
• color – For specifying text color.
• font-weight – Typically set to “bold” to create bold text, but some fonts support many weights.
• font-style – Set to “italic” for cursive text.
• text-decoration – Can be set to “underline” or “strikethrough”. Most commonly used to get rid of the
underline for links by setting it to “none”.
• line-height – Set height of a line, which can be set independently of font size.
• text-align – For centering, right aligning or justifying text using “center”, “right” and “justify”
respectively.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 17

Common CSS properties – Background
• As with ”font” there is also a property called “background” for setting many of these
properties at once. Again, we’ll avoid it for clarity.
• These are the most important background properties:
• background-color – Set the background color using a hex value or the rgba() function.
• background-image – Assign a background image to the element.
• background-position – Adjust the background position, either in relative terms or in absolute terms.
• background-sizing – Per default, there is no resizing of a background image. You may wish to change
this by making it fit the background within the element using the “contain” value, or you may want
the background to fill the element which can be achieved using “cover”.
• background-repeat – The default is to repeat the background both horizontally and vertically. You can
disable it using “no-repeat”, or constrain the direction using “repeat-x” or “repeat-y”.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 18

Common CSS properties – Border
• Borders are quite useful, and are commonly used.
nav {
border-bottom: 1px solid #000;
}
• Can be set for each side separately using “border-top”, “border-right”, “border-bottom”
and “border-left”, or for all sides at once using “border”.
• The parameter values control border width, border style and border color, respectively.
There are many styles, but you may want to try “dotted” and “dashed” in particular.
• The ”border-radius” property can be used to set the corner radius.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 19

Common CSS properties – Positioning
CSS includes a property called “position”. The setting of this property controls the behavior
of the positioning properties “top”, “left”, “bottom” and “right”.

• Normal Flow (position: static)

This is the default value. Elements render in order, as they appear in the document source,
so each block-level will be after each other. Position properties are ignored.
• Relative Positioning (position: relative)
The element is positioned relative to its normal position, which means moves the element
in relation to where it would have been in normal flow, for example:
div.relative-position {
position: relative;
left: 25px;
border: 5px solid #73AD20;
}

<div class="relative-position">MindRoad</div>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 20

Common CSS properties – Positioning
• Absolute Positioning (position: absolute)
The element is positioned based on the values of the position properties (“left”, “top”,
“bottom” and “right”) relative to the page origin, outside of normal document flow.
• Fixed Positioning (position: fixed)
Causes the element to “stick” to the page, independent of scrolling. For example, you use it to
fix the <footer> in the page.
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}

<div class="footer"> <p>Copyright &copy; MindRoad</p> </div>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 21

Building layouts with CSS
• Building a site layout using CSS has traditionally been rather tricky, and required a lot of
non-obvious techniques.
• The positioning properties on the previous slides is generally not enough, for a few
reasons:
• No way of centering an element on the page
• Columnar layouts works only in very limited cases
• The solution has been to use the ”float” property, which was originally intended for things
like making text flow around a column.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 22

Building layouts with CSS
Thankfully, those days are behind us. We now have two new powerful techniques:
• Flexbox
• Widely supported and ready for prime time
• Ideal for positioning along a single axis (horizontal or vertical)
• CSS Grid
• Seeing rapidly increasing support
• The long awaited holy grail of CSS positioning

In practice though:
Use a CSS framework, such as Bootstrap, or one of the lightweight alternatives.

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 23

Programmer’s guide to Esthetics
Quick tips for better layout:
• Typography
• Pick two or three fonts and use them according to a plan
• For instance, one font for headings, one for text and one for navigation
• Unless directed otherwise, use Google Fonts and pick a few from there
• Colors
• If you have a keen sense for aesthetics, pick a few colors per taste
• Otherwise, use a color scheme generator to pick a few colors that complement each other well
• Prefer light backgrounds
• Add a lot of space, then go back and double it
• Do use images, but do so in a well thought out manner. Consider CC or PD.
• Have a look at Subtle Patterns and consider adding texture to some of your layout
elements

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 24

Resources
• Be wary of W3schools, even though it is usually the first hit. A lot of the content is outdated and not
up to current best practice
• Do use the Mozilla Developer Network (MDN), which is typically also on the first page
• caniuse.com is a fantastic site for checking if a new feature has wide enough feature support

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 25

Forms
• Forms consist of one or more input elements within a form tag.
• The form tag has a method which is either GET or POST, and an action which is a target
page.
• The input element is a versatile tag which supports many types:
• button
• submit
• text
• email
• number
• checkbox
• radio
• file

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 26

Forms
• There are also a few other elements:
• button (typically clearer than using an input with type button)
• textarea
• select
• For each input element, you should have a label element. Labels will set focus on the
input element when clicked.
<label for=“username”>Username</label>
<input type=“text” id=“username” name=“username”>
• Checkboxes are used slightly different:
<label for=“subscribe-to-newsletter”><input type=“checkbox”
id=“subscribe-to-newsletter” name=“subscribe”> Subscribe to
newsletter</label>

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 27

Copyright © 2017 MindRoad. All Rights Reserved. www.mindroad.se 28