CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Working with Paragraphs and Text

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

PARAGRAPH BORDER - This is an example. See how there is a border and some nice spacing around this paragraph?
You could add a web studio "draw shape" behind your text but those are images and can add up.
This way uses no images, will load instantly, the text is centered and we can control the rounded corners

You put your text on the page like you always do and use transparent background

Select your text and on the
HTML tab in "Insert Object HTML"
copy/paste this in
"Inside DIV"

 class="paraborder"

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style type="text/css">
.paraborder{
border:1px solid grey !important;
padding:6px 6px !important;
background-color: #3d3d3b !important;
border-radius:6px;}
</style>

Preview to see it working to change the look:

PARAGRAPH DROPCAP - This is an example. See how there is a larger letter at the beginning of this paragraph?
You could in web studio select it make it larger and add the color. But when you do it this way you can control where it get's placed so it looks a little better I think. This one I combined with the paragraph border but you don't have to.

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and paste this in front of your first letter

You put your text on the page like you always do and use left alignment

<SPAN class=dropcap>P</SPAN>

Then delete your letter and replace "P" with it

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style type="text/css">
.dropcap{
float: left;
font: 36px/36px georgia;
color: goldenrod;
margin-top:-6px;}
</style>

Preview to see it working to change the look:

DROPCAP with a background color and a border. This is kind of a neat look too so I thought I'd add it as well

DROPCAP BORDER - Left is an example. See how there is a border and background color around the dropcap and in  
modern browsers also rounded corners.

Select your text and on the  TEXT tab in "Clipboard"
select "edit HTML" and paste this in front of your first letter

You put your text on the page like you always do and use left alignment

<SPAN class=dropcapborder>D</SPAN>

Then delete your letter and replace "D" with it

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style type="text/css">
.dropcapborder{
float: left;
font:bold 30px/30px georgia;
color: white;
margin-top:-3px; margin-right:4px;
background:goldenrod;
border:2px solid grey;
padding:0px 3px;
border-radius:6px;}
</style>

Preview to see it working to change the look:

TEXT SHADOW - This is an example. I use this on practically all my pages.
The IE browsers don't catch up until IE10 but all the normal browsers see it.
There is two ways I like to do it, with a class when I use it a lot and inline for one offs.

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

You put your text on the page like you always do, this is the "class" method

<P class=textshadow >

<P> means it's a Paragraph
If you don't see a <P> tag center align once

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style type="text/css">
.textshadow {text-shadow:1px 2px 0px #000;}
</style>

You put your text on the page like you always do, this is the "inline" method

Preview to see it working to change the look:

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

<P style="text-shadow:1px 2px 0px #000;" >

If you don't see a <P> tag center align once

Inset text shadow example

Pretty cool looking huh? The problem as usual is the IE browsers so we have to wait, I just stick with simple shadows for now.

Outline text example

PARAGRAPH SHADOW - This is an example. I'm adding a shadow to the paragraph border on this one.
This uses the "image shadow" tutorial and applies it to paragraphs.
I think it's a good way to put some depth to a page, and it's done the same way as images.

PARAGRAPH SHADOW - This is an example. This example is a regular paragraph,
with a "colored background" done in web studio like you always do
and applies the "image shadow" tutorial to it.

To use the image shadow tutorial with a regular text paragraph you just select your text instead of an image

To use the "image shadow" with the "paragraph border" you do as the tutorials say then
combine the two classes "Inside Div" like this:

class="paraborder nextshadow2"

PARAGRAPH IMAGE - This is an example. I'm adding an image background to the paragraph border on this one.
We add another line to the "paragraph border" code and attach an image to website properties for this.
I put a shadow too if want to do that just combine the two classes like the above example.

PARAGRAPH IMAGE - This is an example. This one is a regular paragraph using the "inline" method
that I mentioned in the text shadow tutorial above, you attach the image the same way.
In case you just want to apply it to only one paragraph without a border.

For images for these you can start your search looking for "background tile"

You put your text on the page like you always do, this is the "class" method

You can use .jpg .gif or .png images for these. When you re-name the image use the matching extension

Re-name your image tile1.jpg and
attach it to
"wesite properties"

This is the tiny image I'm using

it's under 1kb so background tiles are very efficient

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

You put your text on the page like you always do, this is the "class" method

<P class=parapic >

<P> means it's a Paragraph
If you don't see a <P> tag center align once

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style type="text/css">
.parapic{
border:1px solid grey !important;
padding:6px 6px !important;
background-color: #3d3d3b !important;
background-image:url('tile1.jpg');
border-radius:6px;}
</style>

You put your text on the page like you always do, this is the "inline" method

Preview to see it working to change the look:

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

<P style="background-image:url('tile1.jpg');" >

If you don't see a <P> tag center align once

"PARAGRAPH TEXT SPACING"
georgia fonts at 12
THEN SPACING
THE LETTERS &
THE LINE HEIGHTS

This one you can see inside web studio without preview
To change the look: play with the % and the em numbers

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

You put your text on the page like you always do, this uses the "inline" method
I'm adding the "paragraph border" and "paragraph shadow" like shown above.

<P style="line-height: 150%; letter-spacing: 0.1em" >

If you don't see a <P> tag center align once

"Paragraph Image Float" This is one way you can place an image inside some text, and have the text flow around the image. Again I'm using the border and shadow from above but you don't have to.

In web studio you have to preview to see the image

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

You put your text on the page like you always do, this uses the "inline" method

<P><IMG style="MARGIN: 0px 0px 0px 8px; FLOAT: right" src="float1.png" width=50 height=50>

If you don't see a <P> tag center align once

You can use .jpg .gif or .png images for these. When you re-name the image use the matching extension

Re-name your image float1.jpg and
attach it to
"wesite properties"

This is what that code does if you want to change the look:

WEB SAFE FONTS - This is something I should mention here.
Just because you have a font on your computer doesn't mean all computers will have it.
So for websites you use what are called "Web Safe" or fonts common to most computers
These are some tips I suggest for web studio

Web Studio Setting Change web studio tries to help by changing "un-safe fonts" into images. You don't want that to happen because search engines can't see your text as images,
no text no content. With no content your site won't get found.

Click on "Website Properties" in "Miscellaneous"
uncheck
Convert objects with Non-Web-Safe fonts into a graphic

Web Studio also tries to help by showing you "safe" and "un-safe fonts" in the "gallery" text button.
That isn't exacly correct though, GEORGIA for example is an excellent font for headings but is listed "un-safe"
I suggest doing a search for "web safe" fonts

I suggest using the most common web safe fonts, but IF you use a font that is slightly questionable
you can then use what is called a "font stack" The example is left but I won't know what you'll see?
The Calibri font is on 83% of window pc's but only 39% of macs

"FONT STACK a PARAGRAPH"
calibri fonts at 12
FOR THIS EXAMPLE
I'M ALSO USING A
LINE HEIGHT OF 120%

WHAT A FONT STACK DOES
A font stack allows you force a selection of fonts in order. A web browser will go
through the list and use the first one that is available on that computer

Put your text on the page like you always do
then on the "text tab" select the font
you want to use

Select your text and on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

<P style="FONT-FAMILY: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; " >

If you don't see a <P> tag center align once

You replace the part in RED with the font stack you found.
An important note is if there are quotation marks inside the stack
like "Segoe UI" change those to apostrophe's like this 'Segeo UI'

There is also a way to use Fancier Typography in web studio with Google Fonts
that tuorial is here:

TIP

CSS in Web Studio 5 - paragraphs & text - by Web Studio Next

Thank-you

aaaaaaaaaaaaiii