Intro to HTML and CSS basics

Development - Training - Consulting
500tech.com

HTML & CSS
The basics
Layout
Fundamentals
SASS ANIMATIONS

About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Weekends FE developer @ fashbash.co

Tim Berners-lee invents the
World wide web
1990

1994
HTML 2
CSS introduced
1996
world wide web
is created

1998
XHTML is introduced -
Microsoft does not adopt it
HTML 4
2000
CSS 2

2006
HTML 5
2009
XHTML is stopped

A markup language is a computer language that deﬁnes
the structure and presentation of raw text.
Markup languages work by surrounding raw text with
information the computer can interpret, "marking it up" to
be processed.

In HTML, the computer can interpret raw text that is
wrapped in HTML elements.
These elements are often nested inside one another, with
each containing information about the type and structure
of the information to be displayed in the browser.
<element> row text </element>

Hyper Text is text displayed on a computer or device that
provides access to other text through links, also known as
“hyperlinks.”

<html>
<head></head>
<body></body>
</html>
Tells the browser that the included text is HTML format

<html>
<head></head>
<body></body>
</html>
non-displaying information about the document,
like the TITLE and other descriptive tags

<html>
<head></head>
<body></body>
</html>
Deﬁnes the content of the document.

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
H1 - H6 Section heading
P Deﬁnes paragraphs in the document.
BR
Puts a single break in the middle of a
paragraph, list item, etc.
HR
Runs a horizontal line across the page (or
table cell)
DIV
Division - Deﬁnes a particular section of the
document. Used to spread document
attributes across a whole section.
SPAN
used to group inline-elements in a
document

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
IMG
Displays an 'inline' (embedded in the
document) image in the document.
Source (SRC="") gives the full or partial
URL of the image ﬁle to use.
ALT gives the alternative/caption text for
the image

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
UL
Unordered list. Bullet List. Items in the list
are LI elements.
Lists can be nested.
OL
Ordered list. Numberd (or lettered) list.
Items in the list are LI elements.
Lists can be nested.
LI
List item. An item in a bullet or numbered
list.
DL
Definition list. A list of terms with definitions
or entries with annotations.
DT
In an annotated list, the item or term being
annotated
DD
In an annotated list, the annotation or
definition

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
A href=“url”
Allows the user to retrieve the document at
the speciﬁed URL by clicking on the
contents of the element.

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
STRONG
Strong emphasis. Generally displays as
Bold.
EM Emphasis. Generally displays as Italic.
CITE Citation. Generally displays as Italic.
CODE
Computer Code. Usually displays in a ﬁxed
font.
B Bold
I Italic
U Underline

Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
<!- - - ->
Inserts a 'comment' which does not display
on the browser screen, but can be seen in
the ﬁle itself when viewing the source or
editing the HTML.

Form
elements
Input
Textarea
Button
Checkbox
Label
Form

Output
<form oninput=“x.value=parseInt(a.value)">
<input type="range" id="a" value="50"> 
<output name="x" for="a"></output> 
</form>

Semantic HTML - Semantics is the study of the
meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both
the browser and the developer.

Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of a
document written in a markup language.

CSS selector
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<h1>Hello HTML & CSS course</h1> 
</body> 
</html>

CSS selector
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<h1>Hello HTML & CSS course</h1> 
</body> 
</html>
h1 { 
color: red; 
font-size: 30px; 
}

selector { 
property: value; 
}

Common properties
width
height
padding
margin
border
border-radius
line-height
background
opacity
visibility
cursor
font
font-size
font-weight

* { 
color: blue; 
}
.title { 
font-size: 12px; 
}
#my-title { 
font-size: 30px; 
}

.classA .classB { 
color: red; 
}
.classA #my-id { 
font-size: 12px; 
}
.a .b .c .d{ 
font-size: 30px; 
}

h1 { 
color: red; 
}
Button:hover { 
background: blue; 
}
input[type=“password”]{ 
font-size: 30px; 
}
Target by element type

.classA + .classB { 
color: red; 
}
.classA ~ .classB { 
font-size: 30px; 
}
It will select only the element that is
immediately preceded by the former element.
#container > ul { 
color: red; 
}
direct children
It will select all the elements that match after classA

.classA:nth-child(3) { 
color: red; 
}
ul:nth-of-type(2) { 
font-size: 30px; 
}
.classB:nth-child(4n) { 
color: red; 
}

#my-id:first-child { 
color: red; 
}
#my-id:only-child { 
font-size: 30px; 
}
#my-id:last-child { 
color: red; 
}

Common web tools
https://www.cssmatic.com/box-shadow
http://www.colorzilla.com/gradient-editor/
https://www.cssmatic.com/border-radius

Length units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width,
margin, padding, font-size, border-width, etc.

cm Centimeters
mm Millimeters
in inches
px
pt 1pt = 1/72 of in
pc 1pc = 12pt
% Percentage
vh
1% of the height of
the viewport
vw
1% of the width of
the viewport
rem
relative to font size
of the root element
em
Relative to the font
size of the element

The meta tag
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page,
but will be machine parsable.

HTML5 introduced a method to let web designers take
control over the viewport, through the <meta> tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Layouting an HTML page is a lot like LEGO,
you start with the big blocks and build up
your page with smaller blocks of content.

All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when talking about
design and layout. The CSS box model is essentially a
box that wraps around every HTML element.

content-box (default) border-box
width
padding
border
margin
width
padding
border
margin
The box-sizing property

the display property
display is CSS's most important property for controlling
layout. Every element has a default display value
depending on what type of element it is.
The default for most elements is usually block or inline.

div is the standard block-level element. A block-level element starts on
a new line and stretches out to the left and right as far as it can.

span is the standard inline element. An inline
element can wrap some text inside a
paragraph <span> like this </span> without
disrupting the ﬂow of that paragraph. The a
element is the most common inline element,
since you use them for links.

Another common display value is none. It is commonly
used with JavaScript to hide and show elements without
really deleting and recreating them.

Positioning
The position property speciﬁes the type of
positioning method used for an element (static,
relative, ﬁxed, absolute or sticky).

Static - HTML elements are positioned static by default.
positioned according to the normal ﬂow of the page.

Relative - behaves the same as static unless
you add some extra properties
Top: 200px
Left: 100px

A ﬁxed element is positioned relative to the
viewport, which means it always stays in the
same place even if the page is scrolled.

Absolute is the trickiest position value.
absolute behaves like ﬁxed except
relative to the nearest positioned ancestor
relative

Stacking
The z-index property speciﬁes the stack order of an
element.
An element with greater stack order is always in
front of an element with a lower stack order.
Note: z-index only works on positioned elements

Float is a CSS positioning property.

Float's sister property is clear. An element that has the clear property set
on it will not move up adjacent to the float like the float desires, but will
move itself down past the float.
float: left float: right
not cleared

ﬂoat: left ﬂoat: right
cleared

the great collapse
If this parent element contained nothing but
floated elements, the height of it would literally
collapse to nothing.
float: left float: left float: left

The column layout system
http://www.responsivegridsystem.com/calculator/

col-3 col-3 col-3 col-3

col-3 col-3 col-3 col-3
col-12

Flex box
The Flexbox Layout (Flexible Box) module aims at providing
a more efﬁcient way to lay out, align and distribute space
among items in a container, even when their size is
unknown and/or dynamic (thus the word "ﬂex").

Properties for the parent
.container { 
display: flex; 
}
This defines a flex container; inline or block depending on the
given value. It enables a flex context for all its direct children.

.container { 
flex-direction: row | row-reverse | column | column-reverse; 
}

.container { 
flex-wrap: nowrap | wrap | wrap-reverse; 
}

justify-content
ﬂex-start
ﬂex-end
center
space-between
space-around
space-evenly

align-items
ﬂex-start
ﬂex-end
center
stretch
baseline

align-content
ﬂex-start ﬂex-end
center stretch
space-between space-around

Properties for the children
order
1 2 5

ﬂex-grow
1 2 1
*ﬂex-shrink

flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined

Align-self
ﬂex-start
ﬂex-end

Browser support
Browser vendors are working to stop using vendor preﬁxes for experimental features.

.my-class { 
-webkit-: chrome, safari, newer versions of opera 
-moz-: firefox
-o-: //old, pre-webkit, versions of opera
-ms-: //explorer and edge 
}

@supports (display: flex) { 
div { 
display: flex; 
} 
} 
 
@supports not (display: flex) { 
div { 
float: right; 
} 
}
https://caniuse.com/

plan small
avoid ﬁxed dimensions
grid system
media queries

.title { 
font-size: 40px; 
} 
 
@media only screen and (max-device-width: 360px) { 
/* rules for 0 - 360px dimensions */ 
.title { 
font-size: 16px; 
} 
}

.example { 
transition: [property] [duration] [timing-function] [delay]; 
}
.example { 
transition: background 300ms linear; //ease, ease-in, ease-out 
}

.element { 
animation: pulse 5s infinite; 
} 
 
@keyframes pulse { 
0% { 
background-color: #001F3F; 
} 
100% { 
background-color: #FF4136; 
} 
}

SASS
Syntactically Awesome Style Sheets

Nesting
ul li .title { 
font-size: 12px; 
} 
 
ul li .title:hover { 
color: blue; 
}

Nesting
ul { 
li { 
.title { 
font-size: 12px; 
 
&:hover { 
color: blue; 
} 
} 
} 
}
*The Sass Ampersand

Imports
/* HTTP request for each import */ 
@import "path-to-file"; 
@import url("");

Imports
@import "reset"; 
@import "button"; 
@import "dropdown";
Styles
_reset.scss
_button.scss
_dropdown.scss

Extend/Inheritance
.message { 
border: 1px solid #ccc; 
padding: 10px; 
color: #333; 
} 
 
.success { 
@extend .message; 
border-color: green; 
} 
 
.error { 
border-color: red; 
} 
 
.warning { 
border-color: yellow; 
}

Variables
$primary-color: #333; 
$secondary-color: #e0e0e0; 
 
body { 
color: $primary-color; 
 
&:hover { 
color: $secondary-color;  
} 
}

Operators
.container { width: 100%; } 
 
.button { 
float: left; 
width: 600px / 960px; 
} 
 
.dropdown { 
float: right; 
width: 300px / 960px * 100%; 
}

Mixins
@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
-ms-border-radius: $radius; 
border-radius: $radius; 
} 
 
.box {  
@include border-radius(10px);  
}

Functions
A function is very similar to a mixin, however the
output from a function is a single value. This can be
any Sass data type, including: numbers, strings,
colors, booleans, or lists.

Functions
@function remy($pxsize) { 
@return ($pxsize/16)+rem; 
} 
 
h1 { font-size: remy(32);} 
 
/* h1 { font-size: 2rem; } */

Loops
@for $i from 1 through 12 { 
 
.column-#{$i} { /**/ } 
 
} 
 
.column-1 {} 
/* ... */ 
.column-12 {}

Intro to HTML and CSS basics

Recommended

More Related Content

What's hot (20)

Similar to Intro to HTML and CSS basics (20)

More from Eliran Eliassy (10)

Recently uploaded (20)

Intro to HTML and CSS basics