HTML5 Overview
HTML5 is the latest major revision of the HyperText Markup Language, the core standard for
structuring and presenting content on the web. Developed by the WHATWG and later adopted
by the W3C, HTML5 introduced significant enhancements over previous versions, including
native support for audio, video, offline storage, and more robust APIs, reducing the need for
plugins like Flash [1] .
CSS: Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation,
formatting, and layout of HTML elements. It separates content (HTML) from presentation,
making web development more efficient and maintainable. CSS allows you to control colors,
fonts, spacing, alignment, and more, across multiple pages with a single stylesheet [2] [3] .
Levels of Style Sheets
CSS can be applied at three different levels, each with its own precedence (from lowest to
highest):
External Style Sheets: Styles are defined in a separate .css file and linked to HTML
documents. This is the most maintainable approach.
Embedded (Internal) Style Sheets: Styles are placed within a <style> tag in the <head>
section of an HTML document.
Inline Styles: Styles are applied directly to HTML elements using the style attribute. Inline
styles override both embedded and external styles [4] .
Style Specification Formats
CSS rules follow this basic syntax:
selector { property: value; }
Selector: Targets the HTML element(s) to style.
Property: The aspect of the element to style (e.g., color, font-size).
Value: The setting for the property (e.g., red, 16px) [2] [5] .
Selector Forms
CSS provides various selector types to target elements:
Element Selector: Targets all instances of a specific HTML tag (e.g., p {}).
Class Selector: Targets elements with a specific class attribute (e.g., .classname {}).
ID Selector: Targets a single element with a specific ID (e.g., #idname {}).
Attribute Selector: Targets elements based on attribute values (e.g., input[type="text"]
{}) [6] .
Property Value Forms
CSS property values can be:
Keywords: e.g., bold, center.
Lengths: e.g., 12px, 2em.
Colors: e.g., #ff0000, rgb(255,0,0).
URLs: e.g., url('image.png').
Functions: e.g., calc(100% - 80px) [5] .
Font Properties
CSS font properties control the appearance of text:
font-family: Sets the typeface (e.g., Arial, sans-serif).
font-size: Sets the size of the text (e.g., 16px).
font-style: Normal, italic, or oblique.
font-weight: Normal, bold, etc.
font-variant: Normal or small-caps.
font: Shorthand for setting multiple font properties in one line [7] .
Example:
p {
font: italic bold 16px/1.5 Arial, sans-serif;
}
List Properties
CSS can style lists using the list-style property, which is shorthand for:
list-style-type: Disc, circle, square, decimal, etc.
list-style-position: Inside or outside the list item.
list-style-image: Custom image as the list marker [8] .
Example:
ul {
list-style: square inside url('marker.png');
}
Color
The color property sets the text color. You can use:
Color names (e.g., red)
Hex codes (e.g., #ff0000)
RGB/RGBA (e.g., rgb(255,0,0))
HSL/HSLA (e.g., hsl(0, 100%, 50%)) [9] .
Example:
h1 {
color: #3366cc;
}
Alignment of Text
Text alignment is controlled with the text-align property:
left, right, center, justify
Example:
p {
text-align: center;
}
The <span> and <div> Tags
<span>: An inline container used to mark up a part of a text or a document. Useful for styling
small sections of text.
<div>: A block-level container used to group larger sections of content or elements for
styling or layout purposes.
Example:
<p>This is a <span style="color: red;">red word</span> in a sentence.</p>
<div style="background: #eee;">This is a block section.</div>
Overview and Features of CSS3
CSS3 is the latest standard for CSS, modularized for easier updates and extensions. Key
features include:
Advanced Selectors: Attribute, pseudo-class, and pseudo-element selectors.
Box Model Enhancements: Box-sizing, border-radius (rounded corners).
Backgrounds and Borders: Multiple backgrounds, gradients, border images.
Text Effects: Shadows, word wrapping, advanced font features.
2D/3D Transforms and Animations: Rotate, scale, skew, and animate elements.
Transitions: Smooth changes between property values.
Multi-Column Layouts: Easy creation of newspaper-style columns.
Media Queries: Responsive design for different devices and screen sizes [2] .
Summary:
HTML5 and CSS3 together enable modern, responsive, and interactive web design. HTML5
structures content and introduces new APIs, while CSS3 provides powerful styling, layout, and
animation capabilities, making web development more efficient and visually appealing.
⁂
1. https://www.spiceworks.com/tech/tech-general/articles/what-is-html-five/
2. https://www.tutorialspoint.com/css/what_is_css.htm
3. https://www.w3schools.com/html/html_css.asp
4. https://pressbooks.library.torontomu.ca/webdesign/chapter/chapter-5-css-forms/
5. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units
6. https://www.tutorialspoint.com/css/css_selectors.htm
7. https://www.w3schools.com/cssref/pr_font_font.php
8. https://www.w3schools.com/cssref/pr_list-style.php
9. https://www.w3schools.com/cssref/pr_text_color.php
