Scribd
Upload
3 views9 pages

HTML and CSS Basics Guide

The document provides an overview of HTML and CSS, explaining HTML as the standard language for creating web pages and CSS as a tool for styling those pages. It details the basic structure of an HTML document, common HTML tags, and various ways to apply CSS, including inline, internal, and external methods. Additionally, it includes examples to illustrate the use of HTML and CSS together.

Uploaded by

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

HTML and CSS Basics Guide

The document provides an overview of HTML and CSS, explaining HTML as the standard language for creating web pages and CSS as a tool for styling those pages. It details the basic structure of an HTML document, common HTML tags, and various ways to apply CSS, including inline, internal, and external methods. Additionally, it includes examples to illustrate the use of HTML and CSS together.

Uploaded by

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

HTML/CSS

Member Name
• AQSA MEHMOOD
What is HTML?
• HTML (HyperText Markup Language)
• The standard language for creating web pages
• Defines the structure of a webpage
• Uses tags to define elements like headings, paragraphs, links, images, etc.

• Example Tag:

• <h1>Hello, World!</h1>
Structure of an HTML Document
• Basic HTML Page Structure:

• <!DOCTYPE html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>Welcome!</h1>
• <p>This is a paragraph.</p>
• </body>
• Explanation:
• <!DOCTYPE html>: Declares document type
• <html>: Root element
• <head>: Metadata, title, links
• <body>: Content displayed on the page
What is CSS?
• CSS (Cascading Style Sheets)
• Used to style HTML elements
• Controls layout, colors, fonts, spacing, etc.
• Why use CSS?
• Separate content from design
• Reusable styles across pages
• Example:
• p{
• color: blue;
• font-size: 16px;
Ways to Apply CSS
• 1. Inline CSS

• <p style="color: red;">Hello</p>


• 2. Internal CSS
• <style>
• p { color: green; }
• </style>
• 3. External CSS

• <link rel="stylesheet" href="[Link]">


• ✅ Best Practice: Use external CSS for cleaner code and reusability
Basic HTML Tags

• Common HTML Tags:

<h1> to <h6> – Headings

<p> – Paragraph

<a href=""> – Link

<img src=""> – Image

<ul>, <ol>, <li> – Lists

<div> – Container

Example:

<a href="[Link]
Basic CSS Properties
• Common CSS Properties:
• color: Text color
• background-color: Background
• font-size: Size of text
• margin: Space outside element
• padding: Space inside element
• border: Outline around elements

• Example:

• h1 {
• color: navy;
• margin: 20px;
• }
HTML + CSS in Action
• Combined Example:

• html
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 { color: purple; }
• p { font-family: Arial; }
• </style>
• </head>
• <body>
• <h1>Hello!</h1>
• <p>This is a styled paragraph.</p>
• </body>
• </html>

You might also like