Use this tutorial as a guide to learn HTML5 and CSS3. Each unit contains an annotated lesson that can assist you in developing your Web Development skills.
<!-- HTML5 -->
<!-- HTML5 is the definition used to refer to the latest version of HTML -->
<!--
Features:
* New HTML elements and attributes
* CSS3 support
* Video and audio elements
* 2D and 3D graphics
* Local storage
* Local SQL database
-->
<!-- In HTML5, there is only one simple DOCTYPE, it has the following syntax -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- In HTML5, you can specify the encoding by simply adding the charset attribute -->
<meta charset="UTF-8">
<!-- You don't need to specify the type attribute anymore (for <script> and <link>) -->
<!-- A modern browser will infer that the file is javascript or css -->
<script src=""></script>
<link rel="stylesheet" href="css/overview.css"/>
<title>HTML/CSS: Overview</title>
</head>
<body>
<h1>HTML5: Overview</h1>
<h1>Tag Updates</h1>
<!-- Tag Updates -->
<!-- <i> tag represents text in a different "tone", like a thought -->
<p>This <i>text</i> has the i tag </p>
<!-- <b> tag represents stylistically offset text -->
<p>This <b>text</b> has the b tag </p>
<!-- <em> tag represents "stress" emphasis -->
<p>This <em>text</em> has the em tag </p>
<!-- <strong> tag represents strong importance -->
<p>This <strong>text</strong> has the strong tag </p>
<!-- HTML5 Elements -->
<!-- Section -->
<!-- Represents a generic document or application section -->
<!-- Section vs Div -->
<!--
- Div elements have no semantic meaning whereas Section elements do
- Section is used for grouping together thematically related content
-->
<section>
<h2>Section Tag</h2>
</section>
<!-- The Document Outline -->
<!-- It produces an outline summary of an HTML document based on its markup -->
<!-- The following elements have their own self-contained outline -->
<!--
- Article
- Aside
- Nav
- Section
-->
<!-- For example: -->
<h1>Tile
<section>
<h2>Sub Title</h2>
</section>
</h1>
<!--
Will produce the following output:
1. Title
1.1 Subtitle
-->
<!-- Header -->
<!-- A group of introductory or navigational aids -->
<!--
- There can be many different headers on a page
- Generally, it appears at the top of a document or section, but it is defined by its content rather than its position
-->
<header>
Header
</header>
<!-- Footer -->
<!-- The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element -->
<!--
- The footer element is not position-dependent
- The footer describes the content it is contained within
-->
<footer>
Footer
</footer>
<!-- Aside -->
<!--
- Tangentially related to the content surrounding it
- When used within an article element, the aside contents should be related to that particular article
it is contained within
- When used outside an article element, the aside contents should be specifically related to the site (sidebar)
- It represents content that is not the primary focus of an article or page,
but it is still related to the article or page
-->
<aside>
Aside
</aside>
<!-- Nav -->
<!--
- The nav element represents a section of a page that links to other pages or to parts within the page:
a section with navigation links
- The nav element is intended for major navigation
-->
<nav>
<ul>
Nav
</ul>
</nav>
<!-- Article -->
<!--
- The article element represents a complete, or self-contained, composition in a document, page, application, or site
and that is, in principle, independently distributable or reusable
- The article element is another type of section. It is used for self-contained related content
-->
<article>
Article
</article>
<!-- Main -->
<!--
- Represents the main content of the body of a document or application
- The main content area consists of content that is directly related to or expands upon the central topic of a document
or central functionality of an application.
Warnings
- Do not include more than one main element in a document
- Do not include the main element inside of an article, aside, footer, header, or nav element
-->
<main>
Main
</main>
<!-- Figure -->
<!--
- The figure element represents a unit of content, optionally with a caption, that is self-contained
- If removed, it doesn't affect the document's meaning
-->
<!-- Figcaption -->
<!--
- Represents a caption or legend for a figure
-->
<figure>
<img src="" alt="figure"/>
<figcaption>Fig caption</figcaption>
</figure>
<!-- Time -->
<!--
- Represents a time on a 24 hour clock or a precise date in the gregorian calendar
-->
<time>2015-19-15</time>
<!-- Use the datetime attribute to get our desired format -->
<time datetime="2015-19-16">2015/19/15</time>
/* CSS3: Styles */
.border-radius{
background: grey;
height: 50px;
width: 200px;
}
/* Border Radius */
/*
- This property applies rounded corners to borders
- To achieve this, you can specify 4 different properties which represent each corner
*/
.border-radius{
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* You can use the shorthand version to specify all sides at once */
.border-radius {
border-radius: 15px;
}
/* You can specify each border-radius value individually */
.border-radius {
border-radius: 15px 15px 15px 15px;
/* top-left top-right bottom-right bottom-left */
}
/* You can also specify the border-radius value in percentages */
.border-radius {
border-radius: 8%;
}
/* Box Shadow */
/*
- This property specifies a shadow on an element
*/
.box-shadow{
box-shadow: 1px 2px 2px #000;
/* Box shadow properties
- Inset: If it is not specified(which is the default), a drop shadow is created, rather than an inset shadow
- Offset-x: Move the shadow along the x-axis
- Offset-y: Move the shadow along the y-axis
- Blur-radius: Alters the blur amount of the shadow, causing it to become bigger and lighter
- Spread-radius: Causes the shadow to expand or shrink
- Color: Color of the shadow
*/
/* If you want to specify the spread-radius instead of blur-radius, you need to add a 0 */
box-shadow: 1px 2px 0 2px #000;
}
/* You can specify multiple box-shadows via a comma-separated list */
.box-shadow{
box-shadow: 1px 2px 2px #000,
inset 1px 1px 2px blue;
}
/* You can also specify negative values on the box-shadow */
.box-shadow{
box-shadow: -1px -2px 2px #000;
}
/* Text Shadow */
/*
- This property is very similar to box-shadow, but it applies the shadow to text
*/
.text-shadow{
text-shadow: 1px 2px 2px #000;
/* Text shadow properties
- Offset-x: Move the shadow along the x-axis
- Offset-y: Move the shadow along the y-axis
- Blur-radius: Alters the blur amount of the shadow, causing it to become bigger and lighter
- Color: Color of the shadow
*/
}
/* Box sizing */
/*
- This property is used to change the default CSS box model,
which is used to calculate widths and heights of given elements
*/
/*
- Note: The Box Model is covered in HTML/CSS: Basics course
*/
.box-sizing{
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px; /* Represents the contents of the box */
}
/* Content-box */
/*
- This is the default value. The width and height are measured by including only the content,
but not the border, margin, or padding.
*/
/* Padding-box */
/*
- The width and height include the padding, but do not include the border or margin
*/
.box-sizing{
/* The padding has been included in the width (content) area,so they are treated as one region*/
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px; /* Represents the contents of the box */
}
/* Border-box */
/*
- The width and height include the padding and border, but do not include the margin
*/
.box-sizing{
/* The padding and the border has been included in the width(content) area, so they are treated as one region*/
box-sizing: border-box;
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px; /* Represents the contents of the box */
}
/* Multiple backgrounds */
/*
- CSS3 allows you to apply multiple backgrounds to an element.
- The multiple backgrounds are stacked in the order in which you specify them
- You can then specify the background position for each element
*/
.multiple-backgrounds {
background-image: url(../img/js.jpg), url(../img/html.jpg);
background-position: top left, center right;
background-repeat: no-repeat, no-repeat;
}
/* These properties can be specified in one line as well */
.multiple-backgrounds {
background: url(../img/js.jpg), url(../img/html.jpg) no-repeat, no-repeat top left, center right;
}
/* Color */
/*
- CSS3 provides multiple ways to work with color
* RGBa:
- Represents the three additive primary colors, red, green, and blue.
- In CSS3, we can also pass the alpha value (the "a" in RGBa) which represents the opacity of a color
* HSLa:
- Stands for Hue, Saturation and Lightness
- You can specify the alpha value for the opacity of the color
*/
.RGBa{
color: rgba(0,0,0,0.75); /* We are specifying a 75% opaque black color value */
}
.HSLa{
color: hsla(240,100% ,50%,0.75);
/* The parameters have the following order:
- Hue
- Saturation
- Lightness
- Alpha value
*/
}
/* HSLa vs RGBa */
/*
- HSLa is more intuitive than RGBa, and it's much easier to make color adjustments fast
*/
/* Opacity */
/*
- Allows you to specify the opacity of an element using the opacity property
- Opacity on an element affects all elements that are nested inside
*/
.opacity{
/* Represents a 45% opaque color value */
opacity: 0.45;
}
/* Gradients */
/*
- Smooth transitions between two or more colors
*/
/* Linear Gradients */
/*
- We need to specify the stating point, then ending point, and optional stop-color points.
*/
.linear-gradient{
/* The parameters are the following:
- Direction: This can be specified through an angle or a keyword
- The angle is generally a degree (34deg)
- The side-or-corner consists of two keywords (left or right) and (top or bottom)
- Color Stops: Consists of a color and optional stop position, which can be either a percentage or length
*/
background: linear-gradient(to bottom, red, yellow);
}
/* Radial Gradients */
/*
- Unlike a linear gradient, creates a gradient that extends from an origin, the center of the element, extending
outward in a circular or elliptical shape
- Consists of three parts: center, the ending shape contour and position, and color stops
*/
.radial-gradient{
/* Creates a two-color elliptical gradient that radiates from the center by default */
background: radial-gradient(aqua,blue);
/*
Parameters (in order):
- The shape of the gradient;circle or ellipsis. The default is ellipsis.
- The size of the gradient, which consist of keywords
(closest-side, closest-corner, farthest-side and farthest-corner*). *default
- Position (same as background-position). Default is center
- Color stops
*/
background: radial-gradient(circle at top left, aqua, blue);
}
/* CSS3: Animations */
/* Transforms */
/*
- This property allows you to translate, rotate, scale, and skew elements in CSS
*/
/* Translate */
/*
- The translate() method moves an element from its current position
(according to the parameters given for the X-axis and the Y-axis).
*/
.transform{
/* Translate the element 20px to the right */
/* Translate the element 30px down */
transform: translate(20px, 30px);
/* Translate parameters*/
/*
- A translation value for the x-axis, which can be either a length or a percentage
- A translation value for the y-axis, which can be either a length or a percentage, if not specified,the value is 0
*/
}
/* It is possible to use translateX and translateY to translate the x and y values individually */
.transform {
transform: translateX(30px);
}
.transform {
transform: translateY(40px);
}
/* Rotate */
/*
- It is possible to rotate an element clockwise around its origin by the specified angle
*/
.rotate {
transform: rotate(45deg);
}
/* Scale */
/*
- You can do a 2D scale by a specified unitless number
*/
.scale {
/* The element is scaled to the unitless number: 4 */
/* If you don't specify a value for y-axis, it defaults to the value of x-axis */
transform: scale(4, 1);
}
/* Skew */
/*
- An element is skewed around the x or y axis by the angle specified
- You can use skewX and skewY that use an angle as its parameters
*/
.skew{
transform: skewX(-25deg);
transform: skewY(25deg);
}
/* Transitions */
/*
- Allow you to transition between two states of a specified element
*/
.transition{
/* Parameters (in order):
- Property: The CSS property you want to transition
- Duration: The amount of time you want the transition to take place
- Timing function: Timing of the transition itself (ease, ease-in, ease-in-out, linear, etc)
- Delay: The amount of time to wait between the change that is being requested on a specific property,
and the start of the transition
*/
/* The background-color transitions from grey to crimson over the period of .5s*/
transition: background-color 0.5s ease-in-out;
}
.transition:hover{
background-color: crimson;
}
.transition:hover{
color: navajowhite;
}
/* Using 'all' as the transition-property, we can transition multiple properties at once */
.transition{
transition: all 0.5s ease-in-out;
}
/* Progressive Enhancement */
/*
- Refers to the use of newer features that add to the experience in modern browsers that support those features,
but doesn't detract from the experience in older browsers.
*/
.progressive-enhancement{
background: #ccc;
/* If the border-radius and box-shadow properties aren't supported, we still get a usable experience */
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,0.75);
}
/* CSS3: Fonts */
/* Font Face */
/*
- Using @font-face, you can use online fonts on websites.
*/
@font-face {
font-family: 'OpenSansRegular'; /* Name that is assigned to this font */
/* It is possible to specify multiple font types, which can be added as additional urls() */
src: url('../fonts/OpenSans-Regular-webfont.eot');
font-style: normal;
font-weight: normal;
}
h1 {
/* You need to specify the font-family as the same one established in the @font-face call */
/* It is a good practice to provide fallback fonts*/
font-family: 'OpenSansRegular', Helvetica;
}
/* You can alter the @font-face call in order to use the font-weight and font-style properties as usual */
@font-face {
font-family: 'OpenSansRegular';
src: url('../fonts/OpenSans-Regular-webfont.eot');
font-style: normal;
font-weight: bold;
}
h1 {
/* Then you can use the bold version by changing the font-weight instead of the font-family */
font-weight: bold;
}
All the html files are linked to their respective CSS files. Open your browser and start learning!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
