In order add the background images and text styles to a website, we first need to create a separate style document - a CSS file. CSS stands for Cascading Style Sheet, and is so named because of the ‘cascading’ manner in which its hierarchy is laid out, and in the way that certain rules override others (in the event of conflicting instructions), depending on their position within a document.
For example, (without wishing to get too bogged down in the subject), if you’re using CSS styles in your HTML page, there are four main ways to define a style, and the ‘closer’ the style is to the page, the higher the priority it is given over other styles:
For anyone familiar with Quark Xpress, InDesign (or even Microsoft Word), you may well have already come across pre-defined styles. Basically, all you need to know about CSS (for now) is that CSS determines almost everything about how you page looks - how the fonts look, how and where the background images are placed, what happens when you rollover a link and so on and so forth.
This website focuses primarily on creating a 'static' website rather than a content managed website. However, I still use Dreamweaver when working with dynamic sites - and WordPress is my CMS of choice.
WordPress is by far the most used content management system on the planet - and if you want to dip your toe into creating database-driven websites, this is the one I'd suggest you use. In order to side-step overly complex coding, I use Toolset plugins to help me create complex functionality without worrying about how to code. I highly recommend you check them out if you want to move to WordPress development and you're concerned about PHP coding.
You don’t have to be a programmer to be able to do this.
It’s best practice to keep all of your global styles (by global I mean site-wide; styles that every page will use) within an external CSS file, and then to link that CSS file to your website pages, preferably via the template page we created.
From the New Document dialogue box:
Select Blank Page from the left, and CSS from the middle column (figure 1).
Then click Create.
Save the file to your website directory, either in the ‘root’ (top level folder) or in a different (but logically named) folder of your choice. I’m saving mine to the root directory and calling it ‘using-dreamweaver-styles.css’. The .CSS suffix is added automatically.
Once saved, you’ll notice that the CSS file is opened in ‘Code View’ with the following at the top:
/* CSS Document */
It’s handy to keep this open so you can see what’s going on, but not essential. There’s a nice, user-friendly CSS dialogue box which helps you create styles, and which writes the code to the CSS document for you based on your selections.
Next we need to link the CSS file to the template page...