Scribd
Upload
5 views

CSS----1---1-_1694424059148

Uploaded by

muhammedshibilshihab5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

CSS----1---1-_1694424059148

Uploaded by

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

Section-2: Basics About CSS

● Cascading Style Sheets (CSS) describe how documents are presented


on screens, in print.

● Cascading Style Sheets (CSS) provide easy and effective alternatives


to specify various attributes for the HTML tags.

● Using CSS, you can specify a number of style properties for a given
HTML element. Each property has a name and a value, separated by a
colon (:).

● Each property declaration is separated by a semi-colon (;).


2.1 Advantages of CSS
● CSS saves time – You can write CSS once and then reuse same sheet in Multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages as
you want.

● Pages load faster – If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag.
So less code means faster download times.

● Easy maintenance – To make a global change, simply change the style, and all elements in
all the web pages will be updated automatically.

● Superior styles to HTML – CSS has a much wider array of attributes than HTML so you can
give far better look to your HTML page in comparison of HTML attributes.

● Multiple Device Compatibility – Style sheets allow content to be optimized


for more than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for printing.

● Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.
Steps for adding CSS to HTML
1. write contents of webpage using html
2. In head tag add CSS using <style> tag.

<html>
<head>
<style>
</style>
</head>
</html>

selector

CSS syntax:
declaration

Eg: h1{color:blue;font-size:12px;}
property value
You can use CSS in three ways in your HTML
document:
External Style Sheet – Define style sheet rules in a
separate .css file and then include that file in your HTML
document using HTML <link> tag.

Internal Style Sheet – Define style sheet rules in header


section of the HTML document using <style> tag.

Inline Style Sheet – Define style sheet rules directly


along with the HTML elements using style attribute.
2.1 Internal Style Sheet
If you want to apply Style Sheet rules to a single document only then you can include those rules in header section of the
HTML document using <style> tag.
Rules defined in internal style sheet override the rules defined in an external CSS file.
Example
Consider we define a style sheet file style.css which has following rules:

<html>
<head>
<style>
h1{ text-align:left;}
h2{color:green;}
h3{color:red;text-align:left;}
</style>
</head>
<body>
<h1>education</h1>
<h2>computer</h2>
<h3>class 11</h3>
</body>
</html>
2.2 External Style Sheet
If you need to use your style sheet to various pages, then it’s always recommended
to define a common style sheet in a separate file. A cascading style sheet file will
have extension as css and it will be included in HTML files using <link> tag.
*In this <style> tag is not required,in head section
*only put the <link>tag
The attribute of link tag is relation rel:(defines the relationship between linked file and html document),
type:(defines the type of file used), href:(it defines the URL of the style sheet file)
Eg:
Mystyle.css
h1{ color:orange;text-align:centre;}
h2{color:green;}
h3{color:red;text-align:left;}
<html>
<head>
<link rel=”stylesheet” type=”text/css” href= ”Mystyle.css”>
</head>
<body>
<h1>education</h1>
<h2>computer</h2>
<h3>class 11</h3>
</body>
</html>
2.4 Inline Style Sheet
You can apply style sheet rules directly to any HTML element using style attribute of
the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS
File as well as the rules defined in <style> tag.
Example
Let’s re-write above example once again, but here we will write style sheet rules
Along with the HTML elements using style attribute of those elements.

<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=“color:red;”>This is red</p>
<p style=“font-size:20px;”>This is thick</p>
<p style=“color:green;”>This is green</p>
<p style=“color:green;font-size:20px;”>This is thick and green</p>
</body>
</html>

You might also like