CSS3 for Squidoo

Please Note: These tips have been customized for Squidoo lenses. They can't be used at HubPages.

Cascading Style Sheets

Cascading Style Sheets is a language used to describe the look and formatting of a HTML document (and other web based pages).

Primarily designed to enable the separation of content from presentation (colors, fonts, layout, etc) it allows multiple pages to share the same formatting (and therefore easier to implement site wide changes quickly and easily by editing the one file) it can also be used 'in-line', that is when the CSS code is nested in HTML tags such as paragraph <p>, bold <b> and other common tags.

Squidoo doesn't allow text formatting such as the <font> tag or page layout such as <center> but using the in-line tags a person can effectively implement a whole range of font colors, font types, background colors, borders and alignment.

With version 3 of CSS, many exciting features are being implemented. However not all of them can be successfully used in-line. Although only the most current browser versions support these effects such as Firefox and Safari.

Some require specific browser tags such as -webkit-border-radius: (for Safari) and -moz-border-radius: (for Firefox). But there is no harm done by including both, as browsers that don't understand these tags will just ignore them.

With the recent unveiling of the Code Capsule here at HubPages I thought it would be the perfect place to be home to a bunch of easy to copy and paste HTML/CSS text formatting tags.

Rounded Borders

If you've got some words that need highlighting or has a reason for wanting to draw extra attention, putting it in a box with or without a border will do the job.

You can take the edge off the sharp corners of the boxes/borders you want to put around your text.

<p style="background-color: #9ABDEC; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #0669B2; padding: 10px;">PUT YOUR TEXT HERE</p>

Rounded Borders (Specific Corners)

With a little bit of editing and experimenting you can move the rounded corners according to taste and aesthetics.

<p style="background-color: #9ABDEC; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border: 2px solid #0669B2; padding: 10px;">PUT YOUR TEXT HERE</p>

Multiple Columns

By simply changing the number from 3 to say 2 or 4 or 5 in -moz-column-count: 3;  and -webkit-column-count: 3; you can change the number of columns to whatever number you have nominated.

The text alignment is justified. If you wish to have it removed just delete the bit that says text-align: justify;

<p style="text-align: justify; -moz-column-count: 3; -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #dedede; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #dedede;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

More coming soon!

As I find new and exciting CSS3 code that can be used to create wonderful effects on your lens text, I'll add it here.

In the meantime you can get the basics (and also the more advanced looking formatting) here:

If you don't know what Squidoo is I suggest you read this hub.

More by this Author


Comments 7 comments

cindyvine profile image

cindyvine 7 years ago from Kyiv, Ukraine

Omigod, I read this all I really did, but it is so way over my head, I couldn't understand much of it!


darkside profile image

darkside 7 years ago from Australia Author

This hub is a bit more advanced in terms of user friendliness. The lens I did on Basic HTML is a far better introduction. But none of it applies to HubPages. I've published it here though as an excuse to use the nifty new Code Capsules.

As I add more code I'll just have to copy and paste it in rather than have to painstakingly fiddle with the formatting so it displays the code correctly as I have to do at Squidoo.


Ms._Info profile image

Ms._Info 7 years ago from New Jersey

Wow, didn't even know there was a code capsule. Thanks for the info!


Hawkesdream profile image

Hawkesdream 7 years ago from Cornwall

haha ditto Cindy, think I will stick to your first html hub.


Iphigenia 7 years ago

Interesting - can you tell us what we can best use the new code capsules for ? I thought that we couldn't much change the look of our hubs - so what use are those capsules ?


darkside profile image

darkside 7 years ago from Australia Author

@Iphigenia, the Code Capsule is to display code. So if a person is describing how code works in a tutorial, they can copy and paste it in there and it'll highlight parts automatically according to the type of code it is.


dipless profile image

dipless 7 years ago from Manchester

I use style sheets all the time at work, nice article I am going to have to write a hub to make use of the code capsules soon ;)

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working