HTM L
s i t ?
And
at i
CSS
wh
How HyperText Markup
why Language Shapes Our Online
do we u
se it? World
What HTML Is, Its Purpose, and
How It Works
HTML (HyperText Markup Language)
is the standard language used to
structure and define the content of
web pages. Its primary purpose is to
provide a framework for organizing
information on the web, such as
headings, text, images, links, and
more. HTML works by using "tags,"
which are enclosed in angle brackets,
like <h1> or <p>.
Common HTML Tags
<html> … </html> — The root element. ...
<head> … </head> — The document head. ...
HTML's Role as the Structural Layer of Web Pages
HTML (HyperText Markup Language) acts as the backbone or structural layer of web pages. Its primary
<title> … </title> — The page title. ... purpose is to organize and define the content that appears on a website. Think of HTML as the "skeleton" of a
<body> … </body> — The page's content. ... webpage—it provides the structure upon which everything else (like design and functionality) is built.
For example, HTML uses tags like <h1> for headings, <p> for paragraphs, <img> for images, and <a> for links.
<h1> … </h1> — A section heading. ...
These tags group and arrange content in a logical order, ensuring that browsers understand how to display it.
<p> … </p> — A paragraph. ...
<a> … </a> — A link. ...
<img> — An image.
CSS Key Features of CSS
Styling
Control colors, fonts, spacing, borders, margins, paddings, etc.
Cascading Style Sheets Apply effects like shadows, gradients, and animations.
Separation of Content and Design:
Keeps HTML focused on structure, CSS on appearance.
Easier to update and maintain website appearance without changing content.
Cascading Style Sheets is what CSS
stands for. A web page's appearance
and feel can be controlled by using Animations and Transitions
CSS language. CSS controls the Animations: CSS allows you to animate properties like position, size, color, and opacity.
colours, sizes, placements, fonts, You can define keyframes to create smooth transitions between states.
and layouts of web page
components as they appear on the
CSS is a very versatile tool,
screen.
allowing for countless
possibilities in web design. As
you become more familiar with
its features, you can create
more dynamic and interactive
web pages.
Benefits of CSS:
Consistency: Allows consistent design across multiple pages.
Faster Development: Can change styles for the entire website in one place.
Performance: External CSS reduces redundancy and improves load times.
Accessibility: CSS helps with better visual presentation, making websites easier to navigate for users.
HTML and CSS
HTML (HyperText Markup Language) and CSS (Cascading
Style Sheets) are the building blocks of web design. Together,
they create visually appealing and functional web pages.
1. HTML (Structure):
Think of HTML as the "skeleton" or the structure of your webpage. It's the <h1>Welcome to My Website</h1> <!-- This is a title -->
part that defines what elements you have on your page like text, images, <p>This is my first webpage!</p> <!-- This is a paragraph -->
buttons, and links.
h1 {
color: blue; /* Make the title text blue */
} Flexibility: You can customise a webpage's appearance and
2. CSS (Style):
p{
layout with CSS without changing the HTML. By linking a
CSS is like the "clothes" that make your webpage look nice. It tells the single CSS file, you may apply uniform styles throughout
font-size: 16px; /* Make the paragraph text size 16px */
web page how to look – like colors, fonts, spacing, etc. } the website.
Result:
Efficiency: Because the browser stores the CSS file and
When you open this in a web browser, you will see:
Putting HTML and CSS Together: does not have to download it each time a page loads,
HTML creates the structure (e.g., the title and text). The title "Welcome to My Website" in blue. writing organised and well-structured HTML and CSS code
CSS is used to style those elements (e.g., making the title blue and adjusting the The paragraph "This is a simple webpage I created." speeds up page loads.
paragraph size). with 18px text size.
Which Is more important
HTML
CSS Advantages of Mixed Use of HTML and CSS
BOTH Separation of Structure and Style: CSS determines the visual look
of the material, whereas HTML specifies its structure. The website
Submit
is simpler to update and maintain as a result of this division.
● Loading...
<H1> What is <h1>?
The <h1> tag represents the main heading of a webpage or section.
It signifies the most important heading in your document and
usually appears at the top of the content.
<h1> is part of a heading hierarchy, which includes tags <h1> through <h6>.
The <h1> tag is one of the most important elements in HTML, used to
define the main heading on a webpage. Think of it as the title of a book
or the headline of an article—it tells people and search engines what
the page is about. It’s usually the biggest and boldest text on the page,
grabbing attention right away.
How to make it look good on your website!
Unique and descriptive: Make sure each page on your site has a unique <h1>
tag that accurately describes the content.
Keywords: Include important keywords that describe the content of the page,
but don't overstuff it.
structure: Use heading tags (<h1>, <h2>, etc.) in a hierarchical order. <h1> is for
the main title, <h2> for subsections, and so on.
<P>
One of the simplest and most important HTML tags is the
Why Paragraphs Matter
Improves Readability: Breaks down large chunks of text into manageable
sections.
Enhances Structure: Makes writing logical and easier to follow.
Supports Accessibility: Clear, well-structured paragraphs are easier to
tag. It is an ideal way to arrange content on a web page and is used to read for everyone, including those using screen readers.
define a paragraph of text.
Styling Paragraphs
You can make your paragraphs look exactly how you want using CSS. For example:
Change the font, size, or color.
Add or reduce spacing between lines or paragraphs.
Align the text left, right, center, or justify it.
When you use <p>, it automatically creates a block of text with space above and below it, making it easier to read. For
example, if you write:
html
<p>This is a paragraph of text.</p>
Your browser will display it as a distinct block, separating it from other content.
width and height:
<IMG> These attributes specify the dimensions of the image in pixels.
While it's not necessary to specify them, doing so can help
improve page load performance by reserving space for the
image.
height and width (CSS-based): While the HTML attributes define the image’s
intrinsic size, you can also control the image's display size using CSS (using
width and height in CSS). This is more flexible and responsive than setting it
directly with HTML.
The <img> tag is a critical element in web development for
embedding images, and understanding its attributes and
capabilities is important for building modern, responsive,
and accessible websites. The additional attributes and CSS
styling options provide flexibility in how images are
presented and how they interact with the page layout.
border: 5px solid black; adds a 5-pixel-wide solid black border around the image.
width: 300px; resizes the image width to 300 pixels.
height: auto; ensures the aspect ratio is maintained when resizing.
<A>
The <a> tag in HTML is used to create hyperlinks. A
hyperlink allows users to click and go to another page,
website, or specific part of the current page. It’s one of
the most crucial parts of the web.
Why the <a> Tag Matters
Navigation: It’s the main way we move around online. Whether you're
clicking on a menu item, a "Read More" button, you're interacting with
an <a> tag.
User Experience: Links guide users to what they’re looking for. A well-
This image explains the structure of a hyperlink in HTML. It highlights three key parts: the opening placed link can make a website easier to use and more enjoyable.
tag where the link starts, the target link (the URL the user will visit), and the anchor text, which is the Search Engines: Search engines like Google use links to discover and
clickable part seen on the webpage rank pages. Well-designed links with descriptive text also help people
(and search engines) understand where the link will take them.
<HR>
The <hr> tag in HTML stands for "horizontal rule" and
is used to create a horizontal line that visually
separates content on a webpage.
Importance of the <hr> Tag:
Visual Clarity: It helps to organize content by creating clear breaks.
Enhanced Readability: Long pages or blocks of text become easier to read with visible
separators.
Aesthetic Appeal: Styled <hr> elements contribute to a polished and professional
website design.
When the hr> tag is used alone, it creates a simple grey line that is the length of
the page; however, when you style it with CSS, it becomes much more adjustable;
you could change its colour, make it thinner or thicker, add dotted or dashed
effects, or even use gradients to make it look more recent and professional. This
makes the hr tag not only a useful tool but also a design element that can
improve the website's overall look.
<DIV>
The <div> tag in HTML is a block-level element used to group content together, making
it easier to organize and style sections of a webpage. It doesn't have any visual styling
by default but becomes powerful when combined with CSS for design and layout
purposes.
Why Use <div>?
Organization: It helps group related content for better structure.
Styling: With CSS, you can design specific sections of your page easily.
Layouts: It works seamlessly with modern CSS techniques like Flexbox and
Grid for creating responsive designs.
The <div> tag is an essential building block in web development, making it
easier to create professional, styled, and well-structured websites.
What Happens?
The <div> groups the heading, paragraph, and button together into a single styled
section.
CSS is applied to make the section visually appealing: a light gray background, rounded
corners, padding, and a shadow to give it depth.
The content is centered, and the button has hover effects, enhancing interactivity.
KEY RULES OF CSS
These "enclose" an object's styles. The curly braces should contain anything you want to style.
Whitespace (Spaces/Line Breaks):
You can add spaces or break lines
Colons:
between your CSS to make it easier to
read. The browser doesn’t care about The colon divides a value (the way you want to adjust it) and the item
extra spaces, as long as they’re in the
being changed (what you want to change).
right places.
Semicolons:
Within the curly brackets, these identify the end result of
each property-value pair. The semicolon can be left after
the final one, but it's safer to use it, particularly if you'll be
adding other styles later.
Differences Between HTML and CSS How They Complement Each Other:
HTML is content; CSS is design.
HTML gives structure (headings, paragraphs, links), while CSS defines how these
HTML and CSS are both essential for building websites, elements look (colors, sizes, positions).
but they serve different roles and work together to Without HTML, there would be no content to style; without CSS, the content
create a complete web page. would just be plain and unstyled.
HTML (HyperText Markup Language):
Purpose: HTML is the structure or skeleton of a web page. It defines the content
and elements such as text, images, links, buttons, and more.
Role: It provides the basic framework by marking up content with tags like <h1>,
<p>, <img>, and <a>.
CSS (Cascading Style Sheets):
Purpose: CSS is used to style the content defined by HTML. It controls the layout,
colors, fonts, and overall look of the page.
Role: It makes the HTML elements look visually appealing by applying design
properties like color, spacing, fonts, and positioning.
CONCLUSION
Together, they allow web developers to create functional, attractive
websites. HTML gives the building blocks, while CSS makes those blocks
look polished and professional. Their applications range from creating
simple webpages to complex, responsive, and interactive designs across
a variety of devices and screen sizes. Without HTML, there would be no
content to display, and without CSS, websites would be plain and
unstyled and boring
Despite being opposites in their roles (content vs. appearance), they work well together because
HTML provides the foundation, while CSS makes that foundation visually appealing and
functional. HTML organizes the elements, and CSS makes them look good, ensuring that a
webpage is both structured and attractive. This separation of concerns allows for cleaner, more
maintainable code, and lets web developers focus on either the content or the style without
interfering with the other.
Thank you
