Top Ten Expert CSS Ideas Which I Wish to Know Earlier

With the prevailing trends of web designing in modern era it is even impossible to imagine of vibrant designs without CSS. These days, website designing and development is on the hike. Websites has become the prime source of information in the today’s electronic era. Thus designers need to put their best efforts in order to design the excellent website which has both the sober look n feel as well as the best content.

With the changing trends, the entire website designing procedure is also changing day by day as it is getting equipped by new technologies. For the web designers, it has emerged out as a new challenge that which techniques they should use, which will leave far better impact and much more. CSS is one of the techniques which have enabled the designers to work with ease. Only there is a need to create a semantically correct markup. With the emergence of CSS, the designing concept has reached to a new height. CSS stands for Cascading Style Sheet which is implied in creating several vibrant designs for web page.

Here we are presenting latest and powerful new CSS techniques that can help you in achieving the goal. For creating various designs, making a web page, these CSS techniques will prove highly beneficial for you. We have come here with expert CSS ideas and approaches which can improve your efficiency of CSS coding. The more you explore, more you get the options to make new website pages.

 

Top Ten CSS Expert Ideas

1) Get Started with CSS: Get ready to start with a blank page of content and include headers, navigation, a sample of the content, and footer. Then the developers should start adding html markup and then include CSS styles.

2) Use a master style sheet: Master Style sheet is the most useful CSS technique and leaves better effect than any other. Below we are presenting a preview of basic master style sheet

 

3) Reset your CSS-styles first: The designer should first of all eliminate default browser styling and reset the CSS-styles before further proceeding.

4) Organize your CSS-styles, using master style sheets: Once get started with master style sheet, one should import reset.css, global.css, flash.css (if needed) and structure.css. We are presenting here an example of “master” style sheet and will show you how it is embedded in the document:

h2 { }

#snapshot_box h2 {

Padding: 0 0 6px 0;

Font: bold 14px/14px “Verdana”, sans-serif ;}

#main_side h2 {

Color: #444;

Font: bold 14px/14px “Verdana”, sans-serif ;}

.sidetagselection h2 {

Color: #fff;

Font: bold 14px/14px “Verdana”, sans-serif ;}

 

5) Handle IDs, Classes, Selectors, and Properties: The developers should name the classes and IDs properly, according to their semantics. The element names in selectors are case sensitive, thus to be taken care of that. The CSS classes and IDs must be valid; it must not be started by any digit or underscore symbol.

6) Use shorthand notation: It will be effective to use shorthand notation for margin; padding and border properties which can save a lot of space. For Ex:

<em>CSS :</em>

Margin: top right bottom left;

Margin: 1em 0 2em 0.5em;

(Margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em ;)

 

<em>CSS :</em>

Border: width style color;

Border: 1px solid #000;

 

<em>CSS :</em>

Background: color image repeat attachment position;

Background: #f00 url(background.gif) no-repeat fixed 0 0;

 

<em>CSS:</em>

Font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;

Font: italic small-caps bold 1em/140% “Lucida Grande”, sans-serif;

 

7) Setting up Typography: Set up typography in effective manner so that it must have a good effect on the web design. By this we mean that the developer should use universal character set for encoding. One can change capitalization using CSS or can display text in small-caps automatically. This can be done as:

<meta http-equiv=”content-type” content=”text/ html; charset=utf-8″ />

h1 {

Text-transform: uppercase;

}

h1 {

Font-variant: small-caps;

}

8) Be careful while styling links: The developers should define relationships for links. The “rel” attribute is used to indicate a semantic link relationship from one resource to another

a [rel~=”nofollow”]::after {

content: “\2620″;

Color: #933;

Font-size: x-small;

}

a [rel~=”tag”]::after {

Content: url (http://www.technorati.com/favicon.ico);

}

9) Use Technical Statements such as IE or conditional comments: The developers can force IE to apply transparence to PNGs or can define ‘min-width and ‘max-widthin IE. One of the safest ways of taking care of IE/Win is to use conditional comments. Go through the below given codes to have a broad idea on how to perform this:

#regular _logo

{

Background: url(‘test.png’); width: 150px; height:55px;

}

/* \ */

* Html #regular _logo

{

Background: none;

Float: left;

Width: 150px;

Filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src=’test.png’, sizingMethod=‘scale’);

}          /* */

<!–[if IE]>

<link rel=”style sheet” type=”text/css” href=”ie.css” />

<! [End if]–>

10) Use the same navigation (X)HTML-code on every page: The web developers can use same navigation (X)HTML-code on every page. This can be done as below:

XHTML:

<Ul>

<Li><a href=”#” class=”home”>Home</a></li>

<Li><a href=”#” class=”about”>About Us</a></li>

 

<Li><a href=”#” class=”contact”>Contact us</a></li>

</Ul>

 

Useful CSS Techniques

Astonishing Background Setting with CSS

The web designer should use an astonishing background setting which can impress the user to a great extent. This can be easily done with CSS.

css00

 

Creative Use of PNG Transparency in Web Design

As PNG image format is well supported by various web browsers, the designers can use PNG images to greatly enhance his design vocabulary.

css02

 

CSS Server-Side Pre-Processor

The CSS Server-side Pre-processor is the most useful technique which adds nested selectors, server-side imports, constants, and variables to CSS. The designers prefer to use this technique to add some special features to the web page.

css03

 

Styling File Inputs with CSS and the DOM

CSS provides remarkable facility to the designers to create a separate file containing special font size, font color, font style, background setting and much more. The designers can create a file and style the file inputs with CSS.

css01

 

CSS hover effect

By the CSS hover effects we mean how to highlight changes in the default style of a link so that it does not have the underline. CSS provides several rules which reflect some special effects when mouse is hovered over that particular link. The effect can be seen in various ways such as the color of the link, on which hover effect is implied, changes, or sometimes underline disappears.

css47

 

Dynamic CSS with Variables

There should be proper integration of CSS variables in CSS coding.

dynamic-css

 

Showing Hyperlink

The designers should implement the concept of hyperlink while importing any external file.

css62

 

Creating a table with dynamically highlighted columns

The designers can create table of various size and styles with the help of CSS.

css43

 

CSS Step Menu

With the help of CSS the designers can create step menus which will let the users to go through step by step in order to achieve some aim. This kind of menu offers various steps depending upon the type of application the user is accessing.

css52

 

Iconize Textlinks with CSS

As we know the links are the mediums through which the user can jump from one page to another page in a website. With the above prescribed technique we can iconize the links on a web page.

css56

 

Webgranth

Admin from India is a founder of WebGranth, an entity of Sparx IT Solutions with over 8 years of experience on different verticals of web design & development. In his quest to spread the knowledge regarding web development, he has been contributing in WebGranth by submitting his valuable blogs.