Need for css,introduction to css & basic syntax wt

Name :- Akash Rana
Class :- CE-2
Batch :- A
Enrollment :- 150410107090
Sub :- WT

Topic :- Introduction to CSS, Need for CSS & Its
Basic Syntax

Introduction to CSS
• CSS – Cascading Style Sheet.
• The CSS is a markup language used in the web
development for presentation purpose.
• The primary intension of CSS was to separate out
the web content from the web presentation.
• Various elements such as text ,font and color are
used in CSS for presentation purpose .Thus CSS
specification can be applied to bring the styles in
the web doucument.

Need for CSS
• By combining CSS with the html document,
considerable amount of flexibility into the content
submission can be achieved.
• Similarly, separating out the style from actual contents
help in managing large-scale complex sites.
• If CSS is used, effectively then global style sheet can be
applied to a web document. This helps in maintaining
the consistency in the web document.
• If small change needs to be done in the style of web
content, then CSS makes it more convenient.

Basic Syntax & Structure
• Three levels of CSS :-
 Inline style sheet
 Document level style sheet
 External level style sheet

Inline Style Sheet
• In Inline Style Sheet the styles are applied to HTML
tags. This tag can be applied using the following rule :-
Tag
{ property: value}
For Eg :-
< p style =“font-family: Arial;color:red>
• Here for the tag p two properties are used such as font-
family and color and those are associated with the
values such as arial and red respectively. In the body
section the style sheets are created.

Inline Style Sheet
• This method is called in-line style sheet because
the style is applied at the occurrence of the HTML
element. Using the style attribute the desired
style can be set to the selector.
• Advantages :- We can apply uniform style on tags
for the whole document using inline style sheet.
• Disadvantage :- It is not much suitable for web
page designing because the actual contents of
the web page are mixed with the presentation.

Document Level Style Sheet
• This type of style sheet appears in the head
section and in the body section newly defined
selector tags are used with the actual contents.
• For eg :- In the below HTML script we have
defined h1,h2 and p selectors. For each of these
selectors different property and values are set.
The important thing while writing in this is that
we should have to mention style type=“text/css”
in the head section. By this the browser will come
to know that the program is making use of CSS.

• <html>
<head>
<title> Document level style sheet </title>
< style type=“text/css”>
h1
{ font-family: Arial; color:green }
h2
{font-family:Arial; color:red; left:20px }
p
{ font-size:14pt; font-family: verdana}
</style>
</head>
<body>
<h1> <center> hello</center></h1>
<h2> hi</h2>
<p> This is a pragraph </p>
</body>
</html>

• Advantages :- Helps to define the layout of the
web page. Used when we want to apply the
unique style sheet for the web page.
• Disadvantages :- When we want to apply the
style to more than one documents at a time
then the document level style sheet is of no
use.

External Style Sheet
• When we want to apply particular style to
more than one web documents in such case
external style sheet is used.
• The central idea in this type of style sheet is
that the desired style is stored in one .css file.
• And the name of that file has to be mentioned
in our webpage. Then the styles defined in .css
file will be applied to all these web pages.

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“ex1.css”/>
</head>
<body>
<h1><center> Hello </center></h1>
<p> Paragraph </p></body></html>
The cascading style sheet ex1.css can be
h1
{ font-family:Arial}
p
{font-family:Monotype Corsiva; font-size:14pt}

• When we want to link external style sheet
then we have to use <link> tag which is to be
written in the head section.
• Advantage :- If we want to change any style
then we have to modify only one file.

Need for css,introduction to css & basic syntax wt

More Related Content

What's hot (20)

Similar to Need for css,introduction to css & basic syntax wt (20)

Recently uploaded (20)

Need for css,introduction to css & basic syntax wt