Unit II- Web technologies (Style Sheets: CSS ) P.R.Engineering college

Unit II- Web technologies (Style Sheets: CSS ) in Web technology - Subject uploaded at P.R.Engineering college

Unit II- Web technologies (Style Sheets: CSS ) in Web technology - Subject at P.R.Engineering college P.R.Engineering college Staff uploaded in lecturenotes.net

Summary / document preview text:

UNIT II 
Style Sheets: CSS
Introduction to Cascading Style Sheets 
Cascading Style Sheets (CSS) is a slightly misleading term, since a website might have only 
one CSS file (style sheet), or the CSS might be embedded within an HTML file. 
It is better to think of CSS as a technology (in the singular). CSS is comprised of statements 
that control the styling of HTML documents. Simply put, an HTML document should convey 
content. 
A CSS document should control the styling of that content. <div align="center"></div> 
<img src="this.gif" border="0" alt=""> <table height="200">... <td width="30"></td> All these examples can easily be replaced with CSS. Don't worry if you don't 
understand these declarations yet. div {text-align: center;} img {border: 0 none;} 
table {height: 200px;} td {width: 30px;} An HTML file points to one or more external 
style sheets (or in some cases a list of declarations embedded within the head of the HTML file) 
which then controls the style of the HTML document. These style declarations are called CSS rules.
Features :-
The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but 
it became a hot topic for a while because not all browsers supported it. 
However, trends change quickly in technology and all browser makers currently are 
implementing complete CSS 3 support. 
Making that process easier for the browser manufacturers is CSS 3's modularized specification, 
which allows them to provide support for modules incrementally without having to perform major 
refactoring of the browsers' codebases. 
The modularization concept not only makes the process of approving individual CSS 3 modules 
easier and faster, but it also makes documenting the spec easier. Eventually, CSS 3 -- along with HTML5 
-- are going to be the future of the web. 
You should begin making your Web pages compatible with these latest specifications. In this 
article, I explore 10 of the exciting new features in CSS 3, which is going to change the way developers 
who used CSS2 build websites.Some of the features are: 
o CSS Text Shadow 
o CSS Selectors 
o CSS Rounded Corners 
o CSS Border Image 2
Core Syntax 
At-Rules 
As we learned when we studied CSS statements, there are two types of statements. The most 
common is the rule-sets statement, and the other is the at-rules statement. As opposed to rule sets, atrules statements consist of three things: the at-keyword, @, an identifier, and a declaration. This 
declaration is defined as all content contained within a set of curly braces, or by all content up until 
the next semicolon. 
@import 
Perhaps the most commonly used of the at-rules, @import, is used to import an external style 
sheet into a document. It can be used to replace the LINK element, and serves the same function, 
except that imported style sheets have a lower weight (due to having less proximity) than linked style 
sheets. <style type="text/css" media="screen"> @import url(imported.css); 
</style> @import url(addonstyles.css); @import "addonstyles.css"; Relative and 
absolute URLs are allowed, but only one is allowed per instance of @import. One or more commaseparated target media may be used here. 
@charset 
@charset is used to specify the character encoding of a document, and must appear no more 
than once. It must be the very first declaration in the external style sheet, and cannot appear in 
embedded style sheets. @charset is used by XML documents to define a character set. @charset 
"utf-8"; 
@namespace 
The @namespace rule allows the declaration of a namespace prefix to be used by selectors in 
a style sheet. If the optional namespace prefix is omitted, then the URL provided becomes the default 
namespace. Any @namespace rules in a style sheet must come after all @import and @charset atrules, and come before all CSS rule-sets. @namespace foo url("http://www.example.com/"); 
@namespace can be used together with the new CSS3 selectors (see below). It defines which XML 
namespace to use in the CSS. If the XML document doesn't have matching XML namespace 
information, the CSS is ignored. 
@font-face 
CSS1 Selectors3
Selectors refer to elements in an HTML document tree. Using CSS, they are pattern-matched 
in order to apply styles to those elements. A selector consists of one or more elements, classes, or 
IDs, and may also contain pseudo-elements and/or pseudo-classes. 
Type Selector 
The type selector is the simplest selector of all, and matches all occurrences of an element. In 
this example, all <p> tags throughout the document will have the following style applied, unless 
overridden. p {color: #666;} 
Universal Selector 
The universal selector, used alone, matches all elements in the document tree, and thus will 
apply styles to all elements. It is in effect a wildcard. * {margin: 0; padding: 0;} In this 
example, all tags are reset to have no padding or margin. This, by the way, is a practice to gain 
control over all the default padding and margin inherent in the way User Agents (UAs) display 
HTML. 
Class Selector 
The class selector matches a classname. .largeFont {font-size: 1.5em;} 
h3.cartHeader {text-align: center;} The "largeFont" class will apply to all elements into 
which it is called. The "cartHeader" class will only function as styled if called into an H3 element. 
This is useful if you have another "cartHeader" declaration that you wish to override in the context of 
an H3 element, or if you wish to enforce the placement of this class. Powered by 
ID Selector 
The ID selector matches an ID. IDs are identifiers unique to a page. They bear a resemblance 
to classes, but are used a bit differently. IDs will be treated more fully below. The first two ID 
examples below refer to sections of a web page, while the last refers to a specific occurrence of an 
item, say, an image in a DHTML menu. IDs have a higher specificity than classes. #header 
{height: 100px;} #footer {color: #F00;} #xyz123 {font-size: 9px;}
Descendant Selector 
A selector can itself be a chain of one or more selectors, and is thus sometimes called a 
compound selector. The descendant selector is the only compound selector in CSS1, and consists of 
two or more selectors and one or more white space combinators. In the example below, the white 
space between the H1 and EM elements is the descendant combinator. 
In other words, white space conveys a hierarchy. (If a comma were to have intervened 
instead, it would mean that we were styling H1 and EM elements alike.) Selectors using combinators 
are used for more precise drill-down to specific points within the document tree. In this example 
<em> tags will have the color red applied to them if they are within an <h1> tag. h1 em {color: 
#F00;} Note that EM elements do not have to be immediately inside an H1 heading, that is, they do 
not have to be children, but merely descendants of their ancestor. The previous style would apply to 4
an EM element in either of the following statements. <h1>This is a <em>main</em> 
heading</h1> <h1>This is <strong>another <em>main</em> heading</strong></h1> 
STYLE SHEETS AND HTML STYLE RULE 
To apply a style, CSS uses the HTML document tree to match an element, attribute, or value 
in an HTML file. For an HTML page to properly use CSS, it should be well-formed and valid, and 
possess a valid doctype. 
If these conditions are not met the CSS match may not yield the desired results.There are two 
types of CSS statements: rule-sets and at-rules. 
A rule set, also known simply as a rule, is the more common statement, and consists of a 
selector and a declaration block, sometimes simply called a block. The selector can be an element, 
class, or ID, and may include combinators, pseudo-elements, or pseudo-classes. Statement Type 1: 
Rules Sets (Rules) statement + statement block X {declaration; declaration;} X {property; value; 
property: value;} div > p {font-size: 1em; color #333;} Statement Type 2: At-Rules at-keyword + 
identifier + declaration @import "subs.css"; 
Properties 
I have decided not to include a description of all CSS1 and CSS2.1 Properties (such as fontsize, text-transform, border, margin, and many others) because they are numerous and can be 
examined in the Property References section of this site. Moreover, they are used throughout this 
tutorial and can be easily deduced. So we move directly to CSS1 selectors.
STYLE RULE CASCADING AND INHERITANCE:-
CSS are probably wondering what exactly cascades about cascading style sheets. In this 
section we look at the idea of cascading, and a related idea, that of inheritance. 
Both are important underlying concepts that you will need to grasp, and understand the 
difference between, in order to work properly with style sheets. 
Rule Cascade 
A single style sheet associated with one or more web pages is valuable, but in quite a limited 
way. For small sites, the single style sheet is sufficient, but for larger sites, especially sites managed 
by more than one person (perhaps several teams who may never communicate) single style sheets 
don't provide the ability to share common styles, and extend these styles where necessary. This can 
be a significant limitation.
Cascading style sheets are unlike the style sheets you might have worked with using word 
processors, because they can be linked together to create a hierarchy of related style sheets. 
Managing style at large sites using @import Imagine how the web site for a large organization, say a 
corporation, might be structured. As sites grow in complexity, individual divisions, departments, and 
workgroups become more responsible for their own section of a site. We can already see a potential 
problem - how do we ensure a consistent look and feel across the whole site?A dedicated web 
development team can ensure that a style guide is adhered to. 
Specificity 5
Get browser support information for specificity in the downloadable version of this guide or 
our browser support tables.At this point it might be timely to have a quick discussion of specificity. 
Both inside a single style sheet, and in a cascade of style sheets, it should be clear that more than one 
rule can apply to the same element. What happens when two properties in separate rules which both 
apply to an element contradict one another? Obviously they can't both apply (the text of an element 
can't be both red and blue, for example). CSS provides a mechanism for resolving these conflicts, 
called specificity. Some selectors are more specific than others. For example, the class and ID 
selectors are more specific than simple HTML element selectors. When two rules select the same 
element and the properties contradict one another, the rule with the more specific selector takes 
precedence. Specificity for selectors is a little involved. Without going into the full detail, most 
situations can be resolved with the following rules. 
1. ID selectors are more specific than other selectors 
2. Class selectors are more specific than HTML element selectors, and other selectors such as 
contextual, pseudo class and pseudo element selectors. 
3. Contextual selectors, and other selectors involving more than one HTML element selector 
are more specific than a single element selector (and for two multiple element selectors, the one with 
more elements is more specific than the one with fewer.) 
Style Inheritance 
Any HTML page comprises a number of (perhaps a large number of) elements - headings, 
paragraphs, lists, and so on. Often, developers use the term "tag" to refer to an elemen

Title:
Unit II- Web technologies (Style Sheets: CSS )

Subject:
Web technology - Subject

Institute:
P.R.Engineering college

Unit II- Web technologies (Style Sheets: CSS ) P.R.Engineering college

Unit II- Web technologies (Style Sheets: CSS ) in Web technology - Subject uploaded at P.R.Engineering college

Summary / document preview text:

Modal

Are you sure to delete this information ?