[go: up one dir, main page]
Scribd
Upload
9 views6 pages

Exp4 HTML

This document outlines the creation of an HTML file using different CSS styles: inline, external, and internal. It explains the advantages and disadvantages of each method, providing examples of syntax and implementation. The document also includes sample code for a complete HTML file and an external CSS file to demonstrate the concepts discussed.

Uploaded by

jadhaoshiv3012
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
9 views6 pages

Exp4 HTML

This document outlines the creation of an HTML file using different CSS styles: inline, external, and internal. It explains the advantages and disadvantages of each method, providing examples of syntax and implementation. The document also includes sample code for a complete HTML file and an external CSS file to demonstrate the concepts discussed.

Uploaded by

jadhaoshiv3012
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/ 6

Practical no.

Aim: - To create an html file by applying the different styles using inline,
external & internal style sheets.

Theory:-

Cascading Style Sheets (CSS) is a markup language responsible for how your web pages
will look like. It controls the colors, fonts, and layouts of your website elements.
This style sheet language also allows you to add effects or animations to your website.
You can use it to display some CSS animations like click button effects, spinners or
loaders, and animated backgrounds.
Without CSS, your website will appear as a plain HTML page.

Internal CSS

Internal or embedded CSS requires you to add a <style> tag in the <head> section of
your HTML document.
This CSS style is an effective method of styling a single page. However, using this style
for multiple pages is time-consuming as you need to put CSS rules on every page of
your website.
Here’s how you can use internal CSS:

1. Open your HTML page and locate <head> opening tag.

2. Put the following code right after the <head> tag


<style type="text/css">

3. Add CSS rules on a new line. Here’s an example:


body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}

Type the closing tag:

</style>

Advantages of Internal CSS:

 You can use class and ID selectors in this style sheet


Disadvantages of Internal CSS:

 Adding the code to the HTML document can increase the page’s size and loading
time.

External CSS

With external CSS, you’ll link your web pages to an external .css file, which can be
created by any text editor in your device (e.g., Notepad++).
This CSS type is a more efficient method, especially for styling a large website. By
editing one .css file, you can change your entire site at once.
Follow these steps to use external CSS:

1. Create a new .css file with the text editor, and add the style rules. For example:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}

2. In the <head> section of your HTML sheet, add a reference to your


external .css file right after <title> tag:

<link rel="stylesheet" type="text/css" href="style.css" />


Don’t forget to change style.css with the name of your .css file.
Advantages of External CSS:

 Since the CSS code is in a separate document, your HTML files will have a
cleaner structure and are smaller in size.

 You can use the same .css file for multiple pages.

Disadvantages of External CSS:

 Your pages may not be rendered correctly until the external CSS is loaded.

 Uploading or linking to multiple CSS files can increase your site’s download
time.
Inline CSS

Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only
need to add the style attribute to each HTML tag, without using selectors.
This CSS type is not really recommended, as each HTML tag needs to be styled
individually. Managing your website may become too hard if you only use inline CSS.
However, inline CSS in HTML can be useful in some situations. For example, in cases
where you don’t have access to CSS files or need to apply styles for a single element
only.
Let’s take a look at an example. Here, we add an inline CSS to the <p> and <h1> tag:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>
Advantages of Inline CSS:

 You can easily and quickly insert CSS rules into an HTML page. That’s why this
method is useful for testing or previewing the changes and performing quick
fixes to your website.

 You don’t need to create and upload a separate document as in the external style.

Disadvantages of Inline CSS:

 Adding CSS rules to every HTML element is time-consuming and makes your
HTML structure messy.

 Styling multiple elements can affect your page’s size and download time.
Basic syntax:
selector {property:value;
property:value; …..} selector =>
identifier of the element
e.g.
body {background : yellow; color : yellow}
p {font-family: “Times New Roman”;
font-size: 14px} h1,h3 {color : red}
Class:
selector.class-
name{property:value;
property:value} e.g.
1. p.right{text-align: right} use in HTML document:
<p class=”right”> Here is some text </p>
.left {color : blue} use in HTML document:
<p class=”left”> Here is some text </p>
<h3 class=”left”> Here is another text </h3>

Associate an External Style sheet to an HTML Document:


<head>
<link rel=”stylesheet”
type=”text/css”
href=”style1.css”/>
</head>
Embedded style sheet:
<head>
<style
type=”te
xt/css”>
p
{color:re
d}
body{background:sienna}
</style>
</head>
Inline Style Sheet:
<p style=”color:red;
text-align:right”>
Here is some text.
</p>

1. Create a css file in a notepad & save it with the .css extension.
2. In notepad type the necessary code & save with the file name mentioned with .html
extension.

File Name: 4Style_Sheet.html


<html>
<head>
<link rel="stylesheet" type="text/css" href="external_style.css" />
<style
type="text/
css"> body
{
margin-left:250px;
background:silver url('download.jpg') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray; margin-left:auto; margin-right:auto;
width:
90%;
background
-
color:#d0f0
f6; text-
align:left;
padding:8p
x;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hai CSS!</h1>

<p> CSS stands for Cascading Style Sheets. Styles define how to display
HTML elements. CSS Saves a Lot of Work! CSS defines HOW HTML
elements are to be displayed.
</p>
</div>
</div>
<p style="border-style:dotted solid dashed double">This is some text in a para.</p>
<p style="border-style:dotted solid dashed">This is some text in a paragra.</p>
<p style="border-style:dotted solid">This is some text in a paragraph.</p>
<p style="border-style:dotted">This is some text in a paragraphsss.</p>
<h2>This is a header 1</h2>
<hr />
<p>You can see that the style sheet formats the text</p>
<p><a href="http://www.google.co.in/" target="_blank">This is a link</a></p>
</body>
</html>

File Name: external_style.css


<style>
h2 {color:maroon; font-size:20pt} hr {color:navy}
p {font-size:11pt; margin-left:15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:red}
a:active {color:blue}
</style>

Output :-

You might also like