CSS ScriptsCopy and Paste Code

"For People Who Make Mistakes" ...

CSS Scripts
By Michelle Goodrich -- Mandarin Design
(MARCH 2005)

There is no such thing as a CSS Script

There is no such thing as a CSS Script. CSS is not a scripting language but we know what you are looking for. Simple copy and paste code that includes CSS tips and tricks.

CSS: Fancy CSS

Magazine style is easy with simple copy and paste code for styled drop caps, small pullquotes, new orange pull quotes,

...this will look like some of the pullquotes and styles we see in magazinelayout...

opacity pullquotes, and easy pull quotes. A magazine cover and highlights are served cut and paste style in Text Tricks. Add Polaroid borders, triple borders, and float pictures left and right the easy way with tips and tricks in the Box Tips and FAQ sections.

Copy and paste this in your Blog or Web page.

<div style="text-align: justify;"><span style="color:firebrick;float: left; font-size: 80px; line-height: 60px; padding-top: 2px; padding-right: 5px;" times,georgia="">M</span>agazine style is easy with simple copy and paste code for styled <a href="http://www.mandarindesign.com/dropcaps.html">drop caps</a>,  <a href="http://www.mandarindesign.com/troops.html#smallpullquote">small pullquotes</a>, new   <a href="http://www.mandarindesign.com/troops.html#magazinelayout">orange</a> pull quotes,       
     
     <div style="float: right; width: 150px; height: 5em; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; font-family: Arial,Helvetica,Georgia; font-size: 22px; line-height: 18px; color: black; text-align: right;">     <span style="color: silver;">...this will</span>      look like some of the      <b>pullquotes and styles we see</b>      in magazine<span style="color: gray;">layout...</span>     </div>

opacity <a href="http://www.mandarindesign.com/troops.html#opacityblack">pullquotes</a>, and 
<a href="http://www.mandarindesign.com/troops.html#pullquotes">easy</a> pull quotes. A magazine 
<a href="http://www.mandarindesign.com/troops.html#magazinestyle1">cover</a> and 
<a href="http://www.mandarindesign.com/troops.html#magblender">highlights</a> are served cut and paste 
style in Text <a href="http://www.mandarindesign.com/troops.html">Tricks</a>. 
Add <a href="http://www.mandarindesign.com/boxes.html#polaroid">Polaroid</a>  borders,

<a href="http://www.mandarindesign.com/boxes.html#tripleborder">triple</a> borders, 
and float pictures <a href="http://www.mandarindesign.com/faq.html#floatimageleft">left</a> 
and  <a href="http://www.mandarindesign.com/faq.html#floatimageright">right</a>  
the easy way with tips and tricks in the 
<a href="http://www.mandarindesign.com/boxes.html">Box Tips</a> 
and <a href="http://www.mandarindesign.com/faq.html">FAQ</a> sections.
<br> <br>

</div>

It will look like this.

Magazine style is easy with simple copy and paste code for styled drop caps, small pullquotes, new orange pull quotes,

...this will look like some of the pullquotes and styles we see in magazinelayout...

CSS: Border Around Text

Put a border around the text

Copy and paste this in your Blog or Web page.

It will look like this.

Put a border around your text

CSS: Type in Italic Bold Font

Type in italic bold font

Copy and paste this in your Blog or Web page.

It will look like this.

Type in italic bold font

CSS: Make Font Size Bigger

Make the font size large.

Copy and paste this in your Blog or Web page.

It will look like this.

Make the font size large.

CSS: Change the Font Family

Change the font family

Copy and paste this in your Blog or Web page.

It will look like this.

Change the font family

CSS: Type in Italic Font

Type in italic font.

Copy and paste this in your Blog or Web page.

It will look like this.

Type in italic font

CSS: Change Text to Small Caps

Type in small caps

Copy and paste this in your Blog or Web page.

It will look like this.

Type in small caps

CSS: Make Text Bold

Make this part bold and the rest normal.

Copy and paste this in your Blog or Web page.

It will look like this.

Make this part bold and the rest normal.

CSS: Change the Letter Spacing

Change the letter spacing

Copy and paste this in your Blog or Web page.

It will look like this.

Change the letter spacing

CSS Drop Caps

Full instructions for making the first letter big are in the Drop Cap copy and paste style tutorial. For this one we forced the first big letter to span more than five lines. The font-size is adjusted to exactly 100 pixels while the line height is 80 pixels. You may want to try a line-height of 70 to control the white space. To make the top of the first big letter align with the text a padding of 1 pixel was added to make the initial letter drop down ever so slightly.

Copy and paste in your Blog or Web page.

It will look like this.

We are still creating new drop cap styles in the Drop Cap Tutorial

Where to go?

Mandarin is all about doing things the easy way with copy and paste code. We think the best page is the Main Mandarin page or the Blog.

If you want to look for easy CSS tips and tricks search for CSS. The confusion about CSS and scripting is likely because Javascript and other scripting languages use CSS but there isn't anything called a CSS Script.

Mandarin Recent Tips and Tricks

Polairoid Border
The Polaroid border is served copy and paste style.

Fashion Colors
The latest Web fashion colors.

Magazine Style
Magazine style cover image with a rainbow insert.