Cascading Style Sheets in Dreamweaver

579 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Cascading Style Sheets in Dreamweaver

  1. 1. Using CSS Create a n 1. Ty Heading 1 Heading2 Paragraph Link [pres Class align Class colo ID yellowB 2. C 3. In 4. C 5. C 6. G 7. In 8. C 9. C 10. H 11. G 12. In 13. C 14. H S for design   new html pag ype   1 [press enter  [press enter] h [press enter ss enter]  n_center [pre or_red [press  Bold [save file lick CSS new  n the dialog b a. Selecto b. Selecto c. Rule D new  S d. File na ategory  Ty a. Font‐f b. Font‐s c. Font‐w d. Color = lick the type  o to CSS new n the dialog b a. Selecto b. Selecto c. Rule D File na ategory  Ty a. Font‐f b. Font‐s c. Color = lick the type  ighlight Parag o to new CSS n the dialog b a. Selecto b. Selecto c. Rule D File na ategory  Ty a. Font‐f b. Font‐s c. Color = ighlight link   a. Create ge – save as st r]  ]  r]  ess enter]  enter]  e]  rule   ox  or type: Tag  or name: H1  Definition:  Style Sheet Fil ame: myStyleS ype  amily : Times ize :  36 px  weight : Bold  = #F60  “Heading 1” a w rule  ox  or type: Tag  or name: H2  Definition:  ame: myStyleS ype  amily : Comic ize :16 px  = #CF0  “Heading 2” a graph  S rule   ox  or type: Tag  or name: P (s Definition:  ame: myStyleS ype  amily : Arial,  ize :12 px  = #333  e a link to abo tyles.html (th le  Sheet.css  s New Roman and apply H1 Sheet.css  c SansMS, cur and apply H2 should be sele Sheet.css  Helvetica, san out_me.html his is the page , Times, serif  formatting fr rsive   formatting fr ected because ns_serif  e where we w rom the prop rom the prop e we are in a  will test our st perty window perty window <P> tag alrea tyles)  w  w  ady 
  2. 2. Using CSS for design   b. Go to page properties  i. Link color: #090  ii. Rollover link color: #C60  iii. Visited link color: #CCC  iv. Active link color: #FCO  c. Click CSS style – you now have  >myStyleSheet.css and > <style>  d. Open <style>  i. Right click on a:link  ii. Move CSS rule  iii. Move to External Style Sheet  iv. Choose Style Sheet myStyleSheet.css  v. Repeat for the rest of the link style – KEEP them in the order they appear or  they will not work correctly  15. Click on new CSS rule  16. In the dialog box  a. Selector type: class  b. Selector name: align_center  c. Rule Definition:  File name: myStyleSheet.css  17. Category  Type  a. Font‐family : Arial, Helvetica, sans_serif  b. Font‐size :12 px  c. Color = #333  18. Category Block  a. Text‐align : center  b. Click ok  19. Apply class align_center to the line “class align_center  20. Click new CSS Rule  21. In the dialog box  a. Selector type: class  b. Selector name: color_red  c. Rule Definition:  File name: myStyleSheet.css  22. Category  Type  a. Color = #F00  23. Highlight “class color_red“  a. Apply class color_red  24. Click new CSS Rule  25. In the dialog box  a. Selector type: ID  b. Selector name:  #yellowBold  c. Rule Definition:  File name: myStyleSheet.css  26. Category  Type  a. Font‐weight : Bold  b. Color = #FC0  27. Highlight “Id yellowBold”  We could skip this as  it is in a paragraph.  We skipped the font information so  we can apply this to any tag.  This code will only be applied to the  id named yellowBold 
  3. 3. Using CSS Save ALL  28. C 29. A 30. N Here  31. In 32. C 33. C 34. C 35. C Take a loo what colo 36. O 37. O 38. U   S for design   a. In the  the co reate a new p ttach a style  a. Brows b. Add as ow type a pa a. H1 for b. H2 for c. Create d. Create e. Create is why we use n the CSS win lick the penci hange the co lick on yellow hange the co ok at both pag or you were u On your style p On the homew pload to the  property win de will look li page – file na sheet   e to find myS s link  age about you r the title  r a subtitle  e some red te e a paragraph e a link back t e CSS  dow click on  il to edit  lor to #960  wBold   lor to #360  ges your style sing again.   page create a work page cre server (if app ndow where I ike <p id=”ye me “about_m StyleSheet.css u using   ext by highligh h that uses the o the style pa p   es have chang a link to your  eate a link to y propriate for y D is none typ llowBold”>ID me.html”  s  hting the text e id yellowBo age  ged on both p homework pa your style.htm your situation pe yellowBold D yellowBold< t and applying old  pages. You no age  ml page  n)  d  </p>  g the red clas o longer have s  e to remembeer 

×