Introduction to CSS
q CSS
stands for Cascading Style Sheets
q CSS
is intended to separate design from content
q Styles
define how to display HTML elements
q CSS
is an excellent addition to plain HTML
q Styles
are normally stored in Style Sheets
q Styles
were added to HTML 4.0 to solve a problem
q External
Style Sheets can save you a lot of work
q External
Style Sheets are stored in CSS files
q Multiple
style definitions will cascade into one
q With
plain HTML you define the colors and sizes of text and tables throughout your
pages. If you want to change a certain element you will therefore have to work
your way through the document and change it.
q With
CSS you define the colors and sizes in "styles". Then as you write
your documents you refer to the styles. Therefore: if you change a certain
style it will change the look of your entire site.
q Another
big advantage is that CSS offers much more detailed attributes than plain HTML
for defining the look and feel of your site.
q Finally,
CSS can be written so the user will only need to download it once - in the
external style sheet document. When surfing the rest of your site the CSS will
be cached on the users computer, and therefore speed up the loading time.
CSS Example
q Classic HTML :
<HTML>
<BODY>
<H1>This is header 1.</H1>
<H2>This is header blue.</H2>
<P>This paragraph has left margin</P>
</BODY>
</HTML>
</HTML>
q With CSS
:
<HTML>
<HEAD>
<LINK
rel=“stylesheet” type=“text/css” href="mystyle.css" />
</HEAD>
<BODY>
<H1>This is
header 1.</H1>
<H2>This is
header blue.</H1>
<P>This
paragraph has left margin</P>
</BODY>
</HTML>
Advantages of CSS
q define
the look of your pages in one place rather than repeating yourself over and
over again throughout your site.
q easily
change the look of your pages even after they're created. Since the styles
are defined in one place you can change the look of the entire site at once.
q define
font sizes and similar attributes with the same accuracy as you have with a
word processor.
q position
the content of your pages with pixel precision.
q redefine
entire HTML tags. Say for example, if you wanted the bold tag to be red
using a special font.
q define
customized styles for links - such as getting rid of the underline.
q define
layers that can be positioned on top of each other.
q pages
will load faster since they aren't filled with tags that define the look.
syntax :-
q The
CSS syntax is made up of three parts: a selector, a property and a value :
selector {property: value}
q Selector
is the HTML tag to define.
q Property
is the attribute to change.
q Property
& Value are separated by colon and surrounded by curly braces.
q If
value is of multiple words, put quotes around the value.
q If
more than one property is to be specified, separate each with semicolon. For
eg.
p
{
text-align:center;
color:red
}
0 comments:
Post a Comment