Cascading Style Sheet/ Style Sheet: A style defines how to display HTML element. A Style specification or style sheet is simply a collection of rules. These rules include a selector –an HTML element, a CLASS name or an ID value- which is bound to a style property such as font-family, followed by a colon and the values for that style property. Multiple style rules may be included in a style specification by separating the rules with semicolon.

property

H1 {

Font-family: Serif, Sans-Serif ;

Font-size : 16pt

}

Adding Style to a Document

Style information may be included in an HTML document in any one of three basic ways:

1) Use an outside style sheet, either by importing it or by linking to it.

2) Embed a document-wide style in the <HEAD> element of the document.

3) Provide an inline style exactly where the style needs to be applied.

External Style Sheets:

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Pros: Can set style for many documents with one style sheet

Cons : Require extra download time for the style sheet, which may delay page rendering.

Document-Wide Style/ Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

Pros: 1) Can control style for a document in one place.

2) No Additional download time for style information.

Cons: Need to reapply style information for other documents.

Inline Style

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Pros: 1) Can control style to a single character instance.

2) Overrides any external or document style.

Cons: 1) Need to reapply style information throughout the document and outside documents

2) Bound too closely to HTML- difficult to update.

· Example of External CSS

First Create the .css (dot css) file with style rule specifications.

Second Link this .css file to the .html file.

For example the code for file “Test.css” is :

body {

font-size:8pt;

background-image : url("images/back40.gif")

}

h1,h2,h3 {

color : blue;

font-style: italic

}

p
{
color : red;
text-align : center;
}

Now here we link the above .css file with the .html file named “StyleExample.html”

<html>

Linking of CSS file

<head>

<title>Style demo</title>

<link rel="stylesheet" type="text/css" href="test.css" />

</head>

<body>

<h1>Devi Ahilya University</h1>

<p> International institute of Professional Studies.

<body>

</html>

· Example of Internal / Document-Wide CSS

<html>

<head>

<title>Style demo</title>

Style rule coding in html file’s <head> Section

<style type="text/css">

body {

font-size : 8pt ;

background-image : url("images/back40.gif")

}

</style>

</head>

<body>

<h1>Devi Ahilya University</h1>

<p> International institute of Professional Studies.

<body>

</html>

==============================================================

· Example of In-line CSS

<html>

In-Line CSS Rule applied directly to the tag

<head>

<title>Style demo</title>

</head>

<body>

<h1>Devi Ahilya University</h1>

<p style = “font-size:8pt; background-image : url(‘images/back40.gif’)”> International institute of Professional Studies.

<body>

</html>

========================================================

Types of CSS selectors

In the previous example, the most basic style of selector was used: an element selector. This defines the visual appearance of the relevant HTML tag. In the sections that follow, we’ll examine some other regularly used (and well-supported) CSS selectors: class, ID, grouped, and contextual.

Class selectors

In some cases, you may wish to modify an element or a group of elements. For instance, you may wish for your general website text to be blue, as in the examples so far, but some portions of it to be red. The simplest way of doing this is by using a class selector. In CSS, a class selector’s name is prefixed by a period (.), like this:

.warningText

{

color: red;

}

This style is applied to HTML elements in any web page the style sheet is attached to using the class attribute, as follows:

<h2 class="warningText">This heading is red.</h2>

<p class="warningText">This text is red.</p>

<p>This is a paragraph, <span class="warningText">and this text is a red</span>.</p>

If you want a make a class specific to a certain element, place the relevant HTML tag before the period in the CSS rule:

p.warningText

{

color: red;

}

If you used this CSS rule with the HTML elements shown previously, the paragraph’s text would remain red, but not the heading or span, due to the warningText class now being exclusively tied to the paragraph selector only.

Usefully, it’s possible to style an element by using multiple class values. This is done by listing multiple values in the class attribute, separated by spaces:

<p class="warningText hugeText">

The previous example’s content would be styled as per the rules .warningText and .hugeText.

ID selectors

ID selectors can be used only once on each web page. In HTML, you apply a unique identifier to an HTML element with the id attribute:

To style this element in CSS, precede the ID name with a hash mark (#):

p #footer

{

padding: 20px;

}

In this case, the footer paragraph would have 20 pixels of padding on all sides. Essentially, then, classes can be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page elements, such as structural divisions, whereas classes are used to define the style for multiple items.

Grouped selectors

Should you wish to set a property value for a number of different selectors, you can use grouped selectors, which take the form of a comma-separated list:

h1, h2, h3, h4, h5, h6 {

color: green;

}

In the preceding example, all the website’s headings have been set to be green. Note that you’re not restricted to a single rule for each element—you can use grouped selectors for common definitions and separate ones for specific property values, as follows:

h1, h2, h3, h4, h5, h6 {

color: green;

}

h1 {

font-size: 1.5em;

}

h2 {

font-size: 1.2em;

}

Contextual selectors

This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors define property values for HTML elements depending on context. Take, for instance, the following example:

<p>I am a paragraph.</p>

<p>So am I.</p>

<div id="navigation">

<p>I am a paragraph within the navigation div.</p>

<p>Another paragraph within the navigation div.</p>

</div>

You can style the page’s paragraphs as a whole and then define some specific values for those within the navigation div by using a standard element selector for the former and a contextual selector for the latter:

p {

color: black;

}

#navigation p {

color: blue;

font-weight: bold;

}

As shown, syntax for contextual selectors (#navigation p) is simple—you just separate the individual selectors with some whitespace. The two rules shown previously have the following result:

The p rule colors the web page’s paragraphs black. The #navigation p rule overrides the p rule for paragraphs within the navigation div, coloring them blue and making them bold. By working with contextual selectors, it’s possible to get very specific with regard to styling things on your website; we’ll be using these selectors regularly.

The CSS box model

In CSS, every element is considered to be within its own box, and you can define the dimensions of the content and then add padding, a border, and a margin to each edge as required, as shown in the following image.

Padding, borders, and margins are added to the set dimensions of the content, so the sum of these elements is the overall space that they take up. For example, a 100-pixel-wide element with 20 pixels of padding will take up an overall width of 140 pixels, not 100 pixels with 20 pixels of padding within.

Note that the top and bottom margins on adjacent elements collapse. For example, if you set the bottom margin to 50px on an element, and set a top margin of 100px on the element below, the margin between the two elements will be 100 pixels, not 150 pixels.

Now there are lots of properties available in CSS, which governs the look of html Tag. Some of them we’ll discuss here. Generally property value are given in some measure, they are:

%: A percentage.

cm: Centimeters.

ex: One ex is, in theory, equal to the font size of the x character of the current element. Most browsers

render ex as half an em.

in: Inches.

mm: Millimeters.

pc: Picas. 1pc = 12pt.

pt: Points. 1pt = 1/72in.

px: Pixels.

Some time property values are given in space separated list. They are interpreted as :

1) A single value (margin:10px;). This is applied to all margins.

2) Two values (margin:10px 20px;). The first setting (10px ) is applied to the top and bottom edges and the second setting (20px) is applied to both the left and right edges (20px each, not in total.)

3) Three values (margin: 10px 20px 30px) The first setting (10px) is applied to the top edge. The second setting (20px) is applied to both the left and right edges. The third setting(30px) is applied to the bottom edge.

4) Four Setting (margin:10px 20px 30px 40px). Setting applied clockwise from the top(top,right,bottom,left.)

Property Name	Values	Description
background		For defining background property values in a single declaration. Values can be any of those from background-attachment, background-color, background-image, background-position, and background-repeat, in any order. Example: background: #ffffff url(background.gif) fixed left repeat-y;
background-position	left top left center left bottom right top right center right bottom center top center center center bottom	This will position’s the background image positions in the element. If you only specify one keyword, the second value will be "center" background-position:left top
background-attachment	scroll/fixed	Determines whether a background image is fixed or scrolls with the page.
background-color	color value e.g. rgb(n,n,n) / #rrggbb	Defines the elements background color.
background-image	url(imagepath)	Set the background image of element.
background-repeat	repeat / repeat-x / repeat-y /no-repeat	Define how the background image repeat itself in the element background. repeat – repeat in both direction (x and y) repeat-x – repeat in only x direction (from left to right) repeat-y – repeat in only y direction (from top to bottom) no-repeat – image will not repeat itself.
border		For defining border property values in a single declaration for all four border. Values can be any of those from border-width, border-style, and border-color. Borders are drawn on top of a box’s background. Example: border: 1px solid #000000;
border-bottom	(e.g.) border-bottom: 1px solid #000000;	Defines the bottom border only with border-width, border-style, and border-color
border-bottom-color	Color	Define the bottom border color.
border-bottom-style	dashed / dotted / double / groove / inset / none / outset / ridge / solid	Creates bottom border with different style.
border-top	(e.g.) border-top: 1px solid #000000;	Defines the top border only with border-width, border-style, and border-color
border-top-color	Color	Define the top border color.
border-top-style	dashed / dotted / double / groove / inset / none / outset / ridge / solid	Creates top border with different style.
border-left	(e.g.) border-bottom: 1px solid #000000;	Defines the left border only with border-width, border-style, and border-color
border-left-color	Color	Define the left border color.
border-left-style	dashed / dotted / double / groove / inset / none / outset / ridge / solid	Creates left border with different style.
border-right	(e.g.) border-bottom: 1px solid #000000;	Defines the right border only with border-width, border-style, and border-color
border-right-color	Color	Define the right border color.
border-right-style	dashed / dotted / double / groove / inset / none / outset / ridge / solid	Creates right border with different style.
margin,margin-left,margin-right,margin-top,margin-bottom	Numeric value (e.g. 2px)	Create margin between border of parent element and element
Padding,padding-left,padding-right,padding-top,padding-bottom	Numeric value (e.g. 2px)	Insert the space padding between content of element and border of element
position	absolute / fixed /relative / static	Determines the positioning method used to render the element’s box: absolute: Element is placed in a specific location outside of normal document flow, using the top, right, bottom, and left properties. fixed: As per absolute, but the element remains stationary when the screen scrolls. Poorly supported by some browsers. relative: Offset from the static position by the values set using top, right, bottom, and left properties. static: The default. The top, right, bottom, and left properties do not affect the element if this value is set. The element is not removed from the document’s normal flow.
text-align	left / center / justify /right	Align the content text in the element.
text-transform	capitalize / lowercase / uppercase / none	Convert the content text of the element to lower case / upper case or capitalize( capitalize the first character of each word). None for normal
z-index	Number(e.g. 1 2 3 4 5 6 etc.)	Changes an element’s position in the stack. Higher numbers are “closer” and lower numbers are “further away.”
Opacity	`filter: alpha(opacity=50); for Internet Explorer` `opacity:0.5;` `for all other browser`	The opacity means “how much transparent is element with parent element”. The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through. For internet explorer we use filter property for opacity. It will take 0-100 as argument value. 0 for full transparent. For all other browser we use opacity property directly with the value range from 0.0 to 1.0.

Visibility, display, top, left, width, height, overflow are also important. Find the difference between visibility and display

Appychip

Friday, 4 November 2011

Cascadind Style Sheet (CSS)

Adding Style to a Document

External Style Sheets:

Document-Wide Style/ Internal Style Sheet

Inline Style

0 comments:

Post a Comment

Popular Posts