Matt Doyle | Elated Communications
Web and WordPress Development
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
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.
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
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.
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.
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.
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.
This tutorial shows you how to work with the various CSS background properties. Using CSS, you can specify things like:
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
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.
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.
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.
Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits