css cascading style sheets. “cascading” example (inline style) html the image aligns left and
TRANSCRIPT
CSS
Cascading Style Sheets
“Cascading”
Example (inline style)
HTML<img src=“flag.jpg" align="left" hspace="20" vspace="10">The image aligns left and allows text to wrap around with a small gap
CSS<img src=“flag.jpg" style="float: left; margin-top: 10px; margin-right: 20px; margin-bottom: 10px">The image aligns left and allows text to wrap around with a small gap
Example (header style)
<HEAD><STYLE type="text/css">H1{Font-Size: 76pt;color: teal;background-color: turquoise;border: thick indigo solid;padding: 20px;}</STYLE></HEAD>
<BODY><H1>Presentation</H1>Subjects with strong contrasts between light and shadow generally look more interesting (but avoid too extreme shadows and contrast unless really necessary). <H1>Subjects</H1>Subjects with strong contrasts between light and shadow are more 3-dimensional and have depth. Look for back lighting combined with a fill in flash to light subject from back and front to avoid distracting/deep shadows (see close up of heads below).<H1>Props</H1>Appropriate props can make subject look more compelling, natural and composed in their surroundings (e.g. books, clipboard, stethoscope, etc.)</BODY>
Advantage of CSS
• More control over formatting and layout• Can make changes easily• Consistency• Used widely• Good for creating a “brand” look• The preferred choice• The use is encouraged by w3.org
Example (External Styles)
mystyles.css
H1{Font-Size: 40pt;color: teal;padding: 20px;}
P{Font-Size: 40pt;color: teal;}
Link mystyles.css to web page:<HEAD>
<link href=“mystyles.css" rel="stylesheet" type="text/css">
</HEAD>
Insert tags - styles applied automatically:
<H1> composition</H1><P>photography is important to web page design</P>
WYSIWYG editors
Dreamweaver and Expression Web allow styles to be changed either by:• typing directly in the source code (the code is
prompted as you type)• using the CSS panel/window
Dreamweaver CSS Window
Expression Web CSS Window
Formatting using CSS
Exercise - style a restaurant menu
1. Start Dreamweaver2. Create a new blank web page (File > New > Blank page)3. Click on the blank page (design window, not source)4. Click File > Import > Word document and find indianmenu.docx
Dreamweaver can import Word documents with formatting intact, saving you time
Importing a restaurant menu from MS Word
1. Click anywhere inside the table.2. Click <table> in the bottom left:3. In the Properties window (along bottom), find the border setting
and change it to 0. (if Property window is not visible, click Window > Properties). This turns off the border. Also set the table width (W) to 700 pixels.
The table helps position the content. Table width can be in pixels (fixed width) or % (percentage width, e.g. 90% = 90% of the available screen)
Modifying and setting up table layouts
1. Click underneath Soups and before the word “MULLIGATAWNY” then click Insert > Table. Create a 2 row, 3 column table, width 700px and border=0
2. Drag the soup dishes into the table cells:
3. Under the Side Dishes create another table with 3 rows, 3 columns and move the dishes into the table cells
Inserting more tables
1. Here is a picture of the resulting page so far.
Modifying table column widths
1. Click anywhere in the top table, then select table in the bottom left:
2. Click View > Visual Aids and check Table Widths3. Drag the columns to get exact measurements:
4. Repeat steps for other tables
Modifying table column widths
1. All the tables should be matching:
Modifying table column widths
Changing the text formats
1. Format the text using <h1>, <h2>, <p> etc. to get implicit coding.2. Select the heading “Restaurant Menu” and change to Heading 1 using
the Properties window.
3. Select Appetisers, Soups and Side Dishes and change these to Heading 24. The text in the table has the <p> or paragraph text format. This is as it
should be
Comparing code and design
1. Highlight Restaurant and Appetizers2. See how the <h1> and <h2> tags have been added
3. It is important to use header tags as the convey meaning and structure (they are semantic). They can be restyled using CSS later on
Comparing code and design
1. Highlight Restaurant and Appetizers2. See how the <h1> and <h2> tags have been added
3. It is important to use header tags as the convey meaning and structure (they are semantic). They can be restyled using CSS later on
Adding CSS to change <H1> and <H2>
1. Click on the main heading Restaurant Menu.2. Click on the CSS button (1) in the bottom
left of the Properties panel, then click the Edit Rule button (2)
3. In the New CSS Rule panel,click the drop down menu and select Tag.
4. In the box underneath it shouldhave h1 (because you clicked <H1> text):
5. Click Ok to get another window
1. Change the font name, the size, colour, and any settings. Click Apply to see changes as you experiment.
2. Click OK when done. 3. If you use <h1> again
anywhere, it will have the settings you made.
This is CSS! You will see some CSSlike this in the <head> sectionin the code view:
4. On the page, click a Header 2 sub-heading, e.g. Appetizers
5. Repeat the same steps as before to change the style of the <h2> tag
Adding CSS to change <H1> and <H2>
H1 and H2 tags re-styled
Style <P>
1. Click inside a cell2. Click Edit Rule3. Select Tag from the
dropdown:4. Make sure the selector name is
p.5. Click Ok
6. Change the settings for the pselector:
Style <TD>
1. Click inside any cell.2. Select the <td> tag either in the source code or in the properties window
3. click the CSS and Edit Rule buttons 4. As before, select the Tag from the drop down
5. Then change any of the properties
Other styles, e.g. <Body>1. Add a fixed background image with no repeat to the body tag (create a folder called
images, find an image and save to the folder first, then add the CSS as before:
Tidy up1. When viewed in a web browser, the page may extend across the screen. To squeeze it
together so there are spaces either side (centred layout), change the CSS for the <body>. Click this example: webdesign.about.com to see what a centred layout looks like.
2. The width 700px is the width of the table3. The auto margins helps centre the body of the page
Tidy up - change coloursLet’s say the colours are cold and not hot and spicy enough for the menu. Change the colours using CSS:Remove the colour for the <td> style:1. Click in table cell, then click <td> in bottom left. This selects the tag
2. On the right select the CSS Styles panel. You can change the styles here as well.You may need to move things around tofind the panel and settings for td
3. Remove the background colour of the cells
Final pageChange the background colour and body text colour.
1. Click Body in the bottom left2. On the right find the body style3. Find the color style4. Click the colour square5. Move the cursor and notice
there is an eye dropper6. Choose a colour from the
background image7. The colour of the bacground
should change.8. Change the font colour too,
e.g. white
Tidy up - change coloursLighten the image if the text is difficult to read. Generally placing images behind text is not good practice as it makes the text harder to read (accessibility).
Classes
Classes (denoted by a period or “.”) are styles which can be applied anywhere, more than oncee.g. .red {color:red;}
.shade {
background-color: #C9C9AE; }
You then apply them to any specific tag, e.g.
<p class=“red”>
<body class=“shade”>
<div class=“red”> <span class=red>
the DIV or SPAN tag is a generic tag with no properties of its own, used for defining formats without the need to use tags such as <font>
ClassesAdd a class to define the font for a single word. Use the DIV tag to place it around the word.1. Highlight the words Onion Bhajia2. Select New CSS Rule from the
CSS panel properties below3. Click Edit Rule4. Select Class from the drop down5. Name it onion and change the
background colour, e.g. red
span class="onion">ONION BHAJIA</span>
ClassesApply the class elsewhere. You can apply a class anywhere.For example:1. Click Coconut Soup2. Select the class from the CSS
properties 3. It should reformat. Look at the
HTML
4. Experiment with more classes
Finishing
The bottom two tables may have missed the <p> tag for the contents, therefore the style for <p> is not applied there. Click the cells and choose Paragraph from the properties window.
IDs
IDs (denoted by a gate symbol or “#”) are styles which can be applied anywhere, oncee.g. #choice1 {color:red;}#choice2 {color:blue;}
You then apply them to a tag, e.g.
<div ID=“red”>
<div ID=“blue”>
Units
Examples% relative, e.g. 120% of default sizeem relative, e.g. 1.2em = 120% of size of letter “m”px absolute, e.g. 100pxpt absolute, e.g. 36pt = ½ inch, 72pt = 1 inchmm, cm, in absolute, e.g. 20mm, 1inpc absolute, e.g. 2 pc = 2 picas or 12pt
The % or em example is the best choice
Links to resourcesYou can find “cheat sheets” listing CSS examples. Use Google to search.
Some websites can generate small snippets of CSS. You then copy and paste it into your pages
More resources: http://tv.adobe.com/videos/css/http://webdesign.about.com/od/dreamweaverhowtos/ss/aadwcss_6.htm http://www.w3schools.com/css/default.asp