• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: cascading style sheets

cascading style sheets

Styling Links with CSS

18 August 2008 / Leave a Comment

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

  • normal links
  • links that have already been visited
  • links that are being clicked on, and
  • links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

[Read more…] about Styling Links with CSS

Using CSS Shorthand for Fast-loading Websites

11 July 2008 / Leave a Comment

Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.

Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.

[Read more…] about Using CSS Shorthand for Fast-loading Websites

Styling Forms with CSS

22 November 2006 / Leave a Comment

HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.

[Read more…] about Styling Forms with CSS

Internet Explorer Conditional Comments

1 August 2006 / Leave a Comment

What are conditional comments?

Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.

[Read more…] about Internet Explorer Conditional Comments

CSS Floats

17 July 2006 / 15 Comments

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

[Read more…] about CSS Floats

CSS Positioning

15 April 2003 / 28 Comments

In this tutorial I’ll show you how to position images, text, and other elements on your page using CSS.

If you’ve been building Web pages for some time, it’s likely that you use HTML tables for laying out your pages. This used to be the only way to control the position of elements on the page. However, CSS2 (CSS level 2, the latest version of CSS at the time of writing) provides new ways to control positioning. CSS gives you control down to the pixel level, and it can also do some things which were harder or impossible to do with tables.

[Read more…] about CSS Positioning

Controlling Background Images and Colours

17 January 2003 / 6 Comments

This tutorial shows you how to work with the various CSS background properties. Using CSS, you can specify things like:

  • The background colour to use for a Web page, table, paragraph, etc
  • The background image for a Web page, table, paragraph, etc
  • Whether the background image scrolls with the page, or is fixed on the screen
  • Whether the background image repeats
  • The position of the background image

Adding a nice coloured or graphical background to your Web pages is a quick and easy way to spice up your site. However, it’s also very easy to make Web pages look horrible, or even unreadable with the wrong type of background! The section at the end of the tutorial will help you avoid some of the common pitfalls associated with backgrounds.

[Read more…] about Controlling Background Images and Colours

CSS Text Properties

3 October 2001 / 2 Comments

In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.

We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.

There are eight properties that can be used to control text appearance – word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. Let’s look at each of these properties in turn.

[Read more…] about CSS Text Properties

CSS Font Properties

2 October 2001 / Leave a Comment

In this reference we will look at how to control font properties using style sheets. This is a really useful feature of CSS because it means that you can avoid having all those <font> tags in your Web pages, and it allows you to easily control all your fonts simply by editing one style sheet file.

We’ll look at the different font properties that can be used with CSS, and explain each property with the aid of some real-life examples. Each example is shown as it renders in your browser.

There are six properties that can be used to control fonts – font-family, font-style, font-variant, font-weight, font-size and font. Let’s look at each of these in turn.

[Read more…] about CSS Font Properties

CSS Units

18 September 2001 / Leave a Comment

This reference lists all the units that can be used within CSS level 1 style sheets. The units are used to specify things like distances and colours.

The units can be grouped into four types: length units, percentage units, colour units and URLs.

[Read more…] about CSS Units

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits