Scribd
Upload
3 views

Css Intro

Uploaded by

Balraj Bharwan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Css Intro

Uploaded by

Balraj Bharwan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS & Web

Development
An Introduction
What is CSS?
CSS stands for Cascading Style Sheets.
It is used to control the layout, colors, fonts, and
overall design of a webpage.
It works alongside HTML, which structures the
content.

How CSS Works with HTML


HTML defines the content and structure of
a webpage.
CSS defines how the HTML elements will
look (e.g., color, fonts, spacing, etc.).
You can link a CSS file to an HTML file or
write CSS directly within HTML.
Why is CSS?
Separation of Content and Style: CSS
separates the structure (HTML) from the
style (visual presentation).
Consistency: CSS allows you to apply
consistent styles across multiple pages.
Flexibility: CSS makes it easier to adjust
and change the design without touching
HTML.
How to Add
CSS to HTML
How to Add CSS
to HTML
1.External CSS (Recommended
for larger sites):
Link to an external .css file
inside the <head> of your
HTML
<link rel="stylesheet" href="styles.css">
How to Add CSS
to HTML
2.Internal CSS:
Add CSS directly inside the
<style> tag in the <head>
section
<head><style>body { background-color:
lightblue; } </style></head>
How to Add CSS
to HTML
3.Inline CSS:
Add CSS directly to an
individual element using the
style attribute.
<h1 style="color: green;">Hello World</h1>
Selectors
in CSS
Selectors in CSS
Element Selector:
Targets HTML tags ( e.g. <p> <h1> )
p { font-size: 16px; }
Selectors in CSS
Class Selector:
Targets elements with a specific
class. Preceded by a period (.)
.button { background-color: blue; }
Selectors in CSS
ID Selector:
Targets elements with a specific
ID. Preceded by a hashtag (#)
#header { text-align: center; }
MERITS
Responsiveness: CSS makes it easier to
adapt the design for different screen sizes
(e.g., mobile, tablet, desktop).
Visual Appeal: It allows for better visual
organization (color schemes, fonts,
spacing), which makes websites more
engaging and user-friendly.

You might also like