Cascading Style Sheets or else CSS for short has slowly but certainly become the web site design standard over past few years. It was not like that a few years ago people used Frames to place there content in their web pages also Tables slowly replaced this. Lots of low-end web site developers are very contented with Tables, since it ‘does what it speaks on tin’. However, increasingly people are moving over to the CSS, as using code can attain almost all layout options.

One main problem with the CSS is not all the Web browsers produce same results as well as it has not helped in past by a variety of browsers employing their personal way of interpreting some CSS conventions. You can even think that your CSS design seems OK in current version of your favored browser as well as can then be dejected when you analysis your Web pages in a further version which has destroyed formatting. As a result, when moving across to CSS, it is significant that you make use of capabilities that are time after time supported across entire range of well-liked browsers. It is attractive that new version 7 of the Microsoft’s Internet Explorer has also fixed the number of preceding anomaly, on the other hand a lot of people are waking up to reality which IE7 has actually caused evils occurrence from their previous workarounds!

So why not worry with CSS, if Tables work well for you? Principal advantages are as follow:

1.-page code is usually much simpler to follow;

2. Amount of code that is used to achieve same result is less. The universal view is that switching to the CSS layout, typical web page size decrease is between 50 to 60 per cent;

3. Download the speeds for CSS web pages are usually faster than Table driven counterparts. This is just because the browsers have to convert through table code twice prior to they are able to show contents. They do this initially to figure out structure and again to appreciate the content. It must be recognized that the Table’s contents can be presented to screen in one go, while CSS content will fall in separately, thus giving a better consumer experience. It is possible to rule order in which precise screen elements come into view, so user is not unfocused by more bulky as well as slower to load picture files. In addition, because all code involved with the CSS web page layout is detained in one outside CSS document as well as is cached, it is earlier than Table layouts, which need to be interpreted each time the new page is displayed;

4. It is easier to edit obtainable pages also to add fresh pages, particularly in area of slight formatting amendments. For instance, you can also change font or the color scheme across the entire web site in factually minutes;

5. CSS delivers improved accessibility. In current years number of people who are using web browsers on the hand held devices has gone up significantly also CSS plays the important purpose in delivering the content to PDA’s et cetera throughout extra CSS documents. This isn’t possible with the Table-driven layouts;

6. CSS is measured to be further Search Engine friendly since they can spider CSS web pages earlier. but, it remains to be watched if this has any touchable benefits like an improvement on your web page ranking.

On flipside, there are some disadvantages to the CSS page design that you must consider:
1. As compared with the Tables, CSS absorbs a much better learning curve;
2. Because of the cross browser hold up issues, time spent put into practice workarounds must not be undervalued;
3. The new browser versions can also catch web site developers sleeping if you are not cautious. You can discover that previous workarounds have overcome and look of your web site that has changed overnight.

Ultimately, your choice on whether to move or not to see CSS will most likely depend on your stage of technical potential and time you are able to dedicate to accepting CSS layout options.

Designing devoid of tables using CSS layouts is quick becoming new standard on Web because of benefits talked about in previous article. Internet browsers used recently are able to cause to be web pages capably. In this article I will attempt to make an essential 2 column CSS layout that you can make use for further design projects.

Web Page: http://www.isitebuild.com/css/css-layout.html Style Sheet: http://www.isitebuild.com/css/stylesheet.htm

1. Divide your web page in sections - divide tags that allow you to make separate divisions on your page. They are recognized with the unique id. You can put in a style css selector, which specifically is relevant to div of that id. Keep in mind to include DOCTYPE (to make your web page precisely in browsers) as well as Meta tags (allows search engines to spider your web pages).
Wrapper: is div, which wraps around all other divs such as container for web page elements. header: describes top banner of web page main: defines main content of web page nav: defines navigation of web page footer: defines footer as well as sub-navigation of web page

2. Create CSS code - CSS code styles web page as the centered 2 column of CSS layout with the navigation bar and footer. div#wrapper style makes the centered box that acts as the container for rest of web page content. width: 80% rule sets width of div. background-color:#FFFFFF rule makes the white background for div. The Margin of top: 50px as well as edge base: 50px rules make space of fifty pixels for summit and base margins for div itself.

appropriate method to middle the block level element with the CSS is set margin left: auto and margin right: auto. This instructs browser to mechanically calculate equivalent margins for both the sides, thus centering div. border: skinny rock-hard #000000 rule put in the border around outer div. rest of CSS code styles divs for header, footer, navigation, and chief content.

div#header and div#footer styles put the margins and padding for all those divs. As well, div#header includes text align: the center rule to center header text, as well as div#footer includes border top: thin and solid #000000 rule to make the border along top edge of div to replace horizontal rule above footer in table based layout.

div#nav and div#main styles generate two columns in middle of centered box. In div#nav style, float: the left law pushes div to gone side of the parent element wrapper div, and width: 25% rule sets div’s width up to 25 percent of parent element. With nav div floated to left and limited to put width, it leaves room for main div to lift up to right of nav div, thus making two-column effect. div#main style includes margin left: 30% rule to maintain main text aligned in the neat column in its place of spreading out under nav column. The chief div’s left margin is to set a value slightly better than width of nav div.

Style Sheet http://www.isitebuild.com/css/stylesheet.htm
If links are put elsewhere on web page they will come into similar properties as above blue link, which hovers, to red. Then what if you wish to make one more set of links, which are a dissimilar color, and passing your mouse above them they are underscored.

3. Create bottom navigation
To include this in part of web page, you can use div#footer as well as code to each link accordingly. In order to make list go horizontally you can use: display: inline;
At the present that you have finished making style sheet I want to shorten code on web page by connecting it to my exterior style sheet. Here is how:

4. Create the external style sheet – then copy and paste all css code devoid of these tags in to notepad also label it something called “style sheet”. Put this style sheet among the head of your web page.

This will decrease code on your web page as a result it will load quick plus search engines can easily spider your page.

5. Add content to your web page - following you have got your web page looking properly, you can put in more text to it. Adjustments can simply be made to any of the style on web page or on your entire site by just editing one style sheet.

6. Upload files - ensure to upload your pages and style sheet to root directory of server.

7. Validate your code - be sure to validate your xhtml code: http://validator.w3.org/ and css code: http://jigsaw.w3.org/css-validator/ as well as make corrections where essential.

8. Check the browser compatibility also screen resolution - make sure that your web page renders well in well-liked browsers that is IE6, NN7, Firefox.

If you are starting with the CSS layouts, apply then slowly by doing small changes to your web pages that is creating the style sheet for your chief headers and fonts. As you turn more familiar with the CSS you might eventually put up all your future web sites with CSS layouts.

Did you identify that css code can be slowing down your web site? Did you know that there is the free solution there, which can help you optimize or else reformat css code for speed as well as readability? This editorial is going to give details benefits of optimizing the css code and reasons why all the web designers must be doing it. Primary we need to take in to account 2 reasons why you will want to reformat css: readability and optimization.

Readability
Having satisfactorily formatted css, which easily readable is extremely helpful while you are developing a web site. The majority of us can get pretty slack when in hurry to build up code, and formatter can actually help out to build it more readable.

On expansion teams where Macs and PCs are used, at times line breaks are not understand correctly across the platforms and your css can finish up all in one line. Formatter can help obtain your code looking very pretty again.

Optimization
Opposite of readability is the optimization. One trouble with CSS is it can get pretty file size heavy while designing with it particularly on the complex layouts. Optimizing CSS will strip out all needless characters as well as leave your CSS incline and mean.

Optimizing css is good to do once you have finished your web site and do not plan to work on design very much any longer.

css formatter is great tool since it can do both! You can also format for readability as you are designing, can optimize when you go online, as well as reformat it for the readability if you need to work it again. It is really the ‘win win’ thing to act.

There are numerous different browsers which you should compensate for designing your web page’s in any of the format CSS, tables and so on, some of most ordinary browsers are: Internet Explorer, Firefox and Safari. Main issues which arise with CSS design is all browsers understand CSS in a different way, for instance Firefox does not know some of CSS commands which Internet Explorer does vice a versa.

One of main issues I have found while designing with the CSS is problem with the margins in Internet Explorer. I found when using the float on div tag which also had the margin set, margin will actually double and knock whole web pages layout out. Following numerous late nights as well as the insane quantity of coffee I found the solution to this twice margin bug. By putting a simple line of code twice margin no longer get double! That answer is as follows, adding this code of line to CSS div tag ‘display: inline’.

An additional problem I found with CSS in Internet Explorer is the problem while trying to define the div tag which has the smaller size than base font size. This difficulty again can be set with simple line of code once more all we require to add is following line of code to div tag: ‘font-size:0px’. There is one more solution to this difficulty that must have same effect, since div tag auto make bigger to recompense for content overflow adding up ‘overflow: hidden’ must also resolve problem.
This article will show the easy way to make dynamic CSS based navigation menus, which allow you to alter your web site navigation site wide with only one simple MySQL database update. For this instance, I will be utilizing Chrome CSS Drop Down Menu obtainable from Dynamic Drive. It is free, lightweight CSS menu, which is simply customizable and uses a small sum of JavaScript. There are few other free CSS menus obtainable like the Suckerfish menu as well as other profitable menu options is obtainable.

This editorial assumes reader is fairly familiar with the Dream weaver, PHP also MySQL. Powering navigation menu from the database permits you to easily alter your web site’s navigation menu just by updating database fields, which make up Dreamweaver recordset. Building your web site navigation by using CSS allows for rapid site wide changes through style sheet formatting.

The primary step is to apply CSS menu of your option. It is useful to comprise several mock menu matter as you style menu as a result you can see how menu will emerge with numerous navigation options. Once your menu is in position, go back plus delete all but first menu item in HTML unordered list.

Second step is to make your MySQL database table that will power navigation menu. Using MySQL manager of your selection, create the table that includes three fields: the unique auto numbering ID field, the field that will hold text displayed by every menu option, and the hyperlink field, that will include link every menu item pursues when clicked. All depending on your web site structure, you can make use of relative or else absolute URLs in this ground. At this point, put in data in the database table that will populate web site when loaded. For instance, in first table row, you can have menu text “HOME” and URL “index.php”.

CSS Formatter and Optimizer

http://www.cleancss.com/

http://www.codebeautifier.com/

http://iceyboard.no-ip.org/projects/css_compressor - an additional type of CSS compressor.

http://www.cssdrive.com/index.php/main/csscompressor/ - online CSS compressor, motorized by CSS Drive.

http://flumpcakes.co.uk/css/optimiser/

http://www.cssoptimiser.com/

CSS Layout and Menu Generator
http://csscreator.com/?q=tools/layout - online CSS layout generator to create fluid or set width float column layout.

http://www.prettyprinter.de/

http://www.inknoise.com/experimental/layoutomatic.php - The Layout o Matic robotically makes the CSS layouts.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php - The CSS basis prearranged changeable columned page-maker.

http://www.wannabegirl.org/firdamatic/ - the online table layout generator that allows you to make and customize layouts very easily.

http://www.scriptomizers.com/css/stylesheet_generator - a CSS stylesheet generator.

The http://www.qrone.org/cssdesigner.html

The http://www.colly.com/scripts/rollover.htm

http://www.listulike.com/generator/ - make cross-browser list based navigation bars.

http://www.webmaster-toolkit.com/css-menu-generator.shtml - CSS-menu generator.

Miscellaneous Tools
http://www.roundedcornr.com/ - the emperor of the internet rounded corners generators with gradient.

http://riddle.pl/emcalc/ - estimate the Em dimension equal to px size.

http://www.css-ref.com/ - examine your CSS code.

http://www.cssfly.net/ - simple source code viewer as well as editing web sites directly.

http://services.immike.net/css-checker/ - discover CSS selectors which are not used by your HTML files and might be redundant.

Tags: Popular CSS Online Tools