Scribd
Upload
4 views5 pages

HTML5 Overview

HTML5 is the latest version of the HyperText Markup Language, enhancing web content structure with features like audio and video support. CSS is a stylesheet language that separates content from presentation, allowing for efficient web design through various styling methods. Together, HTML5 and CSS3 enable modern web development with responsive design and advanced styling capabilities.

Uploaded by

divyaammua90
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views5 pages

HTML5 Overview

HTML5 is the latest version of the HyperText Markup Language, enhancing web content structure with features like audio and video support. CSS is a stylesheet language that separates content from presentation, allowing for efficient web design through various styling methods. Together, HTML5 and CSS3 enable modern web development with responsive design and advanced styling capabilities.

Uploaded by

divyaammua90
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like