CSS StyleFun with CSS
"For People Who Make Mistakes"...
| Page Down to View All Style Tips | ||
| EASY | FUN & FANCY CSS | BLOCKQUOTES TYPOGRAPHIC CONTROL |
Combining Borders and Text Overlay
Noded is posting photographs with a Polaroid style border.
The border looks like this.
Copy and paste this in your Blog or Web page.
It will look like this.
For one-time or occasional use CSS Inline Style works fine.
If you want to reuse the Polaroid effect you can add the style
to your external style sheet or in the HEAD section
of your page.
We used an image that is the same size as a Polaroid, a 216 x 216 pixel square, but the borders work well on any image size. The trick was to use negative spacing to move the text Image by TypoGenerator up inside the border.
Where do you put the style code?
If you are using a template look for
the <style type="text/css"> and
put the code below it. Noded added a class
named polaroid to the style sheet
for easy reference. The style looks something like this.
CSS
To reference polaroid and polaroidtext type this in your Blog or Web page.
Code to type in your Blog or Web page
It will look like this.
Using CSS allows you to control Kerning and Leading by adjusting the line-height and the letter-spacing.
Leading is the spacing between lines while Kerning is the spacing between letters. If you want to make your font more readable you can adjust the CSS default spacing between lines. The default is 120% of the type size. Let's see this in action.
This is a small font with the line-height set to 120%. The default is 120% of the type size. So, the line height here will be the same as the default. This text is easy to read for those with perfect vision.
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
This is a small font with the line-height set to 150%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Copy and paste (or type) this in your blog or Web page.
It will look like this.
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
The CSS style sheet code would look something like this.
p {line-height:140%;}
Kerning is the spacing between letters. Adjust the kern for headlines, subheadings, or other special effects. If you want your letters spaced tighter than normal you can adjust the CSS spacing between letters using a negative number. Let's see this in action.
This is a line of large text with the letter-spacing defined as -1px.
You can decrease the kern by specifying a negative number for the letter spacing.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
Your Text Goes Here. The text will be tighter than usual.The CSS style sheet code would look something like this.
p {letter-spacing:-1px;}
The letter-spacing here is 4px
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HEREThe line-height
and
letter-spacing
can be specified in your external style sheet, internal style, or inline as demonstrated.
h1
heading tag we can control the word-spacing between each word in the style sheet like this.
h1 { word-spacing: 1.1em }
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.
In this playful HTML CSS journey we are explicitly telling the browser the width and height for better control.
For the number 20 we are telling the browser where we want the top margin and the line-height for this font size.
The defined width is 375 pixels wide. We are suggesting to the browser that we would like to limit the width to 375 pixels wide. We had to fiddle with it to get the width just right. IE automatically stretches wide enough to display the content but the best practice might be to specify the width.
We have to tell Mozilla Firefox the
height so we put in height:475px;.
Mozilla wants explicit directions.
In IE the height doesn't have to be defined.
It will stretch to fit.
We used background:black;. If we change that to background:transparent; then our natural background
color will show through.
We can change the background to any color name that the browser recognizes. We use named colors that browsers recognize including white, pink, yellow, lemonchiffon, yellowgreen, ivory, hotpink, and lightseagreen. It's easier to adjust the color name than the hex or RGB color.
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.
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.
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.
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.
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 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 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
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 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.
Don't enter any line breaks <br>. It will throw the background off.
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 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.
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 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.
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.
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
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.
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.
These three classes work well together. We named the classes thinborder, dropcap, and pullout.
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}
.dropcap {
float: left;
font: normal 60pt/0.8em Georgia,
Helvetica, Verdana, Arial,
sans-serif;
color: yellowgreen;
margin-right: 3px;
}
T
.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,
Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin-top:20px;
margin-left:15px;
clear: both;
}
...you don't have to know CSS to use this one
1. Copy and paste the CSS classes.
The CSS that goes in the top section between the <HEAD> and </HEAD> of the template or
in the external style sheet looks like this.
<style type="text/css">
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}
.dropcap {
float: left;
font: normal 60pt/0.8em Georgia,
Helvetica, Verdana, Arial,
sans-serif;
color: yellowgreen;
margin-right: 3px;
}
.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,
Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin:5px;
clear: both;
}
</style>
2. Copy and paste the HTML your Blog or Web page.
It will look like this.
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.
For instant results take this code with you. There is no need to modify the style sheet. Just instant copy-and-paste results (including the image and text).
Copy and paste this in your Blog or Web page.
It will look like this.
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.
Some like to add an image to the blockquote style.
For this one we
added a quote image to the blockquote
and the unquote to the paragraph <p> tag.
This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too by adding another image named unquote.gif. Thank you Claude for the quote mark images.
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 by adding another image named unquote.gif.
This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.
Copy and paste this CSS in your style sheet.
It will look like this.
This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.
The example uses black for text and white for the background of the pullquote. This is all you need for the full effect on your page with your background color. There's no need to change either color, especially the white.
Note that you will not actually see the color white, it is the color that we are using for the blend. The text color can be changed any other color but try leaving the background white to see the blend.
Copy and paste this in your Blog or Web page.
It will look something like this.
We are in a div here that has a width of 500 pixels.
The pullquote to the right is 150 pixels wide. It helps to have enough text on
the left to make the pullquote looked pulled. This will look like some pull quotes
we see in magazine layout.
The spill is intentional but not necessary. Also, you can type in as much text as you want. The colors are easy to change. We used the colors #FF6600, gold, and orange.
Copy and paste this in your Blog or Web page.
It will look something like this.
Hover over the square link. That's pure CSS in action and it only needs to be added to the style sheet once. The link squares have CSS opacity hover applied. There isn't any OnMouseover scripting for this hover effect.
Change the background to an image. You can continue to type and see how it looks when your image repeats.
Copy and paste this in your Blog or Web page.
It will look like this.
Change the background to an image. You can continue to type and see how it looks when your image repeats.
Change the background color to yellow. Then continue typing and only the text inside of the span will be highlighted.
Copy and paste this in your Blog or Web page.
It will look like this.
Change the background color to yellow. Then continue typing and only the text inside of the span will be highlighted.
Using CSS inline style allows you to change the text color in a sentence or an entire paragraph.
Copy and paste this in your Blog or Web page.
It will look like this.
Using CSS inline style allows you to change the text color in a sentence or an entire paragraph.