Lesson 4: Working with CSS

Dreamweaver CSS Designer Panel:

The CSS Designer Panel computes the final CSS display and allows you to add/edit CSS styles. Features four panes/windows

• Sources - shows you the CSS applied to the page in total. This includes external and embedded stylesheets.
  
• @media – Shows any media queries applied
• Selectors - Shows all the rules applied to the selected element. The most powerful rules appear at the top of the selectors window
  • If you click on an element and select computed in the selectors window it will show all computed styles for that element
• Properties - shows the list of css properties you can style for that element. If you click on show set, it only shows the properties that make up the rule

CSS Designer View Modes:

All - lets you see and edit all rules associated to a document
Current - lets you see the rules applied to the selected element

We will set our CSS Designer to show ‘All’ Rules

Basic CSS Styling:

Classes - Classes can be re-used multiple times on a page and can apply to any element.
Written as: .classname

IDs - IDs can only be used once on a page and have a high specificity.
Written as: #myid

Elements or ‘hi-jacking the tag’ - Re-styling the properties of an html element. Applies to all on page or in a specific section if you are using descendant selectors.

Creating and Attaching Stylesheets:

Creating a New Stylesheet:

• Click File > New
• A dialog box will open
• Select CSS File from the Document Type
• A blank CSS file will be opened for you
• Click File > Save as
• Make sure to save your style sheet in the root of your website folder and give it a descriptive name. IE: styles.css

Attaching a Stylesheet:

• Open the .html page that you wish to add the style sheet to
• Expand the Sources window in the CSS Designer Panel
• If no sources exist, Click the Attach new source button
• From the drop down select ‘Attach existing stylesheet’
• Browse to select your style sheet
• Verify that the “link” option button is selected
• Click on conditional uses:
  • Select media as screen
• Click ok

If file already has a stylesheet attached, you can add more by clicking the + icon next to the sources heading

Creating/Editing CSS Rules with the Designer Panel:

The Dreamweaver CSS Designer Panel gives you multiple options to add CSS rules based on the element you choose. You can create new classes/IDs. Style existing portions of a document using the tag selector bar or re-style standard HTML elements. Style properties are broken up into 5 main categories (Layout, Text, Border, and Background)

Creating a CSS Rule to Style an HTML element:

• Click the plus sign (+) in the Selector Window in the CSS Designer Panel
• In the textbox that appears you can type in the name of the element you would like to style
  • IE: h2
  • Note: if you need help finding the correct element, click on the what you would like to style in design view and use the tag selector bar to isolate it
• Make sure to un-check ‘Show Set’ In the Properties window of the CSS Designer Panel so you can see all properties available for styling
• Use the Properties window to select the styles for your element
• Save your Changes

Creating a new rule for a Class:

• Click the plus sign (+) in the Selector Window in the CSS Designer Panel
• In the textbox that appears you can type in the name of class you would like to create.
  • Make sure to put a period in front of the class name
  • Do not put spaces in class names! If your class name is two words or more either use a hypen, underscore or use intercaps or make it all one word.
  • Examples: .class-name, .className, .classname, .class_name. are all acceptable
• Once you’ve named your class, make sure it’s selected in the Selectors Window
• Un-check ‘Show Set’ In the Properties pane of the CSS Designer Panel so you can see all properties available for styling
• Use the Properties pane to select the styles for your class
• Save your Changes

Creating a new rule for an ID:

• Click the plus sign (+) in the Selector Window in the CSS Designer Panel
• In the textbox that appears you can type in the name of ID you would like to create.
  • Make sure to put a # in front of the ID name
  • Do not put spaces in ID names! If your ID is two words or more either use a hypen, underscore or use intercaps or make it all one word.
  • Examples: #my-ID, #my_ID, #myID, #myid
• Once you’ve named your ID, make sure it’s selected in the Selectors pane
• Un-check ‘Show Set’ In the Properties window of the CSS Designer Panel so you can see all properties available for styling
• Use the Properties window to select the styles for your class
• Remember you should only use an ID once on a page
• Save your Changes

Applying Styles to Elements:

• Select an element to style while in Design View
  • Remember to use the tag selector bar for help selecting the element if necessary
• Select the style from the Class drop down in the properties panel
• Save your Changes

Editing a Stylesheet:

• Click the CSS rule you wish to edit in Selectors pane of the CSS Designer Panel. The properties will be displayed in the properties pane
• Edit any of the CSS properties you wish
• Save your Changes

Copying styles from one CSS Rule to Another:

• Click on the rule that has the styles you wish to copy
  • To Copy all styles: Right click > Copy All Styles
  • To Copy styles from a specific category: Right Click > Copy Styles > Copy ‘Text’ Styles
• Click on the rule you wish to copy the styles to
• Right click > Paste Styles

Copying Styles from an Embedded Stylesheet to an External Stylesheet:

• In Split view find the <styles> tag in the <head> section at the top of the HTML document
• Select the styles you wish to copy to a new external style sheet
• Paste the styles into your external stylesheet
• Remove the <style> tag

Working with Media Queries:

Creating a New Media Query

• Click the plus sign (+) in the @media pane in the CSS Designer Panel
• A dialog box will open
  • Select the condition type from the media drop down (IE: min-width)
  • Enter the condition values (IE: 768px)
• You can see your media query listed in the @media pane

Add Styles to a Media Query

• Click on the media query from @media pane in the CSS Designer Panel to select it
• In the Selectors pane, click the plus sign (+) to add a new rule
• Follow the steps to add a new rule
• The rule should be created inside of the media query and only be applied when those conditions are met.

Note: When creating/editing CSS rules, you must always save the changes to your main CSS file otherwise the styles will be lost