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
Post a Comment