Scribd
Upload
2 views

Css

Cascading Style Sheets (CSS) enhance web page formatting by allowing customization of entire pages through style rules that consist of selectors and declarations. Styles can be applied using inline, embedded, or external style sheets, with external styles being particularly useful for maintaining consistent design across multiple pages. The document provides examples of each method and explains the structure and purpose of CSS rules.

Uploaded by

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

Css

Cascading Style Sheets (CSS) enhance web page formatting by allowing customization of entire pages through style rules that consist of selectors and declarations. Styles can be applied using inline, embedded, or external style sheets, with external styles being particularly useful for maintaining consistent design across multiple pages. The document provides examples of each method and explains the structure and purpose of CSS rules.

Uploaded by

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

Cascading Style Sheets(CSS)

• Style sheets represent the World Wide Web consortium‟s effort to improve on the tag and
attribute based style of formatting.

• Style sheets provide a way of customizing whole pages all at once and in much richer
detail than the simple use of tags and attributes.

• The format of style sheet will be:

<style type=”text/css”>

selector{property:value;property:value;}

selector{property:value;property:value;}

</style>
.• Every line in <style> tag is called as a “Rule” and a style rule has two parts:
a. Selector.

b. Set of declarations.

• A selector is used to create a link between the rule and the HTML tag.

The declaration has two parts again:

a. Property.

b. Value.

A property specifies additional information and value specifies property value. For
example:
.
<style type=”text/css”>

body {background-color: #d0e4fe;}

h1 {

color: orange;

text-align: center;

p{

font-family: "Times New Roman";

font-size: 20px;

</style>
• If we add above code in the <head> element of web page , entire web page will be
. displayed in various styles given in style element.
• Style sheets are implemented with cascading style sheets specification.

• Conventionally styles are cascaded i.e., we don‟t have to use just a single set of
styles inside a document, but we can import as many styles as we like.

• There are three mechanisms by which we can apply styles to our HTML
documents:

1. Inline Style sheets.

2. Embedded Style sheets.

3. External Style sheets


Inline Style Sheets:

.
• Inline style sheets mix content with presentation. To use inline styles we use style

• attribute in the relevant tag.

<html>

<head>

<title>HTML Tables</table>

</head>

<body bgcolor=‟pink‟>

<center>

<h1>Creating HTML Tables</h1><br>

<table border=”2” cellpadding=”4” cellspacing=”4”>

<tr>

<th colspan=”2” style=”background-color:red”> WebSites</th>


<tr>
.

<th style=”background-color:blue”>Mail-Sites</th>

<th style=”background-color:green”>Job-Sites</th>

</tr><tr>

<td style=”background-color:grey”>Gmail</td>

<td style=”background-color:aqua”>Naukri</td>

</tr><tr>

<td style=”background-color:yellow”>Yahoo</td>

<td style=”background-color:purple”>JobStreet</td>

</tr></table>

</center></body></html>
• ><tr>
.• <th style=”background-color:blue”>MailSites</th>
• <th style=”background-color:green”>JobSites</th>
• </tr><tr>
• <td style=”background-color:grey”>Gmail</td>
• <td style=”background-color:aqua”>Naukri</td>
.
Embedded Style sheets
• An embedded style sheet is used when a single document has a unique style.

• We define internal styles in the head section of a HTML page by using


“<style>”tag.

• The styles defined using embedded style sheets are applied throughout the page
and we put the styles into one place
<html>
.

<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{background-color: pink;}
h1 {
color:orange;
text-align:center;
}
p{
font-family: "Times NewRoman";
font-size: 20px;
}</style>
</head>
.<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
.
External Style Sheets:
• External style sheets are just that the style sheets are stored separately from our
web page.

• These are useful especially if we are setting the styles for an entire website.

• When we change the styles in external style sheet we change the styles of all
pages.

• We use “<link>”element to access the style sheet file defined into our web page.

• The format of <link> element is:

• <link rel=”stylesheet” type=”text/css” href=”extstylesheet.css”>


Example:
extern.css: ------ Script Name

body {background-color: #d0e4fe;}

h1 {

color: orange; text-align: center;

p{

font-family: "Times New Roman"; font-size: 20px;

}
extern.html------ Main Script
<html>

<head>

<title>External Style Sheets</title>

<link rel=”stylesheet” type=”text/css” href=”extern.css”>

</head>

<body>

<h1>External Style Sheets</h1><br>

<p>This is a paragraph

</body>

</html>
.

You might also like