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

Using CSS in WS - where you put the code

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

CSS is short for "cascading style sheet" - CSS3 is the newest version
HTML is the stuff on the page basically, and CSS is the Style or what gives it all that snazzy look
Web Studio handles both for you but sometimes you may want to take it that next step.

There are 3 basic ways to use CSS External, Internal and Inline this how I do those in web studio.

An example would be text color, the text is HTML and the color would be CSS

It's not absolutely necessary to know why css goes where in Web Studio but a basic
understanding will help you use tutorials or add effects you may find online

An external style sheet is the most efficient when used for an entire website or a few selected pages.
It only has to load once then goes into your browsers cache plus you could change all those pages in one place.

You have probably seen those if you wanted use an a slide show other than the built in "flash".
An example would be an external file called style.css and in web studio a link to it from "Inside HEAD" like this


<link rel="stylesheet" type="text/css" href="style.css">

That link would go on each page you use those styles in

In web studio you use "Insert Page HTML" then
Copy/Paste the link code in the

You typically attach those to "website propeties"

A great shortcut to use in web studio for an external style sheet you use on every page is to
put the link in the HEAD on the master page then it will get written into every pages HEAD for you.



An internal style sheet is usually used for the styles on a single page and loads with your page.
The good thing is this way loads "before" your HTML and browsers read CSS almost instantly when done correctly.

You have probably seen this type of CSS used more often since it is the easiest to do.

An example would be the background page color, which you want in the HEAD before the page loads.
Web Studio puts that code in the HTML body tag in the page but it should be in the HEAD

<style type="text/css">
body {background-color:#800000;}

In web studio you use "Insert Page HTML" then
Copy/Paste the code in the

To make internal CSS faster and even more efficient you can put all code into one style tag
Like this for example

<style type="text/css">
.myborder {border:2px solid red;}

can be combined like this

<style type="text/css">
body {background-color:#800000;}
.myborder {border:2px solid red;}


<style type="text/css">
body {background-color:#800000;}

and this


I put "comments" right in my CSS as a reminder what does what when I look later

/* === A CSS comment example === */

This is a comment you can copy/paste

<style type="text/css">
/* === removes LINK borders === */
a, a:hover, a:selected, a:focus, a:active {
border: none; outline: none;
-moz-outline-style: none;
ie-dummy: expression(this.hideFocus=true);}
img {border:none;}

You put them inside your style tags like this -->


An inline style is used for a single thing on a page. This is what web studio mainly uses when it writes code for you, 
since it has so many people using such a wide variety of styles. We want to customize it more for our own use.

An example would be the font tag that controls the look of your text in web studio, (it should be in the paragraph).
Like this if you change the font size in web studio.

Your text

is changed to this

<FONT style="FONT-SIZE: 14pt">
Your text

What web studio does is use a division as a container then uses inline to position and size that.
Then it creates another division inside that and inline styles that for the contents.

That means we can take advantage of that, since CSS cascades all we have to do is put the styles where they should be. On a paragraph <P> which really controls text, or in the font tag for fonts.
Like this for example for a text shadow (IE won't see these until version 10, all normal browsers do though).

To see that you select your text and on the TEXT tab in "Clipboard" select "edit HTML"

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

With images what we can do is put the inline style inside the <img> tag
Like this for example if we want the image to be fixed (not move when you scroll down the page).

Select your image and on the HTML tab in
"Inside Object HTML" select "Inside Object" and copy/paste this


That puts the inline style inside the <img> tag

The CASCADE part of CSS
As I mentioned at the begining CSS is cascading style sheets
What that means is there is a priority of what gets used if there are two styles on the same thing.
The highest priority is the closest basically, inline is closer so gets used first, then internal in the HEAD then external.
So even if they are both in the HEAD, the lower or closer to the page gets used first.

The reason I'm mentioning that here is because we can take advantage of the cascade rule in web studio.
One way is if you add something with an external style sheet you can use a internel style in the HEAD to change it on one page

Lets take a real example, web studio put's an internal style for site links in the HEAD
You can change those with either with a "class" in certain links or by adding a style lower in the HEAD like this:

<style type="text/css">
a:link, a:visited { color:gold;text-decoration:none;border-bottom:2px solid silver;}
a:hover { color:silver;text-decoration:none;border-bottom:2px solid gold;}

In web studio you use "Insert Page HTML" then
Copy/Paste the code in the

That will make all your page links use a nice thick
border that changes color instead of just an matching underline.
Thats how cascading works


CSS in Web Studio 5 - using CSS in web studio - by Web Studio Next