Dreamweaver CSS Changing the Look of Elements Changing

Dreamweaver CSS – Changing the Look of Elements

Changing Elements • When we first looked at web pages we changed the way our text looked by marking it as “Heading 1”, “Heading 2”, “Heading 3”, “Paragraph” etc • Each of those looked different but the browser defined how the font, colour and size of these “tags” looked • With CSS we can change the look of these tags to match how we want our site to look

Basic Rules #1 • We can change the tag for an entire page using internal CSS • We can change the tag for an entire site using external CSS or a DW Template

Basic Rules #2 • We can change the tag for an entire page using the HTML tag associated with that element • We can change the tag for a section page using the HTML tag associated with that element, within that section

Basic Rules #3 • Style Sheets “Cascade” – that means they start at at the top and work down • So if we have <H 1> - the tag for Heading 1 – defined in CSS then the whole site will look the way you have defined it unless… • You define <H 1> for a particular section of your page, then the <H 1> looks the same everywhere except in that section

Methodology • We start off defining the general CSS of the site – the styles that will be used as default on your site, creating a consistent look • Then we look at each section of your site (say the menu, the header or footer) and decide which, if any, of these tags need altering • In general stick to a couple of fonts maximum

The CSS

The Clue 1: Nothing

The Clue 1: Nothing In our CSS panel the ‘body’ tag is selected – this is an HTML tag that refers to the body, the whole part of the page.

Body Tag Properties The current properties for the body tag are shown when selected: • Grey background • Main color (US spelling) black • Font Verdana • Text align center (US spelling) And so on. We can change any of these properties or add more using another panel reached by double clicking the word “body”

Body Tag Properties There are more options down the left hand side – play around with them and see what looks best

Changing Other Tags • You need to either – Define what tag you want to change – Select the tag on your layout • You can then change that tag just like you did with the body tag

Changing Header 1 Cursor here This is what we are looking at: <div #header><h 1> Click New CSS Rule

Dialogue Box Make selection less specific We can say where this rule is saved If we want to be specific (alter Heading 1 but only in the header part) then this is fine, however if we wantto change ALL the instances of H 1 then we click on “Less Specific” until we get where we want

Just the Element

We can alter all the properties

Alternatively You can choose any of the HTML tags to alter by using selector type “Tag”

The Clue 2: . This is called a “Class Selector” and enables you to define elements to a certain “class” of items. You can have as many classes in each page as you wish – here the class is the template name Draemweaver has created for us.

The Clue 3: # This is an “ID Selector” – it works the same as a Class Selector BUT only works on one part of the page (so you only have one header for example)