CSS3
Cascading Style Sheets Level 3 is known as CSS3 for short. Cascading Style Sheets level 3 is the most recent approach of CSS which has a modularized approach which helps to differentiate the connections between the different parts of the specification and also helps in attaining a systematic approach with more flexibility.
The popularity of Cascading Style Sheets Level 3 is because of its modularized capability which gives greater flexibility. That is in other words the Cascading Style Sheets Level 3 has the capability of building of specific tests on a per module basis. By this modularized capability users or developers can develop and maintain the system very easily as it allows to update individual modules and test the particular module and then integrate and test it on whole as and when needed thus making development and maintenance easier .Thus to support the modularized capability of Cascading Style Sheets Level 3 each of the module of Cascading Style Sheets Level 3 modules have syntax, grammar and so on.
Thus having got a brief idea on what a Cascading Style Sheets Level 3 is let us see in this section the reasons for the popularity of Cascading Style Sheets Level 3 and also the features of Cascading Style Sheets Level 3.
Thus the popularity of Cascading Style Sheets Level 3 is because Of the introduction of modules that is modularized approach which gives the following benefits namely:
Completion Time is Faster:
This is because the specification to be completed are finished and checked in modules and thus making completion time faster and also added to it easier.
Flexibility:
The modularized approach helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system.
Easier Maintenance:
By making updation and changes only to the individual modules needed and testing of the individual modules and then integrating with the total system the maintenance part becomes very simple.
There are many features of Cascading Style Sheets Level 3 which gives its powerfulness. Having got an idea about Cascading Style Sheets Level 3 let us see some of the important features of it which adds to its powerfulness.
· Selectors
· Multi-Column Layout
· Text Effects and Layout
· Paged Media and Generated Content
· First-Letter and First-Line Pseudo-Classes
· Ruby
Let us see about each of the feature mentioned above in brief and a detailed approach of each would be seen in coming sections.
Selectors:
This feature of Cascading Style Sheets Level 3 helps the developer to select specific levels of the document and work with it. Also added to this is this feature browsers support the feature of advanced Cascading Style Sheets Level 3 Selectors and thus making CSS3 more popular.
Multi-Column Layout:
As the name suggests using this property Cascading Style Sheets Level 3 the designers and users can output their content in multiple columns along with definitions for each column like column-width, column-count and so on.
Text Effects and Layout:
More features and options are available in Cascading Style Sheets Level 3 for layout and display of text with effects as per the user needs like justification of text in documents, hyphenation and many more. We will see in detail in coming sections how to handle all these features.
Paged Media and Generated Content:
Using this feature of Cascading Style Sheets Level 3 one can have page numbers, headers, footers for page added and many more. There are also many options in this feature to handle printing of pages as needed.
First-Letter and First-Line Pseudo-Classes:
The first-line pseudo-element describes the first formatted line of an element and this can be attached to all elements of Cascading Style Sheets Level 3. The first-letter pseudo-element describes the first formatted letter of an element and this also can be attached to all elements of Cascading Style Sheets Level 3.
The method of applying this property with examples and the explanations will be seen in coming sections.
Ruby:
This is very important feature of Cascading Style Sheets Level 3 by using which programmers can add annotations on top or next to words wherever needed thus making the difficult part of text more meaningful to users.
Thus on the whole Cascading Style Sheets Level 3 proves to be a powerful tool for Web designers and thus gaining its popularity.
CSS3 Selectors
The main usage of Cascading Style Sheets selectors is that it is used for binding style properties to elements in the document. The Cascading Style Sheets Level 3 selectors are compatible with many modern browsers thus making its usage more powerful and popular. In general a CSS selector is made up of a pattern that is matched against all elements in the document tree.
That is to explain in brief a pattern has set of conditions placed in it and when all conditions in the pattern are satisfied or in other words returns true value then selector is applied which means the declarations placed within the rule are applied to the element or elements that match.
That is in general the selectors take the following notation namely:
expression element ? boolean
The above means that the specification placed defines whether that element matches the selector. A set of elements or a single element from the set of elements can be selected by means of expressions defined as above and these expressions gets applied across all the elements in a sub tree.
First one must know the basic categories of selectors before going in detail.
In broad there are two basic categories of selectors. They are namely:
· simple
· combined
Let us see what each of these means:
Simple Selector:
A simple selector consists of either a type selector which is denoted by pattern E and thereby matches any E element or the universal selector which is denoted by pattern * and thereby matches all element in the document followed by zero or more attribute selectors which represents a pattern denoted as E[attr] thereby matching any E element that has an attr attribute, regardless of its value, ID selectors denoted by pattern #footer and there by matches any element with an id equal to footer, or pseudo-classes.
Combined Selector:
The combined selector is also called as contextual selector and this contains two or more simple selectors separated by a combinator.
The Cascading Style Sheets Level 2 also had selectors feature in it. There are some differences and some new features that are implemented in the Cascading Style Sheets Level 3. Let us see some of them namely:
Definition:
In Cascading Style Sheets Level 3 the definitions that we defined above for simple and combined selectors and many more has been redefined. That is in other words let us see how the simple selector is represented in Cascading Style Sheets Level 3.In Cascading Style Sheets Level 3 simple selector is defined as sequence of simple selectors. Like that there is change in all definition which we will see in coming sections as we define each module in detail.
Introduction of optional namespace component:
Introduction and Usage of an optional namespace component which is allowed for specification of an element type in Cascading Style Sheets Level 3. We know that type selector matches every instance of a particular element type that is in other words has a pattern denoted by pattern E and thereby matches any E element. Also a universal selector is denoted by pattern * and matches all element in the document. This new optional component usage namely the optional namespace component of Cascading Style Sheets Level 3 can be used with any of these type element selectors or the universal selector and attribute selectors.
Introduction of new combinator:
Combinators in general are used to separate the two or more simple selectors that make up a combined. There is a new combinator introduced in CSS3 namely the Indirect Adjacent combinator. Detailed explanation of types of combinators available along with the usage, syntax with the explanation in detail on the new combinator also will be made in coming sections.
Substring matching attribute selectors:
This new concept of Substring matching attribute selectors in Cascading Style Sheets Level 3 helps developers to match substrings in the value of an attribute.
New pseudo-classes:
The new pseudo-classes in Cascading Style Sheets Level 3 like :target pseudo-class helps to link a certain element within the document. There are many new pseudo-classes in Cascading Style Sheets Level 3 like the above .To mention some more are namely like :enabled and :disabled pseudo-classes which helps programmers to control the appearance of user interface elements like whether enabled or disabled as needed by them. There are still a lot more new pseudo-classes in Cascading Style Sheets Level 3 which all will be dealt in detail in coming sections.
New pseudo-elements:
The new pseudo-elements in Cascading Style Sheets Level 3 like ::selection pseudo-element helps to control the way a selected text would appear like color or any properties. Here we can note that a special notation namely "::" has been used in Cascading Style Sheets Level 3.
Modularization of Selectors:
As we have seen in our earlier section the modularization is the major concept of Cascading Style Sheets Level 3 which adds to its powerful ability. The selectors concept of Cascading Style Sheets Level 3 is also a CSS3 Module and thereby becomes an independent specification for handling.
CSS3 Multi-Column Feature
CSS3 Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages there is no need to for users to scroll up and down while reading the text from one column to the next column,
it prevents the need for horizontal scrolling, wraps text user friendly and easier to read without making too short words or lines and most of all everything could be embedded in a single page making it comfortable and economical. This feature is supported by most of the famous and commonly used browsers like Mozilla and Firefox.
Need of Multi-Column:
When one compares vertical space and horizontal space the vertical space is expensive whereas in contrast the horizontal spacing proves to be cheaper and thus the need for these increases. In a screen or window which has fixed layout achieving horizontal spacing is easier but this lacks the dynamic ability of line-length maintenance. In printing media it is very essential to maintain the ideal line length defined and they do this by having the text spread across columns. To achieve the above feature in web design media the multi-column module of CSS3 gives a dynamic and good advantage for users. It helps designers to specify the number of columns an element should be spread across, the style of columns, width and so on. The formatting of text is taken care by the browser automatically. The multi column format supported by CSS3 is represented below to get a clear idea on this concept. That is for instance to have the format as below:
The first format represents a simple normal CSS box layout format and this would be achieved by using the div tag as all would be aware of as below:
<div id="xxx">
<p>....</p>
<p>....</p>
..............
</div>
The second format shown above represents a CSS3 multi column format and this would be achieved by using the #entry as below:
#entry
{
column count:number;
}
The representation is of CSS3 normal CSS layout and CSS3 multi column shown below:
The second format as shown above denotes CSS3 multi column module format.
The multi column module feature of CSS3 is thus a specification of CSS3 proposed by the W3C standard and is accepted universally. As the name suggests using this property Cascading Style Sheets Level 3 the designers and users can output their content in multiple columns along with definitions for each column like column-width, column-count and so on. The above feature of Multi-column layouts of CSS3 helps users - web designers, publishers, authors, newspapers and magazine printers to use the web media in a extensive and useful format as per their needs in a elaborate and efficient manner. In this context it is vital to know that the first browser implementation of the multi column module feature of CSS3 Module was done by Mozilla. It is also found that splitting of elements into columns is also possible by JavaScript and thus enabling implementation of the CSS3 Multi-Column module.
Properties Associated with CSS3 Multi-Column Feature:
The attributes or properties associated with CSS3 multi-column feature are as given below:
· column-width
· column-count
· column-rule
· column-gap
Let us see what each of this denotes in brief:
Column-width:
The column-width property of CSS3 denotes the width of columns within the element.
The general format of using column-width property is as below:
Value: <length> | auto
The column-width gets applied to block-level elements in CSS. In the above the value is that is length is denoted and given as pixels.
For example a user can denote column width property as 600 pixels by using the format as denoted below:
body { column-width: 600px; }
column-count:
As the name implies the column-count property denotes the number of columns. These are the number of columns into which the content of the element gets into.
The general format of using column-count property is as below:
Value: <integer> | auto
In the above the integer can be any number from 1,2,... as denoted by user. User can also denote the column count as auto which provides room for as many columns as there are in the specification or usage. The column count gets applied to block-level elements in CSS.
For example a user can denote column count as integer 2 by using the format as denoted below:
body { column-count: 2 }
column-rule:
The border width column-rule property of CSS3 depicts the border rule, border style and border color that is represented between columns. In this case one need not separately mention by the name as column-rule-color, column-rule-style and column-rule-width but instead can denote as column-rule and give the values for border width, border style and border color separated. That is the general syntax for column-rule property of CSS3 is shown below. The column rule property also like column count and column width properties gets applied to block-level elements in CSS.
The general format of using column-rule property is:
Value: [ <'border-width'> || <'border-style'> || <color> ]
The border-style that could be used are 'dotted', 'ridge', 'groove' and 'dashed' styles.
For example let us see an example which used all the three properties of CSS# defined above column-width, column-count and column-rule denoted in a single example. That is a user can denote a column count as integer 2 with column width as 20pixels and border-width as 2pixels with border-style as solid ad color used as #697 by using the format as denoted below:
body { column-count:2; column-width: 20px; column-rule: 2px solid #697; }
column-gap:
The user can set the padding between columns using the property of column-gap of CSS3.The column gap is thus always a positive integer. There is association between column rule property of CSS3 we have seen above and column gap property of CSS3.That is if column rule property is defined between columns then column gap defined by the user gets applied for half on each side of the column rule. If there is no column rule defined and only column gap defined by the user then the column gap property of CSS3 defined by the user depicts the distance between columns.
The general format of using column-gap property is as below:
Value: <length>
The length denoted by the column gap in above is always a positive integer ands must always be denoted in pixels.
For example a user can denote column gap as integer 20 pixels by using the format as denoted below:
body { column-count: 3; column-gap:20px; }
In the above there is no column rule defined and only column-gap property is defined which means the 20 pixels is the distance between each column.
For example let us see another instance
body { column-count:3; column-rule: 2px solid #697; column-gap: 20px;}
In the second example as above the column rule property as well as column gap property is defined. So in this case the 20 pixels of column gap defined get applied as half on each side of the column rule that is 10 pixels on each side of the column rule.
Ways of Implementing Multi Column Feature of CSS3:
Having seen the importance and the properties associated with Multi Column Feature of CSS3 in detail let us see the ways of Implementing Multi Column Feature of CSS3 in brief. This is done by using the properties of CSS3 defined above column-count, column-rule, column-width and column-gap within the tags <body>, <div>,<p> and so on. Let us see how to do in an orderly and evenly manner.
· The first step is to decide and define the number of columns required in the column-count property of CSS3.For instance as explained before to define 3 columns the column-count attribute of CSS3 is defined as 3 as below:
body { column-count : 3 }
As explained before in our previous section if auto is specified then the number of columns defined is determined or calculated automatically.
· The second step is to define the width of columns by using the column-width property of CSS3.For instance as explained before to define 20 pixels for columns width the column-width attribute of CSS3 is defined as 20pixels as below:
body { column-width : 20px }
Column Width Representation:
As explained before if auto is specified then the width of columns defined is determined or calculated automatically.
Thus there is lot of advantages and uses achieved by users by using the Multi Column Feature of CSS3 like defining multi column layout, column width, space, count and also adding new columns as and when required in the window. But if only the column count and column width property is present in CSS3 then while adding new columns in window or while resizing readability due to flowing from columns to columns become difficult. So to achieve better readability and enhancement two more properties - column-gap and column-rule takes its presence in CSS3 and this was explained in detail with example in our previous section
CSS3 Advantages
Having got a detailed idea of CSS3 and its features with some of the vital attributes of CSS3 let us see the advantages or uses of CSS3 in brief in this section. There are numerous and variety of areas in which CSS3 makes it mark and thus users finds it one of the comfortable and powerful tools for usage thus making it a reason for its popularity. Let us see some of the important advantages and uses of CSS3 in detail.
Usage of style sheet:
Long before introduction of CSS3 in fact the Cascading style sheets concepts designers of web were using HTML markup to denote the font colors, background styles, border size. But after the introduction of Cascading style sheets concept all these got moved into a separate style sheet area thus making the users to have an easier and comfortable HTML markup. This gives another associated advantage of CSS3 are easier maintenance by which updations and changes are made only to the individual modules needed and testing of the individual modules is carried out and then integrating with the total system thus making the maintenance part very simple.
Differentiation and Isolation:
The concept of CSS3 helps users to have presentation separated from structure. That is for instance prior to the concept of CSS3 while users and web designers were using HTML markup the way of depicting or denoting a heading to be centered on the page in Bold, Blue with Ariel font would be as follows:
<h2 align="center">
<font color="blue" size="+6" face="Ariel">
<i>Usage of CSS</i>
</font>
</h2>
The above structure is very difficult to manage because the markup had to be repeated for each heading to apply wherever needed thus making more complex maintenance and presentation. But by the concept of Cascading style sheets and CSS3 the presentation separated from structure. That is clear differentiation and isolation is made where by the style sheet defines presentational characteristics and the structure of document defined in heading <h2>. Thus taking the following format:
<h2>Benefits of Cascading style sheets</h2>
h2 {
text-align: center;
color: blue;
font: bold "Ariel";
}
The above separation of presentation from structure concept helps the users to maintain in an efficient, easier and comfortable manner. Thus the modularized approach helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system.
Helps to achieve Multi Column Layout:
Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages are there is no need to for users to scroll up and down while reading the text from one column to the next column, it prevents the need for horizontal scrolling, wraps text user friendly and easier to read without making too short words or lines and most of all everything could be embedded in a single page making it comfortable and economical. We have seen about this Multi-Column Module feature in detail in our earlier section of CSS3.
Flexibility in Handling:
The Cascading style sheets concept helps users to handle in a flexible and convenient way the web designing because it is possible to attach the CSS style information as a separate document or if the user wishes it is also possible to attach the CSS style information embedded within the HTML document. Also it is possible to handle multiple style sheets that is to say in other words multiple style sheets can be imported anywhere. It is also possible for users to specify many alternative style sheets which enable users to make a choice between them as needed. Thus the modularized approach of CSS3 helps to develop and maintain the system on a per module basis and thus gives more flexibility to the system .Thus greater control and flexibility is achieved at presentation level by user of CSS3 because of the advantages and powerful features of CSS3.
Handling multiple background images:
The drawback with CSS2 was that CSS2 allowed only a single background image per element. This drawback was removed in CSS3 by its capability of handling multiple background images per element.
Users find it amazing and powerful to use since it is possible to handle eight background images to a single element which is really a powerful feature of CSS3 ability. By this powerful feature of handling multiple background images per element users can create interesting effects of various kinds without the need of additional elements thus making it easier and efficient way of handling images and also the completion time is achieved faster. Also the selectors feature of Cascading Style Sheets Level 3 which we have seen in our earlier section in detail helps the developer to select specific levels of the document and work with it. Also added to this is this feature browsers support the feature of advanced Cascading Style Sheets Level 3 Selectors and thus making CSS3 more popular. In this context it is worth to mention about the border-radius command of CSS3 which is very useful for handling and bringing out rounded Corners without images with ease.
CSS3 Opacity
Need for Handling Transparency:
Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.
This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.
What is Opacity in CSS3:
Opacity is actually a property of CSS3 which gives its the ability to change the opacity of web design objects or elements and thereby make the element achieve the effect of fading and appearing thereby handling transparency of images. In short opacity is actually a property introduced in the version of CSS3 which would help users to define and handle the transparency of images on web screen with respect to its background.
Structure of Opacity in CSS3:
The general syntax of the powerful feature opacity in CSS3 is as below:
opacity: <alphavalue> | inherit
In the above the alphavalue denotes any value in the range from number 0.0 to 1.0 inclusive of both. In this the number 0.0 denotes fully transparent image which means that the background image to the element would be completely visible and number 1.0 denotes fully opaque which means that the background image to the element would be completely invisible. The default initial value is 1.0.
Opacity Browser Support:
Netscape 7
Mozilla 1
Firefox 1, 2
Opera 9
Safari 1
For example
opacity:1.0
The above example denotes the transparency of element to be completely opaque thereby making all the background images below the element defined to be completely invisible.
The option inherit is optional which if included denotes that the opacity property of the element defined should be maintained in the same way as that of its parent opacity. The opacity feature is handled and supported by Netscape browsers and is not supported by non-Mozilla browsers and is also not supported by Internet Explorer6 and Internet Explorer 7. The above statement may put the users feel that Internet Explorer being famous browser could not handle opacity property making it less powerful ability. But it is not so because though Internet Explorer does not support opacity property of CSS3 it supports an equivalent property alpha filter which is a property of Microsoft. The alpha filter property of Internet Explorer takes any value in the range from number 0 to 100 inclusive of both. In this the number 0 denotes fully transparent image which means that the background image to the element would be completely visible and number 100 denotes fully opaque which means that the background image to the element would be completely invisible. Thus it now clear from the alpha filter property that if one wants to handle transparency of images in CSS3 using Internet Explorer then they must multiply opacity by 100 and add the corresponding alpha filter.
So the general syntax for handling transparency of images in CSS3 using Internet Explorer property of alpha filter is as below:
filter: alpha(opacity=value);
The Mozilla-based browsers also support the property of opacity of CSS3 but some of the Mozilla-based browsers use the syntax with keywords as
-moz-opacity
for handling opacity property of CSS3
Apart from the above representation placement position also has to be specified along with the sytax of opacity definition. The placement position supported by Internet Explorer and Mozilla-based browsers is float:left
An example of the representation is given below:
<span style="float:left;filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30;">
One more feature which makes using opacity property powerful is the way or syntax of opacity property is convenient to handle. This is because one can use the same value for rgb but still can achieve shades in images by using the opacity property defined in CSS3 instead of achieving different shades by giving different values for rgb which is inconvenient for users to handle. The example given below explains this in detail.
Defining using opacity property of CSS3 takes the below format:
<div style=" background: rgb(255, 0, 0) ; opacity: 0.1;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.3;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.5;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.7;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>
Instead of inconvenient way of handling using rgb without opacity property as shown below:
<div style=" background: rgb(241, 182, 178) ; "></div>
<div style=" background: rgb(243, 152, 132) ; "></div>
<div style=" background: rgb(247, 86 , 84) ; "></div>
<div style=" background: rgb(251, 35, 40) ; "></div>
<div style=" background: rgb(255, 0, 0) ; "></div>
The above concepts and effects of transparency which we applied for background images of elements defined can also be applied to elements transparency. That is the user can define the opacity in the same way for the image or element directly which will make the element to fade and appear in and out of the background. Let us see an example to understand this concept of handling transparency for background images in detail:
<img src="http://exforsys.com/sample/test/training.jpg"
style="opacity:0.3;filter: alpha(opacity=30) ;" />
CSS3 Wrapping
Wrapping is a vital property for proper display of contents in web pages for if wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.
Thus in this context it becomes necessary to handle preformatted text on web pages which can be done in CSS3 in several ways like using text-wrap, by using Pre-tag to display preformatted text on web pages and also by using the concept of word wrap in CSS3.Let’s see about each of these in detail.
Text Wrapping:
The text wrapping in CSS3 is handled by 'text-wrap' and 'word-wrap' properties. Let us see about these properties in detail.
text-wrap:
The general format of text-wrap property of CSS3 is as follows:
text-wrap: normal | unrestricted | none | suppress
In the above the default initial value is normal and the above format is used for handling text wrapping mode of text in CSS3. In the above we could find that the text-wrap can take any one of the values normal, unrestricted, none or suppress. Let us see what each of this denotes in brief.
Values of text-wrap:
normal:
When this value is taken by text-wrap mode then it denotes that the breaking of lines is allowed at the allowed break points.
unrestricted:
When this value is taken by text-wrap mode then it denotes that the line breaking can take place only between any two grapheme clusters and the final effect of line breaking would be in such as way that the Character shaping would have the effect of no breaking at all.
suppress:
As the name implies when this value is taken by text-wrap mode then the line breaking is suppressed within the element.
none:
When this value is taken by text-wrap mode then lines do not break any text that does not fit within the boundary get overflowed.
Word Wrap:
Like text wrapping as seen above CSS3 also can handle word wrapping by using the property named as word-wrap by which users can define break within a word and thereby prevent the overflowing when a word defined as string becomes long enough to fit inside a line box. But the vital point to note here is the property of word-wrap in CSS3 takes its effect and presence only when the text-wrap property tales its value as 'normal' or 'suppress'.
The general format of word-wrap property of CSS3 is as follows:
word-wrap: normal| break-word
In the above the default initial value is normal and the above format is sued for handling word wrapping mode of text in CSS3. In the above we could find that the word-wrap can take any one of the values normal, suppress. Let us see what each of this denotes in brief.
Values of text-wrap:
normal:
When this value is taken by word-wrap mode then the lines are allowed to break only at the defined and allowed break points.
break-word:
When this value is taken by word-wrap mode then causes an unbreakable word to break provided there are no acceptable break points in the line. Also the breaking of words is done in such a way that the final character shaping would give the effect of word not being broken.
For example:
word-wrap: break-word;
The above statement define in Internet Explorer browser would cause the word-wrapping mode to take the value and effect of value break-word.
In the context of text handling in CSS there is yet another property named as white-space property.This property is similar and in fact a short alternative property for white-space-collapse and text-wrap properties. Let us now see about the white-space property of CSS3 in detail.
white-space Property:
The white-space Property of CSS3 depicts the way of handling and treating the white spaces or line returns in a text. Earlier version of CSS which was CSS2 provided four values for the property white-space. They are:
• inherit
• normal
• pre
• nowrap
CSS3 can take five possible values for the property white-space which are
· normal
· pre
· nowrap
· pre-wrap
· pre-line
The general format of text-wrap property of CSS3 is as follows:
white-space: nnormal | pre | nowrap | pre-wrap | pre-line
In the above the white spaces denotes any of space, tab, and End-of-line characters.
Let us see about each in brief:
normal:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'collapse' and sets the value for text-wrap property to 'normal'. Denoting the value of white-space as normal would enable the browser to consolidate sequences of white spaces into a single one and also line wrapping takes place appropriately as needed.
pre:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'preserve' and sets the value for text-wrap property to 'none'. Denoting the value of white-space as pre would prevent the browser from consolidating sequence of white spaces into a single one and also the wrapping the lines is prevented.
nowrap:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'collapse' and sets the value for text-wrap property to 'none'. When the white-space property takes the value of nowrap then as the name implies no wrapping of lines takes place but white space gets consolidated as needed by the browser.
pre-wrap:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as 'preserve' and sets the value for text-wrap property to 'normal'
pre-line:
When this value is taken by white-space Property then it sets the value for white-space-collapse property as ''preserve-breaks' and sets the value for text-wrap property to 'normal'
CSS3 Links Creation and Usage
Links are very vital for any web page to navigate through the site and so is also with CSS3. In CSS3 it is possible to handle links even more powerful and effectively as it is possible to handle various states of links which are link, visited, hover, and active states. Also it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links.
As explained above in CSS3 it is possible go handle various states of links which are link, visited, hover, and active states. Before going in depth of how to handle this in CSS3 it is first important to know what each of these states means. Let us see about each of these states in brief.
States of Link:
The states of link are link, visited, hover, and active states.
visited:
This refers to the state of the link after a link has been clicked.
hover:
This refers to the pre-state of the link or in other words the state when a mouse is paced over the link.
link:
The link state refers to the default state of the link.
active:
This refers to the state of the link just after link is being clicked.
The above all four states of link can be handled in CSS3 as needed by the user. But care must be taken by user to use them in proper order namely link followed by visited then hover followed by active that is in short form denoted as LVHA. If the above order is not followed then there would be confusion in the link states which would cause the links from not working. So user must take sufficient care in following the above order while designing links using CSS3.
The general syntax of the link property of CSS3 is as below:
A:link|visited|active|hover
which refers that the link property can take any of the four values link, visited, active or hover. All the four properties can take value as <style>.The style can be given as needed by user just like styling for normal texts. Let us see a small example to understand the above link state usage in CSS3 in brief. Let us define each link state with a separate color that is a unique color for denoting the default state of link and a separate color for denoting the mouse paced over a link, another unique color for representing the link being clicked and visited and then a color to denote the active state of link. This can be done collectively as below:
<style type="text/css">
A: link { text-decoration: none;color: #00e; }
A:visited { text-decoration: none;color: blue; }
A:hover { text-decoration: underline;color: #fff; }
A:active { text-decoration: none;color: red; }
</style>
In the above we see another style property mentioned as text-decoration. In the above example the hover alone has text-decoration value as underline and the rest has text-decoration value as none which depicts that the link becomes underlined only when mouse is placed over the link and remains as not underlined in other states.
It is also possible for creating color on background for the links created. The background color can be set as determined by user for each state of link.
For example:
<style type="text/css">
A: link { background: #CCFF00;text-decoration: none;color: #00e; }
A:visited {background: #ECEC00; text-decoration: none;color: blue; }
A:hover { background: #FFFF00;text-decoration: underline;color: #fff; }
A:active { background: #CCCC00;text-decoration: none;color: red; }
</style>
The above example would create a background color for each state of link as defined above.
Shorter representation:
Now let us see how to present the above format in a shorter format if some properties are common for certain link states.
First let us see an example to understand this concept in detail.
a:link {
color:red;
font-weight:bold;
text-decoration:underline;
}
a: visited {
color:blue;
font-weight: bold;
text-decoration:underline;
}
a: hover {
color:#ff00;
font-weight: bold;
text-decoration:none;
}
a:active{
color:#fff0;
font-weight: bold;
text-decoration:none;
}
In the above representation we find that all the states link, visited, hover and active has the propery
font-weight:bold;
as common and also the property
text-decoration:underline;
holds good for link and visited states and the property
text-decoration:none;
holds good for hover and active states respectively.
So we can combine the above common attributes and could make a shorter representation in CSS3.The above example would take a shorter representation in CSS3 as below:
a{
font-weight:bold;
text-decoration:underline;
}
a:link{
color:red;
}
a: visited {
color:blue;
}
a: hover {
color:#ff00;
text-decoration:none;
}
a:active{
color:#fff0;
text-decoration:none;
}
Use of Creating Links as Buttons:
As explained before it is possible to create buttons and boundaries to links in CSS3 by using the features of CSS3 technology which gives the effect of button to links. One might have a query of what is the use of making links as buttons when a user can normally place a button by using the concept of images as done in earlier versions. The main drawback associated with the earlier approach of placing button by using the concept of images is time factor. That is it takes much time for page to load which in turn decreases the performance. This drawback is removed by the concept of border style being used in links which gives a button effect to links and thereby making the time slice less and there by improving the performance.
