Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April

 Moving from Photoshop to Fireworks to a web prototype  videos/fireworks-pro-series-from-photoshop-to- fireworks-to-the-web/ videos/fireworks-pro-series-from-photoshop-to- fireworks-to-the-web/

 CSS stands for Cascading Style Sheets and controls the style and formatting of your content.  CSS can allow for different viewing on different platforms including mobile, text readers and what your page will look like when printed.

 CSS Zen Garden

 Embedding an external style sheet This goes in the HEAD section of your HTML file.

All CSS is written in the format: selector { property: value }

 When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.  A font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

The id Selector  The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#”.  HTML: CSS: #wrapper{ property:value; }

The class Selector  The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.  This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

 Example HTML: CSS:.column{ property:value; }

 Use an ID selector for elements that only appear once per page (eg header, menu, footer etc)  Use a class selector for elements that will be used multiple times (eg. Paragraphs, columns etc)

 color:#ffffff  background:url(image.jpg) #ffffff;  font-family:Verdana, Geneva, sans-serif;  font-size:10px;  margin-left:auto; Commenting within CSS /* This is a comment */  You can find a more comprehensive list here:

DIV tags You can style a DIV tag and use CSS that affects all the content within it. For example Site contents go here The CSS file contains this: #container{ width: 500px; margin-left: auto; margin-right:auto; padding: 20px; border: 1px solid #666; background: #000000; }

Spans  Spans are very similar to divisions except they are an inline element versus a block level element. No line break is created when a span is declared.  You can use the span tag to style certain areas of text, as shown in the following: This text is italic

Combining selectors: h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }

Creating a horizontal navigation bar  When creating a horizontal navigation bar, best practice is to use an unordered HTML list, styled with CSS. Sounds ridiculous, but with a few css styles, it works. We need to style both the list itself ( ) and the list items ( ) For example...  ul#navigation { float:left margin: 0; padding: 0; width: 100%; background-color: #039;  }

 List items are normally block elements, but by switching the display from block to inline, you force the list elements to line up next to one another. ul#navigation li { display: inline; }  The following code changes the link colour when you hover over. ul#navigation li a {color:#333; } ul#navigation li a:hover { color: #999;}

 Absolute positioning allows you to set a position to the pixel.  Can use absolute positioning to make divs overlap.  Eg  Floats are used with dynamic content or flexible layouts.

Source:

 Read me!

 Google have a range of webfonts that are easy to use within your website. You can download the font to design with it in Photoshop and they also give you the code to stick into your HTML/CSS files to implement it.

 Create a new HTML & CSS file and link them together.  In the HTML file, create a header div, a navigation div, 3 columns of content and a footer. (With dummy content please!)  In CSS, use floats to position all of your content.  Use a minimum of 10 CSS styles to style the look of your content.  Use a font from Google Fonts

 