Referencing Multiple CSS Classes
"Hi. I just tripped on your site ...I was playing with some news boxes here and was wondering if I wanted to see what might be the best way to create a class - say pastel_boxes and then just be able to pick 'blue, green' whatever. In other words I can write a class for blue, one for gray, one for green, one for green with double border etc but most of the code is the same so it seems a waste...
Burt"
We can define the box and then define each background color in a separate class. When we write the HTML we can refer to the class for the background color we want. The color classes are reusable.
CSS
Copy and paste this in your style sheet.
HTML
Copy and paste this in your Blog or Web page.
It will look like this.
Positioning
We defined classes for left, right, and center. Now we can combine the classes to color and position the box.
Copy and paste this in your Blog or Web page.
It will look like this.
W3C
All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet:
The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure.
One can address all elements of the same class by omitting the tag name in the selector:
.pastoral { color: green } /* all elements with CLASS pastoral */
W3C
Overheard
Overheard: RoadApples is floating left and right with a nice black and white family photo. Claude posts the old black and whites but today she is Jackie. Shirl does this Monday Madness thing and for this first time ever there was an answer that is surprising. Is Stu colorblind or does the orange box look red? Hey, he's talking about me. He admits that Opera fans are losers but only because he probably figured out that I'm hooked on the latest release of Opera working so fine with Opacity (CSS3 Specs!).
Does anyone know how we can do the topics like Gary Turner's right sidebar topics without faking it? Does it require PHP?
E=mc²
E=mc² Stu will be celebrating Einstein's birthday today. I think we are supposed to visit him and read. He probably won't be serving any Pi, even though today (March 14 or 3-14) is Pi Day, the day we celebrate our favorite number 3.14159Copy and paste this in your blog or web page.
It will look like this.
E=mc² Stu will be celebrating Einstien's birthday with the rest of the world. And more text goes here. And more text goes here. And knowing Stu, the text will be interesting with a whiz bang punch. Or, something like that. I'm just typing for demonstration. Is this what you wanted Stu? We need to type in enough text to demo what it might look like on your page.
Pantone Illustration
Pantone presents us with the fashion color report for spring. The colors alone don't look so exciting but the way the report combines the colors looks great and looks like the colors we are using to update our spring wardrobes. Does this have an impact on Web Color trends? Oh yes. Fashion colors go from our clothes to our walls and are incorporated into our Web designs. As standalone colors they don't do much, but pair them or mix them up and even these colors can strut their stuff.
Spring Fashion Colors in hexadecimalPantone Fashion Colors
The colors here may not match PANTONE-identified standards. We sampled the colors in Adobe to get the Web equivalent color.
Daisy likes the way the drop cap makes its own little box, which is a good reminder that everything in CSS is a box. And because it is a box we can take our crayons out and color the background and outline the box. The letter "D" for Daisy is in a box, the paragraph is a box, and every piece of text here is in a box.
The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look. We put our drop cap in a span
We made a few adjustments to the drop cap.
background:khaki;We added a background.border:1px solid darkkhaki;We added a border around the drop cap.margin-right:5px;We added a margin to the right of the boxed drop cap.margin-top:5px;We explicitly set the top margin.
Khaki Drop Cap: 80 Pixels
This is a drop cap with a khaki background, white text, and a darkkhaki border. We used named colors so that we can make changes to the code easy. It might look better with a colored border. And we would likely want to change the color of the drop cap. We used the named color white.Copy and Paste this in your Blog or Web page.
It will look like this.
This is a drop cap with a khaki background, white text, and a darkkhaki border.Firebrick Drop Cap: 80 Pixels
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.
Copy and Paste this in your Blog or Web page.
It will look like this.
Mike Golby might like the background color firebrick better than gold.Drop Cap Letters
Claude noticed that some letters look better than others. Magazines sometimes change the wording of a sentence for the sole purpose of using a nice "T" or "M" for the first big letter. Notice the differences in the letters.
BMore named colors are in the Web Color Names Chart
Update: RoadApples has a good rendition of the colored drop caps customized to fit his blog. And Shirl's version will knock your socks off. It really does look like an alphabet block.
The code for the dropcap is simple. We always put it in a paragraph and show the entire inline drop cap style so it looks like it takes more code than the drop cap itself requires. We use the inline span style since we don't use it often enough to justify adding weight to our style sheet. But, if we start using
it on a regular basis we would add the code to
our CSS (Cascading Style Sheet) so that we don't have to
type it in again each time we use the dropcap style.
The copy and paste CSS is here.
Let's try a few more sizes before we define the
dropcap style sheet code.
Drop Cap: 80 Pixels
This is a sentence.Copy and Paste this in your Blog or Web page.
It will look like this.
This is a sentence.Drop Cap: 60 Pixels
This is a sentence.Copy and Paste this in your Blog or Web page.
It will look like this.
This is a sentence.
