HTML & CSS
Course
HTML & CSS Layout
The basics Fundamentals
HTML
Hyper Tex Markup Language
t
A markup language is a computer language that defines 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>
<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>
Defines the content of the document.
Body Image Style
elements elements elements
List Anchor Other
elements elements elements
Body Image
elements elements
List Anchor
elements elements
Style Other
elements elements
H1 - H6 Section heading
Body Image
elements elements
P Defines paragraphs in the document.
Puts a single break in the middle of a
BR
paragraph, list item, etc.
List Anchor
elements elements
Runs a horizontal line across the page (or
HR
table cell)
Division - Defines a particular section of the
Style Other
elements elements
DIV document. Used to spread document attributes
across a whole section.
used to group inline-elements in a
SPAN
document
Body Image
elements elements
Displays an 'inline' (embedded in the
document) image in the document.
List Anchor
elements elements Source (SRC="") gives the full or partial
IMG
URL of the image file to use.
ALT gives the alternative/caption text for
the image
Style Other
elements elements
Unordered list. Bullet List. Items in the list
UL are LI elements.
Lists can be nested.
Body Image Ordered list. Numberd (or lettered) list.
elements elements
OL Items in the list are LI elements.
Lists can be nested.
List item. An item in a bullet or numbered
LI
list.
List Anchor
elements elements
Definition list. A list of terms with definitions
DL or entries with annotations.
Style Other In an annotated list, the item or term being
DT
elements elements annotated
In an annotated list, the annotation or
DD
definition
Body Image
elements elements
List Anchor
elements elements
Allows the user to retrieve the document at the
A specified URL by clicking on the contents of
href=“url” the element.
Style Other
elements elements
Strong emphasis. Generally displays as
STRONG
Bold.
Body Image
elements elements
EM Emphasis. Generally displays as Italic.
CITE Citation. Generally displays as Italic.
List Anchor
Computer Code. Usually displays in a fixed
elements elements CODE
font.
B Bold
Style Other
elements elements
I Italic
U Underline
Body Image
elements elements
List Anchor Inserts a 'comment' which does not display on
elements elements <!- - - -> the browser screen, but can be seen in the file
itself when viewing the source or editing the
HTML.
Style Other
elements elements
Form
Input
Textarea
Form
elements
Button
Checkbox
Label
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.
<header /> <main /> <footer />
<article /> <details /> <aside />
<div /> <span />
<header /> <main /> <footer />
<article /> <details /> <aside />
<div /> <span />
CSS
Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation of a document
written in a markup language.
Inline External
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> h1 {
<html lang="en"> color: red;
<head> font-size: 30px;
<meta charset="UTF-8"> }
<title>Title</title>
</head>
<body>
<h1>Hello HTML & CSS course</h1>
</body>
</html>
selector {
property: value;
}
width
Common properties height
padding
margin border
border-radius
line-height
background
opacity
visibility
cursor
font
font-size
font-weight
EXCERCISE - 4
classes and id’s
Selectors to memorize
* {
color: blue;
}
.title {
font-size: 12px;
}
#my-title {
font-size: 30px;
}
EXCERCISE
.classA .classB {
color: red;
}
.classA #my-id
{ font-size:
12px;
}
.a .b .c .d{
font-size: 30px;
}
Target by element type
h1 {
color: red;
}
Button:hover
{ background:
blue;
}
input[type=“password”]{
font-size: 30px;
}
EXCERCISE
It will select only the element that is immediately
preceded by the former element.
.classA + .classB {
color: red;
}
direct children
#container > ul {
color: red;
}
It will select all the elements that
match after classA
.classA ~ .classB
{ font-size:
30px;
}
EXCERCISE
.classA:nth-child(3) {
color: red;
}
.classB:nth-child(4n) {
color: red;
}
ul:nth-of-type(2)
{ font-size:
30px;
}
#my-id:first-child {
color: red;
}
#my-id:last-child {
color: red;
}
#my-id:only-child
{ font-size:
30px;
}
EXCERCISE
Common web tools
https://www.cssmatic.com/box-shadow
http://www.colorzilla.com/gradient-editor/
https://www.cssmatic.com/border-radius
EXCERCISE
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 % Percentage
mm Millimeters 1% of the height of
vh
the viewport
in inches
1% of the width of
vw
the viewport
px
relative to font size
rem
pt 1pt = 1/72 of in of the root element
Relative to the font
pc 1pc = 12pt em
size of the element
EXCERCISE
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">
Layout Fundamentals
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.
Shay Keinan
LIVE DEMO - INSTAGRAM PAGE
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.
Margin
Border
Padding
Content
The box-sizing property
content-box (default) border-box
margin margin
border border
padding padding
width width
Centering content
EXCERCISE
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 flow 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 specifies the type of
positioning method used for an element (static,
relative, fixed, absolute or sticky).
Static - HTML elements are positioned static by default.
positioned according to the normal flow of the page.
Relative - behaves the same as static unless you
add some extra properties
Top: 200px
Left: 100px
A fixed 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 fixed except relative to
the nearest positioned ancestor
relative
EXCERCISE
Stacking
The z-index property specifies 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
EXCERCISE
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
float: left float: 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/
The column layout system
http://www.responsivegridsystem.com/calculator/
col-3 col-3 col-3 col-3
The column layout system
http://www.responsivegridsystem.com/calculator/
col-3 col-3 col-3 col-3
col-12
EXCERCISE
Flex box
The Flexbox Layout (Flexible Box) module aims at providing a
more efficient 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 "flex").
Container
item item item
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
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
flex-end
flex-start
center
stretch
baseline
flex-start flex-end
align-content
center stretch
space-between space-around
Properties for the children
order
1 2 5
flex-basis: <length>
200px
flex-grow
1 2 1
*flex-shrink
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined
Align-self
flex-start
flex-end
http://flexboxfroggy.com/
Browser support
Browser vendors are working to stop using vendor prefixes 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/
responsive design
plan small
avoid fixed 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;
}
}
Animations
.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% {
backgr
ou
nd
-
co
lo
r:
#F
EXCERCISE
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
Styles
_reset.scss
_button.scss
_dropdown.scss
@import "reset";
@import "button";
@import "dropdown";
Extend/Inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
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 {}
THANK YOU!
