CSS3 for Squidoo
67Please 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.
PrintShare it! — Rate it: up down flag this hub
Comments
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.
Wow, didn't even know there was a code capsule. Thanks for the info!
haha ditto Cindy, think I will stick to your first html hub.
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 ?
@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.
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 ;)
cindyvine says:
5 months ago
Omigod, I read this all I really did, but it is so way over my head, I couldn't understand much of it!