Cascading Style Sheets (CSS) Tutorials and Tips

Tutorials and tips for using Cascading Style Sheets (CSS) on your website. Includes workarounds for bugs in the various browser implementations of CSS.

Boxes

• How to Centre a DIV Block Using CSS
• How to Create Rounded Corners for Your Box Borders in CSS
• How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
• How to Create a Coloured ("Colored") Box in HTML/CSS
• How to Add a Shadow to a Box in HTML/CSS
• How to Set the Height of a DIV Relative to a Browser Window (CSS)

Colours ("Colors")

• How to Change the Background Colour of a Web Page in CSS (HTML/CSS)
• How to Create a Coloured ("Colored") Box in HTML/CSS
• How to Make Your Links Change Colour When a Mouse Hovers Over It (Using CSS)

Fonts

• How to Use Web Fonts: CSS Tutorial
• What is the Best Font Size for a Web Page? And How to Change Font Sizes with CSS

Images

• How to Centre an Image with CSS
• How to Make Your Images Mobile-Friendly (Responsive Design)
• How to Hide Images on a Website When It is Viewed on a Mobile Phone
• How to Rotate an Image on a Website When Viewed on a Mobile Phone (CSS)
• How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)
• How to Make a Sticky Image that Stays at a Fixed Position Even When a Web Page is Scrolled (CSS/HTML)
• How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)
• How to Embed a Background Image in CSS to Get a Self-Contained Web Page

Layout

• How to Design a Two Column Layout for Your Website Using CSS
• How to Make a Two Column Website Layout Mobile-Friendly
• How to Make a One Column Website Mobile Friendly (HTML/CSS)
• Free Mobile-Friendly Layout Wizard
• How to Make a Persistent Header, Footer or Image that Stays at a Fixed Position Even When a Web Page is Scrolled (CSS/HTML)
• How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)

Tables

• How to Give Alternate Rows of a Table a Different Colour (HTML/CSS)
• How to Give the Cells of a Table the Same Width in HTML (HTML/CSS)
• How to Centre a Table Using CSS in Nvu and KompoZer

Links

• How to Make Your Links Change Colour When a Mouse Hovers Over It (Using CSS)
• How to Remove the Underlining from Links (HTML/CSS)
• How to Change the Colour (Color) of Links on a Website with Expression Web
• How to Change the Colour (Color) of Links on a Web Page with BlueGriffon
• How to Remove the Underlining from Your Links (Nvu/KompoZer)

Menus and Navigation

• Navigation Menu Wizard - automatically generates a navigation menu with buttons
• How to Create 3D Buttons Using CSS
• How to Add a CSS Navigation Button Menu to Your Site with Nvu
• How to Add a CSS Navigation Button Menu to Your Site with KompoZer
• How to Make a Persistent Header, Footer or Image that Stays at a Fixed Position Even When a Web Page is Scrolled (CSS/HTML)

Responsive Design

• How to Make a Mobile-Friendly Website: Responsive Design in CSS
• How to Make a Two Column Website Layout Mobile-Friendly
• How to Make Your Images Mobile-Friendly (Responsive Design)
• How to Hide Images on a Website When It is Viewed on a Mobile Phone
• How to Make a One Column Website Mobile Friendly (HTML/CSS)
• Free Mobile-Friendly Layout Wizard - automatically generates a phone-friendly 2 column layout

Text

• How to Centre ("Center") Text on Your Web Page with CSS
• How to Create Hanging Indents in HTML and CSS
• How to Double-Space Text and Change the Line Spacing on a Web Page (HTML/CSS)
• How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)
• How to Use Small Capital Letters for Lowercase and Large Capital Letters for Uppercase (CSS)
• How to Indent Alternate Lines with HTML/CSS
• How to Prevent Two or More Words from Being Split into Separate Lines (HTML/CSS)
• How to Use Letters and Roman Numerals in Numbered Lists (HTML/CSS Tutorial)

Other Specific CSS Techniques and Tricks

• How to Put Rounded Buttons on Your Website
• How to Add a Tooltip in HTML/CSS (No JavaScript Needed)
• How to Add a CSS Rule to Your Web Page
• How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes
• How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)
• How to Create 3D Buttons Using CSS
• How to Make a Persistent Header, Footer or Image that Stays at a Fixed Position Even When a Web Page is Scrolled (CSS/HTML)
• How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)

Introductory CSS Tutorials

• What is HTML, CSS, JavaScript, PHP and Perl? Do I Need to Learn Them to Create a Website?
• Brief Introduction to Cascading Style Sheets (for those who know HTML)

Other CSS Tutorials

• HTML and CSS Validation: Should You Validate Your Web Page?
• How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

New Articles

• How to Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
• How to Set the Height of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some Other Audio Clip) from a List on a Website
• How to Draw a Horizontal Line on a Web Page with Expression Web
• How to Create a Website Free of Charge
• Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
• What's the Difference Between a Domain Name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS

thesitewizard™ News Feed (RSS Site Feed) 

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

How to Link to This Page

It will appear on your page as:

Cascading Style Sheets (CSS)