DIV/CSS
CSS pseudo-classes and elements
by Sagar Awasthi on Oct.22, 2009, under CSS pseudo-classes and elements
CSS pseudo-classes and CSS pseudo-elements are used to add special effects to some selectors.
CSS pseudo-class syntax:
selector:pseudo-class {property:value}
CSS pseudo-elements syntax:
selector:pseudo-element {property:value}
Few pseudo-classes and elements are explained below:
1. Anchor Pseudo-classes
Most of you guys know about these classes, those are basically for the link tag i.e. Anchor tag “<a>”. See below for some examples
a:link {color:#00ff00} /* unvisited link */
a:visited {color:#00ff00} /* visited link */
a:hover {color:#ffff00} /* mouse over link */
a:active {color:#0000ff} /* selected link */
Pseudo-classes could be pooled with CSS classes:
a.blue:link {color:#0000FF}
at above I have made a “blue” class for Anchor tag “<a>”, combined with pseudo class “:link”. In HTML we will only call class in the anchor tag
<a href=”mygod.html”>My God</a>
2. The :first-child Pseudo-class
The :first-child pseudo-class matches a particular element that is actualy the first child of another element. E.g if we use this with <p> tag it will change the style of first ever <p> tag on the page.
Note: <!DOCTYPE> must be declared, if you want “:first-child” to work in IE
<html>
<head>
<style type=”text/css”>
p > i:first-child{ font-weight:bold; color: #ff0000; }
</style>
</head><body>
<p>Hello, text is in <i>strong</i> format.</p>
<p>Hello, text is in <i>strong</i> format.</p>
</body>
</html>
3. “:first-letter” pseudo-element :-
It will add a style or define a style to the first character of a text/content.
Note: The below are the properties which apply to the “first-line” pseudo-element:
font, color, background property, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear
p:first-letter
{
color:#00EEEE;
font-weight:bold;}
4. “:first-line” pseudo-element :-
It will add a style or define a style to the first line of a text/content.
p:first-line
{
color:#00EEEE;
font-weight:bold;}
Note: The below are the properties which apply to the “first-letter” pseudo- element
font, color, background, margin, padding, border,text-decoration, vertical-align when “float” is “none”, text-transform, line-height, float, clear
Note: Both the “first-letter” and “first-line” pseudo-element will only be used with block-level elements.
5. “:after “ pseudo-element :-
it is basically used to add the content after any element. It insert some content after the element. E.g. in the example below I have added an image after H1 tag
h1:after {content:url(image.gif); }
6. :before pseudo-element :-
it is basically used to add the content before any element. It insert some content after the element. E.g. in the example below I have added an image before the text of H4 tag
H4:before{content:url(image.gif); }
7. The :lang Pseudo-class
The :lang pseudo-class allow you to define special sets or policies for different languages.
Note: This tag is only supported by IE 8 (and higher)or define a <!DOCTYPE>
e.g
<html>
<head>
<style type=”text/css”> q:lang(no) {quotes: “#” “#”}
</style>
</head><body> <p>Some text <q lang=”no”>A hash in a paragraph</q> Again Some text.</p> </body>
</html>
Advantages of Tableless Designs
by Sagar Awasthi on Jul.13, 2009, under Advantages of Tableless Designs
Designing a website with tables is now an old technique. Now a days it’s time to introduce tableless web design, which is very flexible as well as web development friendly. Table restricts development with many complications and disadvantages. I will try to elaborate the vital advantages of tableless for web development and web designs.
Quick loading
The most important feature of tableless desinging, helps in reducing the size of a HTML page. It is true that tables take time to load and therefore a website made with tables generally loads slowly. Slow loading means slow visual apearance, may leads to losing visitors. Reason behind is that tables come with clutter of codes which increases the loading time. As you know table is structured with number of open-close tags(i.e thead, tr, td.) that makes the entire table structure heavy. At the same time if you have used tableless, it basically reduces the code and shed up 70% of unnessasary elements.
Simple and Clear Code
If you are developing website without tables, it will clear the code with lots of stuff. It reduce unwanted tags and make it more clean which helps a developer to make changes comfortably. Developer will not have to labor hard while making any changes in the codes. Infact a clumsy apearance make it difficult for a coder to find out errors. Tableless make your code very simple and clear, without any complication one can integrate or develop some new features in the same design.
Flexibility in Presentation
With the help of CSS one can change style, graphic or font very easily. You don’t need to look whole code for a small style change. By editing CSS file, you can change the complete look and feel of design. Furthermore, Developer will update the CSS file only of a website, he will not need to update all the pages.
Search Engine Optimization
Conceptually, websites with fewer codes are always search engine friendly and can be easily read by all the search engine crawler.
Use of Standard Code
Tableless layout uses professional and very standard layout for designing a web page. Use of standard tags make designing effortless and one could make changes easily without putting lot of hard work.
Printer Friendly
Usually user surf net for the content, and takes print when they find some useful content for them. But in the tablebased layout, there are many limitations as one can’t take print of the nessasary part, it comes with the whole page(i.e header, footer, Links, and other extra advertisments) but in tablesless you can customize the need and make a layout printer friendly.
Cost Effective
Yes! It is true that Tableless web desinging requires sound knowledge on div tags and CSS. However, editing CSS files of div tags is not a complex task. Therefore, a web developer will take less working hours. This is the reason why it is considered highly cost effective.
The id Selector
by Sagar Awasthi on May.28, 2009, under DIV/CSS, The id Selector, Web 2.0 Technology
You can also define CSS styles for HTML elements with the id selector. The id selector is defined with #. It has a Unique effect in HTML Document, as it is defined uniquely for each HTML Tag/Element.
The CSS style rule defined below will go with the element that has an “id” attribute with a value of “mycolor”:
# mycolor {color:green}
The style rule below will compare the “li” element that has an id with a value of ” link1″:
li#link1
{
text-align:center;
color:red
}
Again Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
CSS Comments
Comments are used to distribute your code among the working tags and your comments. It may help you when you edit the source code at a later date to recognize the part of code from the content present in your comments. A comment is ignored by browsers. A CSS comments starts with “/*”, and ends with “*/”, like this:
/*This is a comment*/
The class Selector
by Sagar Awasthi on May.28, 2009, under The class Selector, Web 2.0 Technology
With the “Class” selector you can define different styles for the same type of HTML element.
Let’s say that you’ld like to give two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align:right}
p.center {text-align:center}
You then just have to use the class attribute in your HTML document:
<p class=”right”>This paragraph will be right-aligned.</p>
<p class=”center”>This paragraph will be center-aligned.</p>
Note: If you want to apply more than one class per given element, the syntax is:
<p class=”center bold”>This is a paragraph.</p>
The paragraph above will be styled by the class “center” AND the class “bold”.
You can also omit the name of tag in the selector to define a general style that can be use by all HTML elements which will have a certain class. Below In the example, all those HTML elements with class=”center” will be center-aligned:
.center {text-align:center}
Below code, we have two HTML element tags and both the “h4” element and the “p” element is using same class=”myclass”. This means that both elements will follow the same rules defined in the “.myclass ” selector:
<h4 class=” myclass “>This heading will be center-aligned</h4>
<p class=” myclass “>This paragraph will also be center-aligned.</p>
Remark Do NOT start a class name with a numeric/number, reason behind is that It won’t work in Mozilla/Firefox. You may add Styles to Elements with Particular Attributes. The style rule below is matching all input tag that have a type attribute with a value “text”:
input[type="text"] {background-color:blue}
Grouping Various CSS Selector
by Sagar Awasthi on May.28, 2009, under Dreamweaver, Grouping Various CSS Selector, Web 2.0 Technology
You can make a group of various selectors. A comma will separate each selector. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color:green
}
