|
Home
|
Sign up!
|
Projects
|
Seminars
|
Research Notes
|
Today's Lecture
|
About
|
Update Seminar Form
Course:
Seminar Topic:
Seminar Description:
Rachit Bhatia and I presented a seminar on CSS (Cascading Style Sheets). These are few of the dimensions on this topic that we had covered during the seminar.
What do they do?
Cascading Style Sheets are a way to separate the presentation from the structure of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast , while controlling the appearance of the content. Cascading Style Sheets are the next stage in web design, after you have a good grasp of HTML.
Benefits of CSS
CSS allows you to update or modify the appearance of your website by changing just one single file! With CSS, you can : oSimplify site maintenance and retain consistent look and feel throughout the site oLightweight designs. Style sheets most often decrease the content size compared to images or Flash oRichness. CSS provides webmasters with a rich set of rendering effects, thus increasing the richness of the Web as a medium of expression
A rule consists of two parts - selector and decleration
Selector - the part before the left curly brace The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration.
Declaration - the part within the curly braces The declaration is that part of the rule that sets forth what the effect will be. If the selector is h1 and the declaration is "color: green." Hence all h1 elements will be turned green.
Multiple Style declerations
Multiple style declarations for a single selector are separated by a semicolon: selector { property1: value1; property2: value2; }
H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue }
Setting styles for Hyperlinks
Styles can be assigned to the A element to display links, visited links and active links differently. Here is an example of the styles. ... a:link { color: red } a:active { color: blue; font-size: 125% } a:visited { color: green; font-size: 85% }
Hor to add a style to your site?
There are three major ways that you can add a style to your site. These are :: inline - in the body of the code- this overrides all other styles. Head - added to the head of the page, easy to find and modify Separate page - For website where the same style is used over many pages.
Span and Div - how to actually place your style on the web.
Using a style to cover individual words. (3) For this use the SPAN selector. In the body just bracket the words with
and
Use a style to cover blocks of text. (4) For this use the DIV selector. In the body just bracket the text with
and
Then we showed with various examples to
Set the background color
Set an image as the background
How to repeat a background image vertically
How to repeat a background image horizontally
How to place the background image
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration
Set the color of the text
Specify the space between characters
Align the text
Decorate the text
Indent text
Set the font of a text
Set the size of the font
Set the style of the font
Set the variant of the font
Set the boldness of the font
Demerits of CSS
Cascading Style Sheets have still not come into widespread use, but misuse of CSS has already begun. Style sheets, when used properly, can be an effective tool for providing a unique and attractive presentation . However, as soon as a page's message becomes dependent on the style sheet, the page has become a failure on the Web. One common hack that has appeared in various places is that of the "drop shadow." This is created by using negative margins, and involves a large amount of dependence on the style sheet. When the style sheet is removed, either at the user's discretion or by using a browser that does not support CSS, the page is often unusable.Thus style sheet designers should make sure that their web page is not totally dependent on CSS.
Your Password:
Prof. Ashay Dharwadker