Skip to main content

Practical 2



Practical-2
Introduction to CSS
.
Cascading Style Sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for table less web design).

Three Ways to Insert CSS
There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
CSS file which is save with .css extension. Code for this is: -
p{color:orange;
font-size:30px;
}
h1{
border-width:39px;
border-color:green;
font-size:20px;
}
k{
border-width:39px;
border-color:green;
font-size:20px;
background-color:yellow;
}
body
{
background-color:green;
}
HTML file with .html extension. Calling is done through href function. Code for this is: -
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
</style>
<body>
<h1>This is CSS</h1>
<p> Hello World</p>
<k> i m harpreet
</body>
</html>



Ouput:-

Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page.
Example: -
<html>
<head>
<style>
body{
background-color:orange;
}
h1{
color:blue;
text-align:left;
}
p{
font-size:40px;
font-color:red;
}
</style>
<body>
<h1>Internal css</h1>
<p> This is my css file.</p>
</body></html>
Output:-

Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:

Example:-

<html>
<head>
<style></style>
<body>
<h1 style="background-color:orange">Inline CSS</h1>
<p> This is my css file.</p>
</body>
Ouput:-


Comments

Popular posts from this blog

Web Technology Practical-2

Practical-2 Introduction to CSS . Cascading Style Sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for table less web design). Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet With an external sty...