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

The CSS Category

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

Add ons and tutorials for CSS to CSS3 using Web Studio 5

CSS is short for "cascading style sheet" - CSS3 is the newest version for up to date browsers
Basically HTML is the structure of a website page and CSS is what gives it the style or the look
CSS was essentially just the look with the advances to Css3 modules it now controls the look and feel of a website

• Using CSS in web studio - where you put the external, internal and inline CSS  
• Knowing how will help you use tutorials or add effects you may find online

• CSS & CSS3 links on Web Studio Next with descriptions, (this page).

• Applying the CSS3 box shadow to a web studio division (up to date image shadows)
• Applying a box shadow to a radius corner "Draw" shape

• Applying the CSS border to a web studio images
• Applying the CSS border to web studio image links

• CSS image shadows with MS filters - normal browsers use css shadows
• The MS filters are shadows for those old outdated IE8 and under browsers

• Basics about images on a webpage
• Using web studio for image optimization
• When to "insert a picture" or use "protected graphic"
• When to use a jpg gif or a png
• How to attach images for use with css
• Make an "HTML Object" look like an Image

• How to put a border on a web studio text paragraph
• Making the first letter in a sentence a larger fancy drop capitol
• Applying CSS3 text shadows
• Applying CSS3 paragraph shadows
• How to put a backround image in a paragraph
• How to control line spaces and text spacing with CSS
• How to float an image in a paragraph so text flows around it
• What WEB SAFE FONTS are and why they are important to understand
• What font stacks are and how to apply them

• How to use CSS to make your web studio page backgrounds do what you want
• Includes examples you can click on to see what the background code will do
• Faster Loading Background Color - a website basic
• Repeating Background Image - better way to do the background web studio uses
• Fixed Background Image - background stays put while the page content moves
• Positioning a Background Image - putting background images where you want
• Vertical Repeating Background Image - repeats down the page
• Horizontal Repeating Background Image - repeats across the page

• Applying CSS3 to web studio text links
• With CSS3 things got a little more interesting here are a few examples

Link Style Generator for making different looks for the text links on your page
• An older tutorial with an in depth step by step look at stying links for websites
Text Box / Flat Button Generator - I use these for almost all my website menus

• Mixed bag of CSS and CSS3 image tricks you can try
• CSS image replacement - making text for seo (like H1 headings) look like a picture
• Image with border-radius - making square pics use round corners
• Enlarge image on Hover inside a border
• Enlarge image on Hover
• Image tilt on Hover
• Image spin and round border on Hover

• Divisions are the individual sections web studio uses to put everything on your pages
• These are a few examples of what you can do with those
• Re-naming a div ID - example uses footer links to make a website menu
• Adding a div CLASS - example adds a caption with borders to an image
• Adding a CLASS and a DIV - example adds a CSS caption that works on hover
• Division Backgrounds in Web Studio - other effects you can do with DIVS on WS-NEXT
• Division Backgrounds using an HTML Object - neat stuff you can make those divs do

• Description of future link

• Description of future link

• Description of future link

• Description of future link

• Flip an image horizontal with CSS3 with another image on the back
• Flip an image vertical with CSS3 with another image on the back
• Flip an image horizontal with CSS3 and put text on the back

• As soon as I have time I'll be adding more CSS3 on this page
• Some more transition and transform css for images

• Description of future link

• Description of future link

• Description of future link

• Description of future link

• Description of future link

• Description of future link

Other CSS links on Web Studio Next

Where to find other css tutorials and effects

• Quicklinks has links to WSTV and the WS wiki which have many css tutorials

• The screenwide section uses CSS to make elements fit the width of the pc screen 

• 3 of the full screen tutorials use CSS, large image, stretch image & repeat image


Web Studio Next - CSS Tutorials & Add Ons - For use in Web Studio 5