CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.
-
Upload
bernice-walsh -
Category
Documents
-
view
220 -
download
0
Transcript of CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.
![Page 1: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/1.jpg)
CSS
Cascading Style Sheets
![Page 2: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/2.jpg)
“Cascading”
![Page 3: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/3.jpg)
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
![Page 4: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/4.jpg)
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>
![Page 5: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/5.jpg)
![Page 6: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/6.jpg)
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
![Page 7: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/7.jpg)
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>
![Page 8: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/8.jpg)
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
![Page 9: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/9.jpg)
Dreamweaver CSS Window
![Page 10: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/10.jpg)
Expression Web CSS Window
![Page 11: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/11.jpg)
Formatting using CSS
Exercise - style a restaurant menu
![Page 12: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/12.jpg)
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
![Page 13: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/13.jpg)
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
![Page 14: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/14.jpg)
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
![Page 15: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/15.jpg)
1. Here is a picture of the resulting page so far.
Modifying table column widths
![Page 16: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/16.jpg)
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
![Page 17: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/17.jpg)
1. All the tables should be matching:
Modifying table column widths
![Page 18: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/18.jpg)
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
![Page 19: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/19.jpg)
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
![Page 20: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/20.jpg)
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
![Page 21: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/21.jpg)
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
![Page 22: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/22.jpg)
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>
![Page 23: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/23.jpg)
H1 and H2 tags re-styled
![Page 24: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/24.jpg)
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:
![Page 25: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/25.jpg)
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
![Page 26: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/26.jpg)
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:
![Page 27: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/27.jpg)
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
![Page 28: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/28.jpg)
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
![Page 29: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/29.jpg)
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
![Page 30: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/30.jpg)
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).
![Page 31: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/31.jpg)
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>
![Page 32: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/32.jpg)
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>
![Page 33: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/33.jpg)
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
![Page 34: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/34.jpg)
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.
![Page 35: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/35.jpg)
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”>
![Page 36: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/36.jpg)
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
![Page 37: CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML The image aligns left and.](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf991a28abf838c91703/html5/thumbnails/37.jpg)
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