CSS From the Ground Up: User Styles

User Styles

User style sheets may well be the unsung heroes of CSS. Around since CSS1, the ability for a user to create a style sheet to override any author styles has significance that most of us have missed out on. User styles are those styles created by the user of a site rather than the site’s developer.

Last week, we took a look at browser styles, which fall to the extreme bottom of the Cascade. To review, the Cascade is a hierarchy of application which defines how various styles integrated with documents are applied. Browser styles are those styles that define the browser styles, and it makes sense that they take the bottommost place on the totem pole when it comes to application. Browser styles are only applied when no other styles are present. This is why h1’s look big, bold, and ugly if we don’t style them.

User styles are at the very top of the heap. Styles created by the user take precedence over any other style with only one exception that I’ll discuss in a bit.  You’ll learn to create and implement a user style sheet with Dreamweaver, but before we get to that, I want to give you some more detailed background so as to understand the rationale for user style.

Read More

Exploring Browser Style

New Series Overview:

Welcome to a new premium content series on CSS and Dreamweaver. CSS from the Ground Up is a bit different than the other CSS series and articles found currently on DMXzone. This series, instead of focusing on an individual technique per article, will teach you to become not only a good CSS designer, but one who understands the language in-depth as well as being capable of gaining great results within the Dreamweaver work environment. But instead of each article being heavy on theory, the majority of learning is achieved within the context of Dreamweaver, allowing you to learn how to work with CSS on an expert level without having to leave the comfort of the design and development environment with which you are familiar.

Read More

A Beginners' Guide to CSS Backgrounds

Backgrounds are one of the cornerstones of CSS-based design. At a basic level they allow you to put some colour or an image behind your elements. Sure, that doesn't sound too fancy. But once you get the hang of applying backgrounds to boxes you'll have a tool that is flexible and powerful.

In this tutorial Matt is going to take us through the basics of CSS backgrounds, how they work and some techniques that make them useful. In particular he'll be focusing on how to use them in Dreamweaver MX 2004.

Read More

Transforming a table based layout into valid XHTML/CSS

As we know, XHTML and CSS should help us to; reduce load times and bandwidth costs, ease maintenance and associated costs and ensure compatibility with newer browsers and web browsing user agents.

But what happens when we've got an existing web site – it's all laid out just so, but it's not in valid CSS/XHTML and, worse than that, there are TABLES everywhere?

Well, Michael Koch's put together a nice sample project here that will show us step-by-step how to take a table-based multi search engine site and convert it into valid XHTML/CSS markup. The article is accompanied by a resource file to help you replicate the venture.

Read More

CSS Units

This tutorial is about the units used in CSS, about the uses and pitfalls of the various methods of measuring CSS styled elements. Starting with font sizes we'll move on to boxes and positioning elements. Looking at the advantages and disadvantages of the different units of measurement we'll try to give you some clues on what you could use where (and some things to avoid). Oh, and of course we'll make sure we take into account the idiosyncrasies of different browsers along the way. 

So, if you're confused about ems, or perplexed by percentages, this is a good introduction to the hows and whys of unit setting.

Read More

A Photo Album Site in PHP, MySQL, XHTML and CSS: Pt.IV

In the last part of Rachel's tutorial on building a photo album site (especially to show off your holiday pics) we'll be putting the finishing touches to the skeleton you've already constructed. Here we'll add a bit of functionality to enable the viewer to change the main photograph, or select a completely different album to view.

Previously in this series we've set up the CSS/XHTML framework, then created the database, and in the previous article coded the basic logic behind the image display.

Read More

A Photo Album Site in PHP, MySQL, XHTML and CSS: Pt.III

In the previous instalments of this multi-part tutorial on building a website to show our holiday images, we firstly constructed an XHTML/CSS framework for the site, and secondly created a database to store our photographic information.

In this third part we're going to be working with that data as we start to build our dynamic pages. More specifically we'll be concentrating on displaying pictures from our default photo album.

Read More

Stylesheets for all Occasions

Just starting out with CSS and wondering what all the fuss is about?

If so, then this article by Matt Machell might help you out. Here Matt will show you how a change of stylesheet can make the same file of marked up text have a very different look. Of cause it's not just an aesthetic point, different stylesheets can help customize your presentation for different types of media and users with varying requirements.

Read More

A Photo Album Site in PHP, MySQL, XHTML and CSS: Pt.II

In the first tutorial of this series we embarked on our mission to provide a website for displaying our holiday pics, by creating an XHTML/CSS layout that would provide a suitable framework.

In this second step we're going to look at how to create a suitable database for holding our photographs. The database we'll be using is MySQL and, as an aside, to carry out our tasks we're going to make use of a freely downloadable tool called MySQL Control Center.

This tool is available from MySQL and during the course of this tutorial we'll look at using it to work with MySQL. If that's not to your taste though and you prefer another tool, or even working at the command line, then no matter there's still plenty in the tutorial to keep you interested.

Read More

Playing With the Edges: CSS and Curves

  The problem with a great many CSS-based designs, is that they tend to look very blocky. Mainly due to the inbuilt box model and border controls that CSS contains. 

But CSS designs don't have to be boxy. In this tutorial aimed right at beginners to CSS, we're going to look at ways in which you can take those sharp corners off a CSS-based design, by adding some curves and a bevel or two.

All you'll need is some basic experience of hand-coding HTML and CSS experience to make full use of this tutorial, but Dreamweaver MX 2004 will help you speed up the creation of the CSS. Don't worry if you haven't hand-coded HTML before, Matt will take you through it step by step.

If you enjoy this tutorial you may like to read Matts companion piece: CSS Tabs for Beginners.

Read More

A Photo Album site in PHP, MySQL, XHTML and CSS: Pt.I

The summer holidays are here for many of us and when we return we will have a whole bunch of photographs to show off to friends and family, and what better way than to create a site to display them on. This series of tutorials will show you how to create a site that allows the dynamic display of photo galleries using PHP and MySQL, along with a CSS layout for the design of the gallery site. 

In this first tutorial of a series we will construct the layout of the site ready to display our images dynamically.

Note: Check also the DMXzone own CSS Image Gallery extension for amazing pure CSS galleries and slideshows with a fluent navigation and image transitions!

Read More

Drop Down Menus With Standards

Drop Down Menus have been part of the DHTML dictionary for a long time. They're a popular way to cram lots of navigation elements into a small amount of space. They work in a similar way to the menus that everybody is used to using in other programs, so offer a familiar environment.

The trouble is that many of the DHTML menus you'll find out there are from the bad old days of the browser wars, they use huge amounts of code to check for compatibilities, and fail to take into account accessibility or web standards. 

In this article we'll look at some of the ways you can build a Drop Down menu using CSS and W3C DOM (document object model)-based JavaScript. We'll also look at some options for improving the menu's accessibility.

A basic knowledge of JavaScript and CSS is recommended for this tutorial.

Read More