of Magazine Style
The Joy of CSS
Mozilla Firefox and IE look the same
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others. The differences are nits. I think.
Copy and paste this in your Blog or Web page.
It will look like this.
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others. The differences are nits. I think.
Remove the Test Borders
The borders around the text are for testing in various browsers. It makes it easier to see what the code is doing. But, on this one I like the look with the borders. The colors aren't planned or intentional and can be changed or the code can be posted without the borders.
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others. The differences are nits. I think.
Copy and paste this in your Blog or Web page.
It will look like this.
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others. The differences are nits. I think.
Smaller Version with Borders
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it.
Copy and paste this in your Blog or Web page.
It will look like this.
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it.
Smaller Version without Borders
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it.
Copy and paste this in your Blog or Web page.
It will look like this.
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it.
1. Drop Caps or Big First Letter
1 One way to play with CSS is to use the drop cap code to make a big number. Now we only have 19 more ways to play in our Blog or Web page and I see some good funky browser examples at Arcadian-Expressions, an excellent demonstration of how the same code looks different in Mozilla and IE. We see circles in one browser and squares in another. I like it. Not so long ago we could code for the IE masses, now the browsers come in all 32 flavors.
Copy and paste this in your Blog or Web page.
It will look like this.
1 One way to play with CSS is to use the drop cap code to make a big number.
2. Put a Triple Border Around Image
2
Put a triple border around the image. The outside border color is #F60, the next border is ivory (ivory is background color for the div). The border directly around the image is yellowgreen.
We specified the image width and height in the div that contains the image and the same width and height on the image. The margin:0px auto; is there to automatically center the box.
Copy and paste this in your Blog or Web page.
It will look like this.
More on the triple border is here. Thanks to Cameron for the of the screenshot in Safari.
3. CSS Float Text Left and Right
3
Float Left
We can float our text to the left with ease.
Here we contained the text in a span and used the float:left to put it where we want it.
The text we type in the paragraph will automagically wrap around the text we floated to the left.
Float Right
We can float our text to the right with ease.
Here we contained the text in a span and used the float:right to put the text where we want it.
The text we type in the paragraph will automagically wrap around the text we floated to the right.
The Span This is the paragraph. We put a yellowgreen border around the paragraph and a brown border around the span so that we can see what the code is doing.
Copy and paste this in your Blog or Web page.
It will look like this.
Float Left
We can float our text to the left with ease.
Here we contained the text in a span and used the float:left to put it where we want it.
The text we type in the paragraph will automagically wrap around the text we floated to the left.
Float Right
We can float our text to the right with ease.
Here we contained the text in a span and used the float:right to put the text where we want it.
The text we type in the paragraph will automagically wrap around the text we floated to the right.
Blogger expects this to work the first time. I compose directly into Blogger, otherwise what's the use? But it's rare to get it right the first time. So I wait and wait for it to let me in again. Today it can't even display it's own screen and it lets us in about one in five tries.
4. CSS Text Overlay
Text Overlay
4 Text Overlay
Here we put the subtle words Text Overlay
over the 20ways.gif image using Inline CSS. The code is short and sweet. The text is 60% opaque so we can see through it.
Copy and paste this in your Blog or Web page.
It will look like this.
Text Overlay
Don't enter any line breaks <br>. It will throw the background off.
5. Quote Other Bloggers
5 The fifth fun way to play in your Blog is to talk about other Bloggers. Do you ever come across a great writer and think "wow, this is writing". It happened today while reading the Content Factor Blog, then I looked down at the Posted by Jeneane Sessum.
Jeneane Sessum, Partner and Senior Writer
From the public sector to high-tech, on both the agency and corporate side, Jeneane Sessum has developed and delivered thousands of pages of compelling content for some of the world’s leading brands, including IBM, The Home Depot, Cingular, Equifax, Kodak and others.
Highly respected for her award winning work, Jeneane is also an experienced journalist whose writing has been featured regularly in such publications as Computerworld, Software Magazine, Smart Partner, American Banker, Healthcare Informatics, Data Management Review, as well many other business and technology publications. She is also a noted Internet author and pioneering blogger who has been featured in the New York Times and other publications.
Content Factor
Some gals just get all the attention they deserve.
6. CSS Centered Bordered Box
6 The sixth fun way to play in your Blog is to make a centered bordered box. We do it here with inline CSS. You can always put the code in your style sheet. We have to demo it with inline style so that our own style sheet doesn't get too big. Inline, Internal, and External style will all produce the same result.
Centered Bordered Box
This is a centered bordered box. The background color is hexadecimal color FF6600. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a centered bordered box. The background color is hexadecimal color FF6600. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.
If you haven't figured it out yet, I just make this stuff up as I go along and it's usually typed straight into Blogger. Sure it's tested in IE, Firefox, and Opera (after the post) but it's not like I've ever read a book on CSS. If it works then it works.
7. CSS Simple Blockquote
W3C: The BLOCKQUOTE element
7 The seventh way to play in your Blog or Web page is to use CSS to style the blockquote element. We can add a CSS class for each unique quote style -- multiple styles for multiple uses.
By default the BLOCKQUOTE element indents a block of text. That makes it easy to style.
Our blockquote looks like this.
This text is inside of the blockquote. A blockquote is easy to style since the indentation is already done for us.
Copy and paste this in your CSS stylesheet.
Copy and paste this in your Blog or Web page.
The blockquote will look like this.
This text is inside of the blockquote. A blockquote is easy to style since the indentation is already done for us.
Blockquotes with an Image
Some like to add an image to the blockquote style.
This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too but for now let's use just the first quote.
Copy and paste this CSS in your style sheet.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too but for now let's use just the first quote.
Blockquotes with a Line
This is a blockquote with a line to the left
Copy and paste this in your CSS Style Sheet.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a blockquote with a line to the left
Blockquotes with a Border
This is a blockquote with a border. We specified the font color and more for this one.
Copy and paste this in your CSS Style Sheet.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a blockquote with a border. We specified the font color and more for this one.