0% found this document useful (0 votes)
116 viewsCss Notes
Uploaded by
joeltomy456Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
116 viewsCss Notes
Uploaded by
joeltomy456Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
/ 33
152 Computer Application - 11
They are:
Style sheet (desktop publishing) -a feature of desktop publishing programs
Style sheet (web development) - W3C standards for web page style sheets
such as CSS or XSL.
+ Stylesheet language - computer languages that describe the presentation
of structured documents.
From the above three, the second type is used with HTML and forms
core part of the following sections of this chapter.
45.3. CASCADING STYLES SHEETS
_ Styles Sheets or CSS, is a way to style HTML. Whereas the HTML is the
‘content, the style sheet is the presentation of that document. Cascading style
‘sheets are a new way of formatting your page layout, text, fonts, images, and
almost anything you put on the page. They allow you to position things on your
page down to the exact pixel. Also, if a style is declared in the head section of
‘a page, a change to the style changes the style on the entire page. Here is the
general idea:
Let's say you created a style for a heading tag, . In your style, you set the
“color of your H3 tags to red. Now if you have 10 H3 tags on the page, and
decide you would rather have your headings be blue, you would no longer need
‘to go back and change the font color for each heading. All you have to do is
‘change the style of your H3 tags from the color red to blue. Changing the style
‘once will adjust all of your H3 tags and they will now be all blue instead of
ted, with a lot less work. This gets even better if you use an external style
‘sheet for more than one page.Changing the style properties in the external style
sheet will now adjust every page that uses that style sheet, so you can avoid
editing each page individually to change it!
The same ways as HTML has attributes and value, CSS has properties
and value. The difference lies in the punctuation symbol used between
the above two words. The attributes and the value are separated by an
equal to (=) symbol, the properties and the value by a colon (:)~
15.4. BENEFITS OF CSS
Another of CSS’s boons is that you define things once, making it far
more efficient than defining everything in HTML on every page. This
means:
+ Pages download faster, sometimes by as much as 50%
You have to type less code, and your pages are shorter and neater-
+ ‘The look of your site is kept consistent throughout all the pages that Wo AA
Cascaany
Me Sevte
” om tesa ne 153
mS Updating *¥esheet
198 yo
and errors’ OU" des
s OFS eaunasSSi8M and ge hain
ogra ited se general site maintenance aré made much easier,
Nis Wellauthored gg iggy” Stl" multiple HTML pages occur far ess often
, access Through myriad gays trOves the accessibility of web content, allowing
web users With disabititien Ce (handheld PDAs for example) and ensuing that
tation for browser-specific han’ °° still abl ample) ai
- lack: le to receive it. It also eliminates the need
‘working across alt mk* 8 tags, whi
Ee i voit nn ner, ears You ste has tener chance
jpitially Vaguely intimidatin,
ly important for the fun SS 8 a well-desi ;
fires move avray fron GeO MSD deslon, ant tar beet ane eoeining
il he he as been pivotal in helping
IL tags like
. In your style, you set the
“color of your H3 tags to red. Now if you have 10 H3 tags on the page, and
decide you would rather have your headings be blue, you would no longer need
‘to go back and change the font color for each heading. All you have to do is
‘change the style of your H3 tags from the color red to blue. Changing the style
‘once will adjust all of your H3 tags and they will now be all blue instead of
ted, with a lot less work. This gets even better if you use an external style
‘sheet for more than one page.Changing the style properties in the external style
sheet will now adjust every page that uses that style sheet, so you can avoid
editing each page individually to change it!
The same ways as HTML has attributes and value, CSS has properties
and value. The difference lies in the punctuation symbol used between
the above two words. The attributes and the value are separated by an
equal to (=) symbol, the properties and the value by a colon (:)~
15.4. BENEFITS OF CSS
Another of CSS’s boons is that you define things once, making it far
more efficient than defining everything in HTML on every page. This
means:
+ Pages download faster, sometimes by as much as 50%
You have to type less code, and your pages are shorter and neater-
+ ‘The look of your site is kept consistent throughout all the pages that Wo AA
Cascaany
Me Sevte
” om tesa ne 153
mS Updating *¥esheet
198 yo
and errors’ OU" des
s OFS eaunasSSi8M and ge hain
ogra ited se general site maintenance aré made much easier,
Nis Wellauthored gg iggy” Stl" multiple HTML pages occur far ess often
, access Through myriad gays trOves the accessibility of web content, allowing
web users With disabititien Ce (handheld PDAs for example) and ensuing that
tation for browser-specific han’ °° still abl ample) ai
- lack: le to receive it. It also eliminates the need
‘working across alt mk* 8 tags, whi
Ee i voit nn ner, ears You ste has tener chance
jpitially Vaguely intimidatin,
ly important for the fun SS 8 a well-desi ;
fires move avray fron GeO MSD deslon, ant tar beet ane eoeining
il he he as been pivotal in helping
IL tags like <$1). CSS1 is a simple style sheet mechanism that allows authors and readers
style (e.g. fonts, colors and spacing) to HTML documents. The CSS1
is human readable and writable, and expresses style in common
publishing terminology. ) and » CSS-2 (CSS2 is a style sheet language
s authors and users to attach style (e.g., fonts, spacing, and aural cues)
nictured documents (e.g., HTML documents and XML applications). By
the presentation style of documents from the content of documents,
implifies Web authoring and site maintenance.), in 96 and ’98
‘These standards work the same as new HTML standards do, with
ures added in each subsequent drat.
egan to support stylesheets properly at the version 4 mark. IE3 had
understanding, NN 4.7 is very glitchy, but most versions of »
and are now coming close to full compatibility of the first of
s, though many bugs in its implementation still remain.
are gradually becoming supported properly, particularly in
fox, » Mozilla, » Opera and »
use at the ter Application » IT
15.4 Compu
‘ been designed to
without it (a feature called graceful degradation). CSS has
make this easy to accomplish.
15.6.IMPLEMENTATION
CSS files are termed “cascading” stylesheets because of tw ipa
‘one stylesheet can cascade, or have influence Over multiple pages.
Similarly, many CSS files can define a single page.
There are 3 ways to implement CSS commands into your site:
+ Use one CSS file for all your pages. This is the best way to doit.
Integrate CSS commands into the head of each of your documents.
Use the style attribute to put CSS code directly into a HTML element.
CSS allows you to use all three of these methods in glorious tandem,
inheriting and overriding values as you go.
15.7. HOW TO ADD A STYLE SHEET TO YOUR PAGE?
The first way to add a style to you page is to simply declare it inside an HTML
tag. The way to do this is to add the attribute named style with its respective
value after equal to symbol inside an html tag. The general form to add one
style property looks like this:
[_style="property : value”
To help clarify this, let’s look at an example. If. you want the color of some text
to look red, the style attribute would look like this:
style="color:red”
The style sheet property is “color”. The value of the color is “red”. Notice there
is a colon in between color and red, not an equal sign, and there are no extra
quote marks.
Now, you just insert this into an HTML tag, such as the tag. DIV is just
a division on a page. Remember to close the tag when you are through or you
will have more red text than you bargained for! Here is the sample code:
[_ADW style=*colorred">Wow, | am totally redi
This will give you the following output in the browser
Wow, | am totally red! 18.7
Cascading siyte Sheets
ice the dot that comes right before the
that this is a class definition and
1 same way we did before.
The name of our class is “redfont”. Nov
Name of the class. This notifies the browser
Not a tag definition. After that, we define the style the
So, if you want to declare one class that giv
gives you a green font, you would type the following:
es you a red font, and another that
Okay, now that we have our classes set up, we need to see how to use them
later on in the body section of the page. To use your class, all you need to do is
add the class=” “ attribute to the tag you wish to have the style of your class.
So, if you wanted a line of text to be red, you could add the class attribute to a
tag, like this:
| am red, so I'm
ee
#redfont { color:red } ima Computer Application - 11
Ygreentont { color:green }
STYLE>
HE
Nib ait tli i
And when you wish to use the ID later, use the ID=" * attr
[-I am green, so there. tags, If
you would like this effect to work across multiple pages, then you will want to
use an external style sheet, Well, suppose you would like to be able to use one
group of styles- but you want to use them on many pages at once
Open your text editor and create a new blank document. Now, type in just the
following information:
DIV { font-family:/Arial }
tedfont { color:red }
Now, save the file as “stylel.css” (You can use any name you wish, just
be sure you have the .css extention at the end).
= “stylesheet”
= "text/css”
eR 18.10 Computer Application = 1
all, for all output devices.
15.11. THE BOX PROPERTIES
45.11.1. WIDTH PROPERTY
The width property lets you define a width for a section of your page, such as
‘a few sentences of text. If you set the width at 100 pixels, the text will wrap to
the next line when it gets to a length of 100 pixels, much like a table
IDIV>
This section of text willbe 100 pixels lon
This will give you the following:
This section of text will be 100 pixels long
15.11.2, HEIGHT PROPERTY
The height property lets you give a section a specific height. If you set the
height at 100 pixels, it should cut off the text after reaching a vertical length of
100 pixels, right? Well, it does....but you won’t see it because by default
everything is visible......
| This will
have a
height
of
100
pixels.
Here you have the height set at 100, but even with all the line breaks,
everything still shows up without a cut off:
15.11.3. OVERFLOW PROPERTY
aa 2 a property that lets us change what happens when something goes
‘yond our set width and height. The possible values are auto, scroll, hidde*
and visible. | am goin; e : w
tes ig to set it to “hidden”, i beyond
100 pixel cut off does not show up: ce nae
tag. DIV is just
a division on a page. Remember to close the tag when you are through or you
will have more red text than you bargained for! Here is the sample code:
[_ADW style=*colorred">Wow, | am totally redi
This will give you the following output in the browser
Wow, | am totally red! 18.7
Cascading siyte Sheets
ice the dot that comes right before the
that this is a class definition and
1 same way we did before.
The name of our class is “redfont”. Nov
Name of the class. This notifies the browser
Not a tag definition. After that, we define the style the
So, if you want to declare one class that giv
gives you a green font, you would type the following:
es you a red font, and another that
Okay, now that we have our classes set up, we need to see how to use them
later on in the body section of the page. To use your class, all you need to do is
add the class=” “ attribute to the tag you wish to have the style of your class.
So, if you wanted a line of text to be red, you could add the class attribute to a
tag, like this:
| am red, so I'm
ee
#redfont { color:red } ima Computer Application - 11
Ygreentont { color:green }
STYLE>
HE
Nib ait tli i
And when you wish to use the ID later, use the ID=" * attr
[-
I am green, so there.
tags, If
you would like this effect to work across multiple pages, then you will want to
use an external style sheet, Well, suppose you would like to be able to use one
group of styles- but you want to use them on many pages at once
Open your text editor and create a new blank document. Now, type in just the
following information:
DIV { font-family:/Arial }
tedfont { color:red }
Now, save the file as “stylel.css” (You can use any name you wish, just
be sure you have the .css extention at the end).
= “stylesheet”
= "text/css”
eR 18.10 Computer Application = 1
all, for all output devices.
15.11. THE BOX PROPERTIES
45.11.1. WIDTH PROPERTY
The width property lets you define a width for a section of your page, such as
‘a few sentences of text. If you set the width at 100 pixels, the text will wrap to
the next line when it gets to a length of 100 pixels, much like a table
IDIV>
This section of text willbe 100 pixels lon
This will give you the following:
This section of text will be 100 pixels long
15.11.2, HEIGHT PROPERTY
The height property lets you give a section a specific height. If you set the
height at 100 pixels, it should cut off the text after reaching a vertical length of
100 pixels, right? Well, it does....but you won’t see it because by default
everything is visible......
|
This will
have a
height
of 100
pixels.
Here you have the height set at 100, but even with all the line breaks,
everything still shows up without a cut off:
15.11.3. OVERFLOW PROPERTY
aa 2 a property that lets us change what happens when something goes
‘yond our set width and height. The possible values are auto, scroll, hidde*
and visible. | am goin; e : w
tes ig to set it to “hidden”, i beyond
100 pixel cut off does not show up: ce nae
have a
height
of 100
pixels.
