12:09 PM
OglacsTeam
Pseudo-elements
This one has two purposes. The first purpose is:
- To use them in selecting first letter or the first line of text inside a given element.
- To easily create a drop cap at the start of every paragraph.
Below are given the rules as example:
p:first-letter {
font-weight: bold;
font-size: 300%
background-color: red;
}
In the above rule, the first letter of every paragraph will now emboldened, will be 300% bigger than the rest of the paragraph, and have a red background.
In order to make the first line of every paragraph bold, we can use the below given rule:
p:first-line {
font-weight: bold;
}
The second use of these elements is to generate content through Cascading Style Sheets which is more complex. We can use the :before or :after pseudo-elements to specify whether a content is to be inserted before or after the element selected. Thereafter, we decide on what is to be inserted. Here is an example of inserting images after every link on that page.
a:after {
content: " " url(flower.gif);
}
We can also use the attr() function to insert attribute values of the elements after the element. As for example, we can insert the target of every link in the document within brackets after them as given below:
a:after {
content: "(" attr(href) ")";
}
Rules like the above are perfect for print style sheets. By print style sheets we meant to say those which we can write and are automatically applied when a user prints a page.
Rules like this are great for print stylesheets, which are stylesheets you can write and which are automatically applied when a user prints a page.
We can also insert incremented numerical values after repeating elements (like paragraphs or bullets) using the counter() function of which will be explained later.
It is to be noted that all these selectors are not supported in IE 6 and below. Important information shouldn't be inserted with CSS for that content will be unavailable if a user chooses not to use the style sheet. The bottom line is, CSS is for styling and HTML is for important contents.
Visit Oglacs Software Development Company's website for more.
Posted in: 
3 comments:
I have seen a extremely informative blog. Truly I like this blog. This blog gives us especially excellent knowledge about CSS basic.
Amazing tutorial i really like this post and will share with this information with my friends. thank for clarifying
Princess Square in Koramangala - Serviced Apartments in Bangalore
With over 40 years of experience in the Service Industry all of us at princess square Service Apartments personally know caring for the guest and It is our goal to make sure you, your family and friends the guest enjoy a carefree vacation or Superior business class experience.
We have a small quality driven collection of hotels & hotel apartments within one of the world's most modern and fastest growing city of Bangalore.
Welcome to the Garden city - Welcome to Princess square Service Apartments Hospitality, where our promise of pure value, pure quality and pure service is delivered.
An essential attribute of all our properties are our convenience and central locations within the city of Bangalore.
At princess square Service Apartments we provide a wonderful choice. Whether you are a discerning budget traveler or just looking for that element of luxury of a 5 star business hotel, we have the accommodation solution to suite you.
Our deluxe hotel apartments offer a choice of both full hotel service operations as well as self catering facilities. We have an extensive choice of accommodations to choose from and our portfolio includes standard hotel rooms, deluxe hotel suites, studios, One, Two & Three Bedroom suite apartments, Royal Suites, Executive & Privilege Floors.
We are ideal for leisure, corporate travelers, stopovers & long stays.
All our hospitality establishments provide only the highest levels of comfortable quality accommodations and we are the perfect choice for your next city break, business meeting or special family occasion.
Post a Comment