HTML & CSS
HTML (HyperText Markup Language)
HTML stands for HyperText Markup Language. It's the standard language for creating web pages and web applications. HTML is the backbone of web development, providing the structure. It defines the structure and content of a webpage.
HTML Structure
This basic structure forms the foundation of every HTML document.
The <!DOCTYPE html> declaration is a crucial element in HTML documents for several reasons:
🎨 Ensures proper rendering by telling browsers to use standards mode
📌 Declares the document as HTML5
🔄 Improves cross-browser compatibility
✅ Enables accurate HTML validation
🔮 Future-proofs your document for upcoming web standards
While a webpage might display without it, including <!DOCTYPE html> is essential for consistent functionality and adherence to web development best practices. It's a simple line of code that significantly impacts how browsers interpret and render your HTML.
<!DOCTYPE html>: Declares the document type.
<html></html>: Represents the root of an HTML document.
<head></head>: Contains meta-information about the webpage, like title, links, scripts, etc.
<meta>:
Specifies metadata about an HTML document. Common attributes include:
charset: Specifies the character encoding for the HTML document
name: Specifies a name for the metadata
content: Specifies the value associated with the name or http-equiv attribute
viewport: Controls the page's dimensions and scaling on different devices
<body></body>: Contains the visible content of the webpage.
<h1></h1>: Defines a heading.
<p></p>: Defines a paragraph.
HTML Elements
HTML uses various elements to structure content. Here are some common elements:
Headings:
<h1>to<h6>
Define HTML headings, <h1> with being the highest level and <h6> the lowest.
Paragraphs:
<p>Defines a paragraph.Links:
<a> </a>Defines a hyperlink, used to link from one page to another.Images:
<img>Defines an image in an HTML page.Lists:
<ul>,<ol>,<li>Divisions:
<div>Defines a division or a section in an HTML document.Spans:
<span>Used to group inline-elements in a document.Tables:
<table>,<tr>,<td>Forms:
<form>,<input>,<label>.<ul></ul>: Defines an unordered list.
<ol></ol>: Defines an ordered list.
<li></li>: Defines a list item.
HTML Attributes
Attributes provide additional information about elements:
HTML5 New Features
HTML5 introduced several new elements and features:
Semantic elements: <header>, <nav>, <article>, <section>, <aside>, <footer>
Multimedia elements: <video>, <audio>
Canvas and SVG: For graphics and animations
Form enhancements: New input types like date, email, range
Local storage: For client-side data storage
HTML Diagram
HTML Element Nesting
HTML elements can be nested inside each other, creating a hierarchical structure. This nesting is crucial for organizing content and applying styles effectively. Here's a diagram illustrating HTML element nesting:
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and layout of HTML (and XML) documents. It allows web developers to control the appearance of web pages, including elements' colors, fonts, spacing, positioning, and more. By separating the content (HTML) from its presentation (CSS), developers can create consistent and visually appealing websites.
CSS Basic Syntax
CSS Selectors
Selectors target HTML elements to apply styles:
Element selector: p { }
Class selector: .classname { }
ID selector: #idname { }
Attribute selector: [attribute="value"] { }
Pseudo-class selector: a:hover { }
Common CSS Properties
Here are some frequently used CSS properties:
CSS Types
There are three ways to include CSS in a web page:
Inline CSS: Styles are applied directly to HTML elements using the
styleattribute.Internal CSS: Styles are defined within the
<head>section of an HTML document.External CSS: Styles are defined in a separate
.cssfile and linked to the HTML document.
Explanation of CSS Selectors, Properties, and Values
1. Selectors
Selectors are used to target specific HTML elements for styling. The diagram shows four types of selectors:
Element Selectors: Target elements by their HTML tag name (e.g., p, div, h1).
Class Selectors: Target elements with a specific class attribute (e.g., .classname).
ID Selectors: Target a unique element with a specific id attribute (e.g., #idname).
Attribute Selectors: Target elements based on their attributes or attribute values (e.g., [type="text"]).
2. Properties
Properties define what aspect of the selected element you want to style. The diagram highlights three categories of properties:
Layout Properties: Control the positioning and sizing of elements (e.g., width, height, margin, padding).
Typography Properties: Affect text appearance (e.g., font-size, font-family, text-align).
Color Properties: Set colors for elements (e.g., color, background-color).
3. Values
Values are assigned to properties to specify how the property should be applied. The diagram shows three types of values:
Keywords: Predefined words that represent specific styles (e.g., auto, none, inherit).
Units: Measurements used for size-related properties (e.g., px, em, %, rem).
Functions: Special CSS functions that compute values (e.g., rgb(), calc(), url()).
Together, these components form the structure of CSS rules. For example:
In this example, 'h1' is the selector, 'font-size', 'color', and 'margin-bottom' are properties, and '24px', '#333', and '1em' are their respective values.
Common CSS Properties with Examples
Here's a list of common CSS properties grouped by category, along with examples:
Font Properties
Text Properties
Background Properties
Dimension Properties
Display and Positioning Properties
These examples demonstrate how to use common CSS properties to style various aspects of web elements, from text and fonts to layout and positioning. Experiment with these properties to achieve the desired look for your web pages.
Real-Time Example: Portfolio Website
Let's create a simple portfolio website to demonstrate HTML and CSS skills:
HTML Structure
CSS Styling
By combining HTML and CSS, you can create visually appealing and interactive web pages.
Last updated
Was this helpful?
