The Cascading Style Sheets specifications from the World Wide Web Consortium (the W3C, which develops Internet standards; http://www.w3.org) allows designers to specify the look of page elements, including type, as well as position those elements precisely on the Web page. Besides these abilities, CSS allows designers to easily do something at which they excel: change their minds. If the look of the elements of your site is defined according to a style sheet, in order to change the look of the site, you simply need to change the definitions in the style sheet, and the changes are automatically applied. Using CSS allows Web designers to spend more time designing, rather than wasting time with HTML's limitations.
CSS is the acronym for:
‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to
style your web pages. An example of a style change would be to make words bold.
In standard HTML you would use the <b> tag like so:
<b> make me
bold</b>
This works fine and there is
nothing wrong with this process, except that now if you wanted to say change
all your text that you initially made bold to underlined, you would have to go
to every spot in the page and change the tag.
Another disadvantage can be
found in this example: say you wanted to make the above text bold, make the
font style Verdana and change its color to red, you would need a lot of code
wrapped around the text:
<font color="#FF0000" face="Verdana, Arial,
Helvetica, sans-serif"><strong>This is text</strong></font>
This is verbose and
contributes to making your HTML messy. With CSS, you can create a custom style
elsewhere and set all its properties, give it a unique name and then ‘tag’ your
HTML to apply these stylistic properties:
CSS Syntax:
A CSS rule has two main parts:
a selector, and one or more declaration.
Selector
{Declaration<property:value>; Declaration<property:value>}
Where, the Selector is
normally the HTML element you want to style. And each declaration consists of a
property and a value. The property is the style attribute you want to change.
Each property has a value.
Example:
<style
type = "text/css">
h1
{
color: red;
font-size:14px;
}
</style>
CSS Comments:
A CSS comment begins with
"/*", and ends with "*/".
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Applying Cascading Style
Sheet:
We can apply Style Sheet in
various way into our web pages.
a) Internal Style Sheet
If you simply place the
CSS code within the <HEAD></HEAD> tag of each HTML file is called
Internal Style Sheet.
Syntax:
<HTML>
<HEAD>
<TITLE>Title
of Page</TITLE>
<Style type = "text/css">
CSS Code
here…
</style>
</HEAD>
<BODY>
</BODY>
</HTML>
With this method each HTML file contains the CSS code
needed to style the page. Meaning that any changes you want to make to one page,
will have to be made to all. This method can be good if you need to style only
one page, or if you want different pages to have varying styles.
b) External Style Sheet
An external CSS file can
be created with any text editor such as Notepad like application. A CSS file
contains no HTML, only CSS codes. You simply save it with the ".css"
file extension. You can link to the file externally by placing one of the
following links in the head section of every HTML file you want to style with
the CSS file.
Syntax:
<LINK rel="stylesheet"
type="text/css" href="path & filename of css" />
Or you can also use the
"@import" method as shown below:
<style type = "text/css">
@import url(path
& filename of .css)
</style>
Example:
<HEAD>
<LINK REL = "stylesheet" TYPE =
"text/css" HREF = " style.css">
</HEAD>
OR
<STYLE TYPE = "text/css" >
<!--
@import url(http://www.abc.com/style.css);
@import url(/style/another.css);
-->
</STYLE>
By using an external style
sheet, all of your HTML files link to one CSS file in order to style the pages.
This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are few reasons this method is better:
i.
Easier Maintenance
ii.
Reduced File Size
iii.
Reduced Bandwidth
iv.
Improved Flexibility
c) Inline Style Sheet
Inline Styles are
defined right in the HTML file along with the element you want to style. CSS
codes are inserted within the STYLE attribute of each HTML tag.
Example:
<P Style = "color:#00ff00;
font-family:verdana;"> Hello All </P>
Cascading Style Sheet Selectors:
a) The id selector:
The id selector is used
to specify a style for a single, unique element. The id selector uses the id
attribute of the HTML element, and is defined with a "#".
The style rule below
will be applied to the element with id="txtName":
#txtName
{
text-align:center;
color:red;
}
b) The class selector:
The class selector is used to specify a style for a group
of elements. Unlike the id selector, the class selector is most often used on
several elements. This allows you to set a particular style for many HTML
elements with the same class. The class selector uses the HTML class attribute,
and is defined with a "."
In the example below,
all HTML elements with class="center" will be center-aligned:
.center {text-align:center;}
No comments:
Post a Comment