Scribd
Upload
30 views

HTML and CSS Building Blocks of Web Design

Uploaded by

ALIA ESMAT
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

HTML and CSS Building Blocks of Web Design

Uploaded by

ALIA ESMAT
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML and CSS: Building Blocks of Web

Design
Introduction to HTML
 HTML stands for Hypertext Markup Language
 It's the foundation of web pages
 Uses tags to structure content
 Creates the skeleton of a webpage
 Not responsible for styling or interactivity
Basic HTML Structure
 HTML documents have a standard structure:
<!DOCTYPE html>
<html>
<head> <title>Page Title</title>
</head>
<body> <!-- Content goes here --> </body>
</html>
 Each element serves a specific purpose
Common HTML Elements
 Headings: <h1> to <h6>
 Paragraphs: <p>
 Links: <a href="url">link text</a>
 Images: <img src="image.jpg" alt="description">
 Lists: <ul> (unordered) and <ol> (ordered)
 Div containers: <div>
Introduction to CSS
 CSS stands for Cascading Style Sheets
 Used to style HTML elements
 Separates content from presentation
 Can be inline, internal, or external
 Allows for consistent styling across multiple pages
CSS Syntax
 Basic structure:
selector { property: value; }
 Example:
p { color: blue; font-size: 16px; }
 Multiple properties can be applied to one selector
CSS Selectors
 Element selector: p, h1, div
 Class selector: .classname
 ID selector: #idname
 Attribute selector: [attribute="value"]
 Descendant selector: div p
 Pseudo-class selector: a:hover
CSS Box Model
 Every HTML element is a box
 Box model components:
 Content
 Padding
 Border
 Margin
 Used to control layout and spacing
Responsive Design Principles
 Use relative units (%, em, rem) instead of fixed units (px)
 Implement media queries for different screen sizes
 Use flexible grid systems
 Optimize images for various devices
 Consider mobile-first design approach
Best Practices
 Keep HTML structure semantic and meaningful
 Use external CSS files for better organization
 Comment your code for clarity
 Validate your HTML and CSS
 Test on multiple browsers and devices
 Stay updated with current web standards
Conclusion
 HTML provides structure to web content
 CSS adds style and layout to HTML elements
 Together, they form the foundation of web design
 Continuous learning is key in this evolving field
 Practice and experimentation lead to mastery

You might also like