[Concept COWBOY CONCEPT] >> This video shows you how CSS Designer works [Concept COWBOY CONCEPT] and how easy it is to manage CSS using CSS Designer in Dreamweaver.
[Concept COWBOY CONCEPT] You'll work with the Cowboy Concept page design to explore the Dreamweaver workspace.
[Concept COWBOY CONCEPT] The webpage design is simple containing a full screen background image, [Concept COWBOY CONCEPT] a header with branding and navigation and headline and body tags.
[Concept COWBOY CONCEPT] If I change the width of the live view surface, notice that the design adjusts its layout across [Concept COWBOY CONCEPT] screen sizes from small to medium to large.
[Concept COWBOY CONCEPT] You will explore how to use media queries to create this effect.
[Concept COWBOY CONCEPT] So let's dive in.
[Concept COWBOY CONCEPT] Create a new site and point it to the style webpage CSS folder.
[Concept COWBOY CONCEPT] Open the index dot HTML file and explore the code.
[Cowboy Concept] The file includes the HTML structure for the page, but it doesn't have any CSS applied yet.
[Cowboy Concept] You will use CSS designer to add styles to the page.
[Cowboy Concept] By default, CSS designer appears docked in the panels on the right of the workspace.
[Cowboy Concept] If you need to, you can open it from the window menu [Cowboy Concept] or by resetting the workspace on the top right.
[Cowboy Concept] I'll drag to dock CSS designer by itself [Cowboy Concept] so it's easier to see and collapse the panels on its right.
[Cowboy Concept] Also knows that you can drag the panel to change the layout, [Cowboy Concept] so that you have more room while editing properties.
[Cowboy Concept] Let's attach the supplied CSS file and take a closer look.
[Cowboy Concept] Click on the plus button on the sources area of CSS designer.
[Cowboy Concept] There are three ways that you can add CSS to the page.
[Cowboy Concept] You can create a new CSS file, [Cowboy Concept] attached an existing CSS file or define styles directly on the page.
[Cowboy Concept] Choose the attach option and browse for the main dot CSS file [Cowboy Concept] in the CSS folder, then click okay.
[Concept COWBOY CONCEPT] In code view notice that the file's attached to the HTML page in the head tag.
[Concept COWBOY CONCEPT] In live view notice that the page updated with the background image and style text.
[Concept COWBOY CONCEPT] Let's explore the CSS that brought the page to live.
[Concept COWBOY CONCEPT] In CSS designer, notice that there are two main ways to find and explore code using the all [Concept COWBOY CONCEPT] and current tabs at the top.
[Concept COWBOY CONCEPT] Select all to show all the styles attached to the HTML page.
[Concept COWBOY CONCEPT] This provides a great way to get an overview of how the CSS is organized.
[Concept COWBOY CONCEPT] You can view computed styles by selecting an element and clicking on the current tab.
[Concept COWBOY CONCEPT] Computed styles show properties and selectors for the current selection in Dreamweaver [Concept COWBOY CONCEPT] including inherited styles and styles attached directly [Concept COWBOY CONCEPT] to the selected element.
[Concept COWBOY CONCEPT] Switch back to all, to show all styles and notice that the media section of the CSS designer [Concept COWBOY CONCEPT] is used to define media query regions.
[Concept COWBOY CONCEPT] Media queries enable you to change [Concept COWBOY CONCEPT] the design based on certain conditions such as screen size.
[Concept COWBOY CONCEPT] You can see here that there are two media queries in the attached CSS.
[Concept COWBOY CONCEPT] And when you're ready to add styles, that's easy to do.
[Concept COWBOY CONCEPT] Let's add a class to style the H1 text.
[Concept COWBOY CONCEPT] Select the H1 tag in live view, [Concept COWBOY CONCEPT] look on the plus button and add a class named dot headline.
[Concept COWBOY CONCEPT] Press the enter key, then select the main dot CSS source [Concept COWBOY CONCEPT] and press enter again to create the class.
[Concept COWBOY CONCEPT] Right click on the class in live view and choose [Concept COWBOY CONCEPT] go to code to navigate to the CSS in code view, [Concept COWBOY CONCEPT] and you can see that the class appears at the bottom.
[Concept COWBOY CONCEPT] So I'll drag the class above the media queries [Concept COWBOY CONCEPT] to group up with the default code at the top of the page.
[Concept COWBOY CONCEPT] Next, add properties to format the element.
[Concept COWBOY CONCEPT] Select the H1 element in live view and select the headline class in CSS designer, [Concept COWBOY CONCEPT] you will find it under global at the bottom of the selectors list.
[Concept COWBOY CONCEPT] In the properties area, notice that you can filer properties by category.
[Concept COWBOY CONCEPT] Click on the text button to filter to text properties.
[Concept COWBOY CONCEPT] Set the font size to pixels with a value of 64, [Concept COWBOY CONCEPT] set the line height to EM [Concept COWBOY CONCEPT] with a value of 0.95.
[Concept COWBOY CONCEPT] Click on the layout properties button and add a margin bottom property set to 10 pixels, [Concept COWBOY CONCEPT] and then click on the show set option to filter the view [Concept COWBOY CONCEPT] to only show the properties you just added.
[Concept COWBOY CONCEPT] Next, update the class across media queries.
[Concept COWBOY CONCEPT] Right click on the headline class and select duplicate intermediate query.
[Concept COWBOY CONCEPT] Choose the 768 pixel media query.
This step copies the code.
[Concept COWBOY CONCEPT] Select the 768 pixel media query in the media area, [Concept COWBOY CONCEPT] then select the headline selector in the selectors area [Concept COWBOY CONCEPT] and notice that just the set properties have shown because the show set option is still selected.
[Concept COWBOY CONCEPT] Update the font size property to a value of 90, update the line height property [Concept COWBOY CONCEPT] to a value of 0.85 and update [Concept COWBOY CONCEPT] the margin bottom property to 30 pixels.
[Concept COWBOY CONCEPT] Repeat the process to update the font size in the 1024 pixel media query.
[Concept COWBOY CONCEPT] Right click on the headline selector and duplicate it into the 1024 pixel media query.
[Concept COWBOY CONCEPT] Select the media query in the media area, then select the headline selector.
[Concept COWBOY CONCEPT] Update the font size to a value of 120 [Concept COWBOY CONCEPT] and update the line height to a value of 0.9.
[Concept COWBOY CONCEPT] Update the margin bottom to 20 pixels.
[Concept COWBOY CONCEPT] In code view you can see that you've updated the class to show large text [Concept COWBOY CONCEPT] when viewed on larger screens [Concept COWBOY CONCEPT] and you can see that we created copies of the headline class in both of the media queries.
[Concept COWBOY CONCEPT] [Concept COWBOY CONCEPT] CSS designer's integration with the dream we've a workspace, [Concept COWBOY CONCEPT] makes working with CSS layouts a snap.
[Concept COWBOY CONCEPT] You can easily create selectors by selecting an element [Concept COWBOY CONCEPT] in live view or the DOM panel.
[Concept COWBOY CONCEPT] For example, let's try to use the DOM panel to generate a new selector for the paragraph tag.
[Concept COWBOY CONCEPT] Switch back to source code to view the DOM [Concept COWBOY CONCEPT] and then select the paragraph tag in the DOM panel.
[Concept COWBOY CONCEPT] Notice that you can browse the entire page's code structure [Concept COWBOY CONCEPT] in a very easy way, [Concept COWBOY CONCEPT] collapse the DOM panel and return to CSS designer, select main dot CSS in sources, [Concept COWBOY CONCEPT] then select global in media, then click on the plus button in selectors.
[Concept COWBOY CONCEPT] Notice that Dreamweaver generates the selector with two levels of specificity, [Concept COWBOY CONCEPT] body and paragraph.
[Concept COWBOY CONCEPT] At this point you can use the up and down arrows to change the level of specificity.
[Concept COWBOY CONCEPT] Rules with more specific selectors have a higher priority in the mix of things.
[Concept COWBOY CONCEPT] Unchecked show set to show all options available for the new selector, [Concept COWBOY CONCEPT] edit the text properties and set the font size to pixels [Concept COWBOY CONCEPT] with a value of 15 and set the line height property to EM [Concept COWBOY CONCEPT] with a value of 1.75.
[Concept COWBOY CONCEPT] Duplicate the style into the 768 pixel media query, [Concept COWBOY CONCEPT] select the media query, [Concept COWBOY CONCEPT] then select the paragraph selector to view its properties, [Concept COWBOY CONCEPT] update the font size with a value of 18 and update the line height [Concept COWBOY CONCEPT] with a value of 1.5.
[Concept COWBOY CONCEPT] [Concept COWBOY CONCEPT] Finish by duplicating the paragraph selector into the 1024 pixel media query.
[Concept COWBOY CONCEPT] Select the media query and then the selector.
[Concept COWBOY CONCEPT] Update the font size property to 24 pixels and then click on the trash can icon to delete [Concept COWBOY CONCEPT] the line height property.
[Concept COWBOY CONCEPT] We'll use the same settings as seen in the 768 pixel media query, [Concept COWBOY CONCEPT] so there's no need to duplicate the line height property again.
[Concept COWBOY CONCEPT] And in my view notice that the text styles adjust across screen sizes [Concept COWBOY CONCEPT] as I change the size of the live view surface.
[Concept COWBOY CONCEPT] You can also use live view to easily navigate to code attached to elements.
[Concept COWBOY CONCEPT] For example select the H1 tag again and right click on the headline class.
[Concept COWBOY CONCEPT] Choose go to code and notice that you can navigate to the original headline selector [Concept COWBOY CONCEPT] or either variation in the media queries.
[Concept COWBOY CONCEPT] Choose one of the media queries and notice how code view in CSS designer update.
[Concept COWBOY CONCEPT] You can also use go to code by right clicking on the media query in the visual media query bar.
[Concept COWBOY CONCEPT] For example, right click on the 768 pixel media query [Concept COWBOY CONCEPT] and notice that line numbers are shown to make it easier to differentiate [Concept COWBOY CONCEPT] the media queries and navigate to your code.
[Concept COWBOY CONCEPT] You can also find styles attached to elements using inspect mode.
[Concept COWBOY CONCEPT] Click on the inspect mode button [Concept COWBOY CONCEPT] and move the cursor over elements to highlight them [Concept COWBOY CONCEPT] and show their code in CSS designer.
[Concept COWBOY CONCEPT] Double click on an element to leave inspect mode.
[Concept COWBOY CONCEPT] [Concept COWBOY CONCEPT] So you can see how easy it is to craft your webpage design.
[Concept COWBOY CONCEPT] Navigate your code by viewing all selectors at once or use context sensitive editing [Concept COWBOY CONCEPT] to adjust styles attached to selected elements.
[Concept COWBOY CONCEPT] [Concept COWBOY CONCEPT] With CSS designer managing your code and understanding [Concept COWBOY CONCEPT] how it all fits together is easier than ever.
[Concept COWBOY CONCEPT] So give it a try.
[Concept COWBOY CONCEPT]
