Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS

WEB DESIGNING
 Course :BCA
 Sem Course :BCA
 Semester :4th
 Subject : WD
 Faculty: Ms. Rubbina
 Topic :CSS
What is CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout
of multiple web pages all at once
 External stylesheets are stored in CSS files
Why Use CSS?
 CSS is used to define styles for your web pages,

including the design, layout and variations in
display for different devices and screen sizes.
CSS Solved a Big Problem
 HTML was NEVER intended to contain tags for
formatting a web page!
 HTML was created to describe the content of a
web page, like:
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
CSS Solved a Big Problem
 When tags like <font>, and color attributes were
added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large
websites, where fonts and color information were
added to every single page, became a long and
expensive process.
 To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
 CSS removed the style formatting from the HTML
page!
CSS Saves a Lot of Work!
 The style definitions are normally saved in

external .css files.
 With an external stylesheet file, you can change
the look of an entire website by changing just one
file!
CSS Syntax
 A CSS rule consists of a selector and a

declaration block.
 CSS Syntax
CONT..
 The selector points to the HTML element 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.
 Multiple CSS declarations are separated with
semicolons, and declaration blocks are
surrounded by curly braces.
Example
 In this example all <p> elements will be center-

aligned, with a red text color:
 p{
color: red;
text-align: center;
}
Example Explained
 p is a selector in CSS (it points to the HTML

element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property
value
HTML <style> Tag
 The <style> tag is used to define style information
(CSS) for a document.
 Inside the <style> element you specify how HTML
elements should render in a browser.
 When a browser reads a style sheet, it will format the
HTML document according to the information in the
style sheet. If some properties have been defined for
the same selector (element) in different style sheets,
the value from the last read style sheet will be used.
Example
 <html>
<head>
<style>

h1 {color:red;}
p {color:blue;}

</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
Using CSS
 CSS can be added to HTML documents in 3
ways:
 Inline - by using the style attribute inside HTML
elements
 Internal - by using a <style> element in
the <head> section
 External - by using a <link> element to link to
an external CSS file
 The most common way to add CSS, is to keep
the styles in external CSS files.
Inline CSS
 An inline CSS is used to apply a unique style to a
single HTML element.
 An inline CSS uses the style attribute of an HTML
element.
 The following example sets the text color of
the <h1> element to blue, and the text color of
the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
 An internal CSS is used to define a style for a single
HTML page.
 An internal CSS is defined in the <head> section of an
HTML page, within a <style> element.
 The following example sets the text color of ALL

the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue"
background color:
Example
 <html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
External CSS
 An external style sheet is used to define the
style for many HTML pages.
 The external style sheet can be written in
any text editor. The file must not contain
any HTML code, and must be saved with
a .css extension.
 To use an external style sheet, add a link to
it in the <head> section of each HTML
page:
Example
 <html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Here is what the "styles.css" file
looks like:
 body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Colors, Fonts and Sizes
 The CSS color property defines the text color to

be used.
 The CSS font-family property defines the font to
be used.
 The CSS font-size property defines the text size
to be used.
Example
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
CONT..
 </head>
<body>
</body>
</html>
CSS Border
 The CSS border property defines a border around
an HTML element.
Example
Use of CSS border property:
p
{
border: 2px solid powderblue;
}
CSS Padding
 The CSS padding property defines a padding
(space) between the text and the border.
 Example
p
{
padding: 30px;
}
CSS Margin
 The CSS margin property defines a margin
(space) outside the border.
 Example
p
{
margin: 50px;
}

Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS

Uploaded by

Copyright:

Available Formats

Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing: Course:BCA Sem Course:BCA Semester:4th Subject: WD Faculty: Ms. Rubbina Topic:CSS

Uploaded by

Copyright:

Available Formats

WEB DESIGNING

 CSS is used to define styles for your web pages,

 The style definitions are normally saved in

 A CSS rule consists of a selector and a

 In this example all <p> elements will be center-

 p is a selector in CSS (it points to the HTML

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

 The following example sets the text color of ALL

 The CSS color property defines the text color to

You might also like