Posted by CSSFloat in Tutorials on 10. Jan, 2010 | 0 Comments
CSS Float is the best resource for learning how to use the CSS float property. We offer tips, tutorials and examples to help master the enigma which is CSS Float!
A brief intro…
CSS stands for Cascading Style Sheet. It’s incredibly useful for designing websites. Take for instance the colour, font, text-size of the h1 tag “CSS Float”, this was all set by CSS.
Posted by CSSFloat in Tips on 10. Jan, 2010 | 1 Comment
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>:
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.
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!
Posted by CSSFloat in Tips on 10. Jan, 2010 | No Comments
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.
Posted by CSSFloat in Tips on 10. Jan, 2010 | 1 Comment
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…
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.
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/
Posted by CSSFloat in Examples on 10. Jan, 2010 | No Comments
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.
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″ />
Posted by CSSFloat in Examples on 10. Jan, 2010 | No Comments
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.
Let’s start with the CSS code. This can be placed between style tags or in an external stylesheet.
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>
