Scribd
Upload
4 views

1

Uploaded by

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

1

Uploaded by

OP HBS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS

CSS Introduction :
CSS (Cascading Style Sheets) is a language designed to simplify the process of making
web pages presentable.
It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning
The main advantages are separation of content (in HTML) and styling (in CSS) and the same CSS ru
be used across all pages and not have to be rewritten.
HTML uses tags and CSS uses rule sets.
CSS styles are applied to the HTML element using selectors.

Why CSS?
Saves Time: Write CSS once and reuse it across multiple HTML pages.
Easy Maintenance: Change the style globally with a single modification.
Search Engine Friendly: Clean coding technique that improves readability for search
engines.
Superior Styles: Offers a wider array of attributes compared to HTML.
Offline Browsing: CSS can store web applications locally using offline cache, allowing
offline viewing.
CSS Versions Release Year

CSS Versions Release Year

CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and a declaration block.
Selector: Targets specific HTML elements to apply styles.
Declaration: Combination of a property and its corresponding value.

// HTML Element
<h1>GeeksforGeeks</h1>

// CSS Style
h1 { color: blue; font-size: 12px; }

Where -
Selector - h1
Declaration - { color: blue; font-size: 12px; }

The selector points to the HTML element that you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.

Example
CSS

p{
color: blue;
text-align: center;
}

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces. In this example, all paragraph element (<p> tag) will be centre-aligned, with
a blue text color.

Web Page with & without CSS


Without CSS: In this example, we have not added any CSS style.
HTML

<!DOCTYPE html
>
<html>

<head>
<title>Simple Web Page
</title>
</head>

<body>
<main>
<h1>HTML Page </h1>
<p>This is a basic web page.
</p>
</main>
</body>

</html>

Output:

Without CSS

Using CSS: In this example, we will add some CSS styles inside the HTML document to
show how CSS makes a HTML page attractive and user-friendly.
HTML
<!DOCTYPE html >
<htm>
l
<head >
<title>Simple web page </titl >
<styl> e
emain{
width
: 600px;
height
: 200px;
padding : 10px;
background : beige;
}

h {
1 color
: olivedrab;
border-bottom: 1pxdotteddarkgreen
;
}

p{
font-family
: sans-serif
;
color
: orange;
}
</styl>
</head
e>

<body>
<main >
<h >My first Page
</h >
<p
1>This is a basic
1 web <
page.
/p>
</main>
</body>

</htm>
l
Output:

With CSS

You might also like