CSS Float » CSSFloat http://www.cssfloat.com CSS Float tips, tutorials. Learn CSS Float. Sun, 10 Jan 2010 19:49:49 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 External Stylesheets http://www.cssfloat.com/external-stylesheets/ http://www.cssfloat.com/external-stylesheets/#comments Sun, 10 Jan 2010 19:48:21 +0000 CSSFloat http://www.cssfloat.com/?p=44 External style sheets are great for applying the same styles to multiple pages on a website. Unlike internal styles, which need to be added to every single page, external style sheets can be imported directly from a .css file. The .css file must be linked from within the <head> section of your web code.

Here’s the code to be placed between <head> and </head>:

<link rel=”stylesheet” type=”text/css” href=”cssfloat.css” />

Replacing cssfloat.css with whatever you named the CSS file.

If you want to take a look at the external style sheet which was previously contolling the CSS on CSSFloat.com, here it is – http://www.cssfloat.com/cssfloat.css

You can create a CSS file using any basic text editor, like NotePad. Instead of saving the document as .txt, hit the drop menu and select all files. You can then type in whatever.css and save the document as a cascading style sheet.

Benefits of External Style Sheets

The biggest positive of using CSS in external style sheets is mentioned above. The ability to apply the same styles to multiple pages, and thus the ability to change the whole look of a website by altering one .css file.

Other benefits include less code on your pages. Removing all of the on-page styles will reduce your page size. Consequently your pages will load slightly faster, the code will be easier to edit in future and search engine spiders will appreciate your greater keyword density!

]]> http://www.cssfloat.com/external-stylesheets/feed/ 2 CSS Style Tags http://www.cssfloat.com/css-style-tags/ http://www.cssfloat.com/css-style-tags/#comments Sun, 10 Jan 2010 19:03:07 +0000 CSSFloat http://www.cssfloat.com/?p=27 Style tags contain on-page CSS. Style tags can be placed anywhere within a document but are usually found within the <head> section.

For example, this sentence was styled by the CSS in style tags directly above in the HTML code.

Don’t believe me? You’ll have to right click and view the source code for proof.

Opening a style tag is simple, it’s <style>. To close the style tag, it’s like most tags, </style>.

Here’s the CSS code embedded in style tags on this page.

#onpage-example {color: #90C; font: 1.2em “Palatino Linotype”, “Book Antiqua”, Palatino, serif;}
]]> http://www.cssfloat.com/css-style-tags/feed/ 1 CSS – Class Verus ID http://www.cssfloat.com/css-class-verus-id/ http://www.cssfloat.com/css-class-verus-id/#comments Sun, 10 Jan 2010 18:57:35 +0000 CSSFloat http://www.cssfloat.com/?p=23 When coding CSS, the choice between using class or id can be confusing to inexperienced web developers. The main reason for this is because most web browsers simply skip over these errors and process class and id styles exactly the same.

The general rule…

If you intend to use the CSS style more than once on a page, the correct choice is class. Classes use the full stop symbol ‘.’.

For example…

.csscode {background: #0ef; padding: 15px; border: 1px dashed #00c;}

If you intend to use the CSS property only on one object per page, you should use ID. The hash sign ‘#’ is the symbol for ID.

#copyright {text-align: center; font: 0.8em arial; padding-bottom: 20px;}

Why is getting Class or ID important?

From a website visitors point of view, class or id does not matter. Even with errors the website will still look the same in most browsers. The importance of selecting the correct class or id syntax is more to do with web developers and search engines. Writing valid CSS helps fellow developers understand your code. There is also the unproven belief that valid CSS and HTML increases your chances of better search engine rankings.

To check if your website’s CSS is valid, visit http://jigsaw.w3.org/css-validator/

]]> http://www.cssfloat.com/css-class-verus-id/feed/ 1 CSS Float Right http://www.cssfloat.com/css-float-right/ http://www.cssfloat.com/css-float-right/#comments Sun, 10 Jan 2010 18:51:51 +0000 CSSFloat http://www.cssfloat.com/?p=18 Floating an element right is exactly like floating left, except the code is

{float: right;} ie. #floatrightexample {float: right;}

This time we’re going to be floating an image that already has its width defined. Hence, there’s no need to include the width in the CSS code.

Tmace - Upload GIF, JPG, BMP, PSP, PSD & more

Also, did you notice the change in the CSS code?

We used a ‘#’ instead of a ‘.’. This simply refers whether we’re using id or class, this is important for creating valid CSS.

The html code will look something like this…

<img id=”floatrightexample” src=”images/image.png” height=”100″ width=”100″ alt=”CSS float right example” border=”0″ />

]]> http://www.cssfloat.com/css-float-right/feed/ 0 CSS Float Left Example http://www.cssfloat.com/css-float-left-example/ http://www.cssfloat.com/css-float-left-example/#comments Sun, 10 Jan 2010 15:02:28 +0000 CSSFloat http://www.cssfloat.com/?p=5 Here’s an example of using CSS Float to float an item left.

The square below with a blue border is a div tag aptly named “floatleftexample”.


In order for the blue square to float left of this text, the floatleftexample div must be above this paragraph in the html code.

Float Left Code

Let’s start with the CSS code. This can be placed between style tags or in an external stylesheet.

.floatleftexample {float: left; width: 320px;}

That’s it! Pretty simple eh? Remember to include a width to make the CSS valid.

and the html code…

<div class=”floatleftexample”>Contents of the blue square</div>

<p>Text to the right of the Blue square.</p>

]]> http://www.cssfloat.com/css-float-left-example/feed/ 0