Unit 3 - CSS & Dreamweaver

Cascading Style Sheets

Cascading Style Sheets are used to take the content in the <body> section of a web-page and display it. There are three ways to add styling to a page:

  1. By adding it directly into a specific HTML element, also known as inline.
  2. By including it in the <style> section in the <header> of a page's HTML. This is called an embedded style.
  3. By attaching an external style sheet which just contains CSS which is called surprisingly enough, external CSS.

My philosophy on styling and HTML is that HTML code should only contain content with no styling and that all CSS should be either embedded at the top of the page, if it is a stand-alone page or attached to the page using an external style-sheet. I usually use external style-sheets because it is easy to get a consistent look and feel in a website if all the pages share common styling elements.
Dreamweaver allows a user to easily update all three kinds of styles by either using the Properties Panel in the Compact view or the CSS Designer Panel.

A glossary of CSS Terms can be found here. If you click on each question, you will be taken to the answer on that page or a second page, both of which I style using an external style-sheet.

Inline Styles

As noted above, I rarely use Inline Styles except perhaps on an <img> tag to set the height and width of a picture.
Using the Properties panel under CSS, I could change the font, font style, font weight, font style or color using the panel below. This would then add a "STYLE=" attribute into the HTML code making it an inline style.

Embedded Styles

Using the CSS Designer Panel you can click on <style> and it will let you select or add (use the +) an HTML tag, ID, or class and it will place that CSS into the <head> of the page.


External Style Sheets

You can also use the CSS Designer Panel to select an external CSS page. In the panel to the left, you can see "nav_menu.css" which is the name of the external style sheet I am using to style the navigation menu on this page.

So, here is an example of some external CSS. This code will default the margins and the padding on a page to zero to prevent a user from picking up a browser's default settings.

The Box Model

The concept of the box model is that every HTML element on a page is surrounded by a border. There is padding between the content and the border. There is a margin that separates each element from the other elements on the page.

If you use the analogy of a gift in a box, the gift is the actual element such as the text or an image. The border is the actual box itself, the padding is the area where you put the bubble-wrap between the gift and the box, and the margin is the distance between this box and another one. I have drawn a quick graphic in Fireworks to illustrate this point.

One of the nicest things about styling in Dreamweaver is how easy it is to set the border, margin, and padding.

Border

To set the border in Dreamweaver, use the Border Panel. Select a color, a width and a border style and Dreamweaver builds the CSS for you. HOW NICE!


Margin

To set the margins in Dreamweaver, use the Margin Panel. Type in the size of the margins and you are done. You can set the number by clicking on it. You can also set the units by clicking on px and selecting any of the option including "auto" if you want to center the element on the page. The little chain in the center
allows you a link all the values and set them all as one for a more uniform look.



Padding

To set the padding in Dreamweaver is exactly like setting the margins. You can also go into design view and if you click a number and slide your mouse at the same time, the number will change and you can see the effect immediately in the design view. (this works with margins also).

This is a super nice tool because you can quickly set these values and not have to bounce back and forth between views or see how it looks in a browser.


Easy to Modify

One of my favorite things about Dreamweaver is how easy it is to change some of the more complicated CSS elements or the less thought of ones. You just go to the right panel in the CSS Designer, select the property and many times, Dreamweaver will give you a list of options. This is especially nice with font-family and since more advanced CSS, Dreamweaver will actually import fonts for you.

Even if you are hand-coding your CSS in Dreamweaver, as you type, it will prompt you with the CSS keywords as seen here with "font" and then once font-style is chosen, it offers up all of the possible options that can be selected.



My biggest issue with Dreamweaver was when I had multiple styles, I constantly found myself updating the wrong style-sheet because I kept forgetting to select the one I wanted to updated from the "sources" panel.

In the blue boxes below are three of my favorite CSS options made easy with Dreamweaver.

Text

It is so easy to change the font and the characteristics of the font with Dreamweaver. The Font Panel below allows a user to pick the color of the text, the font-family, the font style (such as italics), the font-variant (such as all letters in small caps), the font weight and size. Another nice feature is you simply click on your choice for text alignment.




Box Shadow

A Box Shadow, or Drop Shadow, is an effect that is applied to an element to make it look like a light is shining on it, casting a shadow and making it look raised off the page. This is one of those fun CSS options that I never used when hand coding because it was too difficult to remember the format of the CSS. In Dreamweaver, you simply specify the size of the shadow off the element (h is for horizontal and v for vertical), you set the size of the blur and you pick the color. Now there is a drop shadow which gives the web-page an extra "pop!"


Border Radius

Border Radius will take the sharp edges of a rectangle and round them so a page doesn't look overly "boxy."

Choose "4r" if you want each side of a curve to be the same. Choose "8r" if you want to set each of the eight points. Then type in the size of the curve you want. A low number will give a very gentle curve, while if you pick a large enough number, your box element will turn into an oval.

This is again one of those CSS elements I would never use if Dreamweaver didn't make it so easy.


Setting Backgrounds

Setting the background in Dreamweaver is easy also, the panel floating to the right allows you to pick a background color, or a url to insert a picture as a background, or it allows you to build your own gradient as a background and automatically builds that complicated CSS. Dreamweaver also allows you to select if you want the image to repeat, or if you just want it to repeat on the X or Y Axis by just clicking on the boxes. One of my favorite option is background-attachment:fixed; which prevents the background image from scrolling, as I have done on this page.

The image below if from the gradient panel which allows you to build a background gradient for a page or an HTML element. This can give anything from a nice rainbow effect to a gentle lightening or darkening of a background. The color selection seen below is what I used for the buttons on my ITSE2313 Index page that links to each of the class assignments.



Changes I Made to Existing Pages

The first thing I did was update the HTML and the styles for the CSS Anchor assignment we did in class. You can see that here. I updated the HTML on the first page to add the anchor tags by using "id=". I had originally put them in <div> tags but the <div> tag resulted in a line break which looked really bad. I finally figured out that the best place to add the "id" tag was directly into the "li", so the resulting line tag looks like this: <li id="a1"> For the second page, I saw that someone had forced that questions to start with "8" and there as no list in the second page, so I added an ordered list and forced the order list to begin at "8," I used the "start" attribute, so the ordered list tag looks like this: "<ol start="8">" I then made the rest of that page an ordered list so I could style them both with a single external style sheet.

I had used CSS consistently on my pages when I first did them, so the next change I made was to remove Carolyn's banner and add mine to assignment 1. Because the size and the colors of the two banners were different, I had to redo most of the CSS on those pages to move things around a few pixels here and there to get everything to line up.

I then decided I wanted a single style sheet for all my pages for the header, navigation menus and footers so that each page would look similar. This also would allow me to easily add the same elements to new pages by just using the same ID names and attaching the "nav_menu.css" style-sheet which is attached to almost every page.

Finally, I really had fun with the CSS Transitions, so I did three pages where I explored transitions which are linked to from the navigation menu at the top and bottom of this page.

CSS Transitions

This is the CSS Transitions panel which is floating off to the right. CSS Transitions are a way to display changes to an element without using Javascript or Flash animation.

For example, using the pseudo class "hover," when the mouse is hovered over an element, you can change any number of characteristics, for example, you can change the background color from blue to red. The one drawback is that the change is immediate and that could be jarring to a viewer. With CSS Transitions, you can add time factors to make the transitions smoother and more interesting, such as make an image grow out of the page, or have text slowly appear.

This is the CSS Transitions panel which I used on my "TRANSITION" pages which are linked to above. In this example, I had text that was hidden under an image that I wanted to make visible. I had the text in a <div> with a class of "hidden_text" When the mouse hovered over the hidden_text <div>, I added a transition which had a duration of a half of a second and a delay of half a second. The three properties I set were opacity which changed from zero to one (that would render invisible text as visible so it make it look like the text popped out of the picture. I also included a text color transition (from white to black) and a Z-Index transition which pulled the text from behind the image to in front of it. You can see that in action on the transitions 3 page.