CSS
- Cascading Style Sheets
In
the previous chapters we discussed about the variety of HTML tags and the
attributes to design a webpage. As you already know about the formatting tags
and its attributes, in some situations, you may need to use a tag uniformly in
the entire document. To do so, we can use <style> tag. A style tag is
used to change the default characteristics of a particular tag inthe entire web
document wherever that tag is used.
For
example, if you want to display <h3>
tag in a particular font style and size with blue colour in the entire page,You
can use <style> tag to define
its properties in head section as follows.
<html>
<head>
<title> Usage of the <style> tag </title>
<style>
h3
{ color:blue;
font-family: "Copperplate Gothic
Bold";
font-size:14pt; }
</style>
</head>
<body>
<h3> Welcome to learn HTML </h3>
<h3> Welcome to learn CSS </h3>
<h3> Welcome to lean JavaScript </h3>
</body>
<html>
In
the above code segment, the style of <h3>
header tag is clearly defined. So, hereafter, the content between <h3> and </h3> will be displayed as per its definition.The output of
the above code is shown as below:
The
<style> tag controls the
presentation styles of a particular HTML document. If you want to use a
particular tag with the same style applied in one HTML document to another is
not possible. Thus, the <style> tags are called as “Page-Level Styles” or “Internal
Style sheets”.
The
“Internal Style sheet” is defined and implemented only within an HTML document.
If you want use the same style to multiple pages, you should define styles as a
separate style file. These separate style files are known as “Sitewide Style sheets” or “External Style
Sheets”. Professional web developers do not use internal styles.
There
is another style method called “Inline
style” ,which is used to define style for a particular tag anywhere in an
HTML document. You can define styles for any tag within an HTML document. But
it is applicable only on that line where it is defined . If you use the same
tag, again in the same document, it does not reflect the new style.
In
this chapter, we are going to discuss about External Style Sheets or Sitewide
Style Sheets that is about CSS.
Cascading Style Sheets (CSS) are also called as Sitewide Style
sheets or external style. CSS is a
style sheet language used for describing the formatting of a document written
in HTML. Using CSS, you can control the font colour, font style, spacing
between pages, columns size, border colour, background image or colour and
various other effects in a web page. In external styles, you can store all
style information in a separate file and include it in your web pages using an
HTML tag. The separate file should be saved with the extension .css
Maintainability -CSS are also defined and stored as
separate files. So, the style and appearance of a web page can be dynamically changed and maintain with less
effort.
Reusability - The
styles defined in CSS can be reused in multiple HTML pages.
Easy to understand - The tags in web pages are well
organized with style specifications and therefore
it is easy to understand.
The
body of the style sheet consists of a series of rules.
CSS
style declaration consists of two major parts; Selector and Declaration. The
Selector refers an HTML tag in which you want to apply styles. The Declaration
is a block of code contains style definition. It should be surrounded by curly
braces. You can include any number of properties for each selector, and they
must be separated by semicolons. The property name and its value should be
separated by a colon. Each declaration should be terminated by a semicolon ( ;
).
In
the above example, the style properties are defined to <p> tag. Hereafter, whenever you use the <p>, the
contents will be displayed with modified properties. If you want to use the
above style definition as an internal style then it should be specified within <style> …… ,</style> block
in head section. If you want store the above definition for using all your web pages, you should save the above code
as a separate file with extension .css
Table: 13.1
•
Open
an empty notepad.
•
Type
the style properties and their values as given in the table given above.
•
Save
the file with extension .css
P {
font-style : Italic;
color :MediumSeaGreen;
}
H1
{
border:2px solid red;
}
The
above code should be saved with extension .css
The
<link> tag is used to add CSS
file with HTML in head section. While using <link> tag, the following attributes are also included along
with standard values.
rel
= “stylesheet”
type
= “text/css”
The
href attribute is used to link the .css file.
<Link rel =
“stylesheet” type = “text/css” href = CSS_File_Name_with_Extension>
Mystyle.css
H1
{
font-family : "Comic Sans MS";
Font-weight : Bold;
border:2px solid blue;
}
P {
font-style : Italic;
color :MediumSeaGreen;
}
--- CSS_Test.htm ---
<html>
<head>
<title> Demonstration of using CSS </title>
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<H1> Welcome to CSS </H1>
<P>
CSS was invented by HakonWium Lie on October 10, 1994 and
maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a
specification has been discussed and officially ratified by W3C members, it
becomes a recommendation.
</P>
<body>
<html>
--- Back_Color.css ---
body
{
background-color :
pink;
}
--- Background_CSS.htm ---
<html>
<head>
<title>
Changing Background using CSS </title>
<link rel =
"stylesheet" type="text/css"
href="Body_Color.css"> </head>
<body>
<H1> Welcome
to CSS </H1>
</body>
</html>
Many times, you may need to put additional comments in your
style sheet blocks. So, it is very easy to comment any part in style sheet. You
can simplyput your comments inside /*.....this
is
a comment
in style sheet.....*/. CSS - Workshop
•
Develop
a web page about your school with CSS.
•
Develop
a web page describing about your district. Use CSS to format HTML structural
tags.
•
The
<style> tag controls the presentation styles of a particular HTML
document.
•
The
<style> tags are called as “Page-Level Styles” or “Internal Style
sheets”.
•
Professional
web developers do not use internal styles.
•
The
separate style files are known as “Sitewide Style sheets” or “External Style
Sheets” or CSS
•
CSS
is easy to learn and understand but it provides powerful control over the
presentation of an HTML document.
•
Most
commonly, CSS is combined with the markup languages HTML or XHTML.
•
There
is another style method called “Inline style” which is used to define style for
a particular tag anywhere in an HTML document.
•
Electronic
governance or e-governance is the application of information and communication
technology (ICT) for delivering government services.
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.