Introduction to html and
css
Submitted to: miss Divya Verma
Submitted by: Shivesh Rana
Basic introduction
What are HTML and CSS?
HTML (HyperText Markup Language) and CSS (Cascading Style
Sheets) are the foundational technologies for building web pages.
They work together to structure content and style it for
presentation.
HTML: The Structure of the Web
Definition: HTML is a markup language used to create the
structure of web pages.
Purpose: It allows you to define elements like headings,
paragraphs, links, images, and lists.
CSS: The Style of the Web
Definition: CSS is a style sheet language used for describing the
presentation of a document written in HTML.
Purpose: It controls layout, colors, fonts, and overall appearance.
Basic structure of html
<!DOCTYPE html>
<html>
<head> <title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Html structure with css
<!DOCTYPE html>
<html>
<head>
<title>Styled Web Page</title>
<style>
body
{
background-color: lightblue; color: darkblue; }
h1 { text-align: center; }
</style>
</head>
<body>
<h1>Welcome to My Styled Web Page</h1>
<p>This is a paragraph with some style!</p>
</body>
</html>
Common html elements
Html tag
Head tag
Body tag
Img tag
Paragraph , break line
Heading
Background color
Title tag
Ordered & unordered lists tag
common css properties & layouts
color: Specifies the color of text. It can accept color names, hex codes, or
RGB/RGBA values.
font-size: Defines the size of the font used for text. It can be set in various
units (px, em, rem, %).
font-family: Specifies the typeface for text. It can include system fonts or
web-safe fonts.
text-align: Determines the alignment of text within an element (left, right,
center, justify).
display: Determines how an element is displayed in the document flow.
Common values include block, inline, inline-block, flex, and [Link]:
Defines how an element is positioned on the page. Types include:static:
Default positioning.
relative: Positioned relative to its normal position.
display: grid: Enables grid layout for a container.
grid-template-columns: Defines the number and size of columns in a grid
layout.
grid-gap: Specifies the spacing between grid items.
Tools for html & css
Code Editors
Visual Studio Code (VS Code)
• A powerful, customizable code editor with extensions for HTML, CSS,
and other languages.
• Features include syntax highlighting, IntelliSense, and built-in Git
integration.
Sublime Text
• A lightweight, fast text editor with a clean interface.
Browser Developer Tools
Chrome DevTools
• Built into the Google Chrome browser, this tool provides features for
inspecting HTML, CSS, and JavaScript.
Design and Prototyping Tools
Figma
• A web-based design tool for creating UI/UX designs and
prototypes.
Resources for learning
Online Tutorials and Courses
W3Schools
• Website: W3Schools HTML | W3Schools CSS
• Offers comprehensive tutorials with examples and interactive coding.
MDN Web Docs (Mozilla Developer Network)
• Website: HTML Guide | CSS Guide
• Detailed documentation and tutorials suitable for all levels.
freeCodeCamp
• Website: freeCodeCamp
Books
"HTML and CSS: Design and Build Websites" by Jon Duckett
• A visually appealing book that covers both HTML and CSS in a clear,
accessible way.
"Learning Web Design: A Beginner's Guide" by Jennifer
Niederst Robbins
Uses & applications
Website Development
Web Application Interfaces
E-Commerce & Email Templates
Content Presentation
Accessibility
Single Page Applications (SPAs)
Portfolio and Personal Websites
conclusion
HTML and CSS are essential for web
development, providing the structure
and style needed to create visually
appealing and functional web pages.
As you learn these technologies,
you'll be able to build your own
websites and understand how the
web works!
