Scribd
Upload
114 views

Css Notes

Uploaded by

joeltomy456
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
114 views

Css Notes

Uploaded by

joeltomy456
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 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 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: