Scribd
Upload
32 views

HTML and CSS Presentation

The document provides an overview of HTML and CSS including key elements, tags, and concepts. It covers the basics of HTML markup, elements like headings, paragraphs, lists and links. It also covers CSS syntax, selectors, common properties and units. Layout fundamentals and techniques like the box model are explained. Examples and exercises are included to demonstrate concepts.

Uploaded by

TAIWO
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

HTML and CSS Presentation

The document provides an overview of HTML and CSS including key elements, tags, and concepts. It covers the basics of HTML markup, elements like headings, paragraphs, lists and links. It also covers CSS syntax, selectors, common properties and units. Layout fundamentals and techniques like the box model are explained. Examples and exercises are included to demonstrate concepts.

Uploaded by

TAIWO
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 123

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!

You might also like