Fundamentals of Web Programming - cs.dartmouth.edu
Transcript of Fundamentals of Web Programming - cs.dartmouth.edu
![Page 2: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/2.jpg)
Style with CSS
![Page 3: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/3.jpg)
CSSMain idea: changing the style sheet changes the
presentation, without changing the content.
• productivity: focus on content first • division of labor: content-producers and artists • adaptability: re-styling is easy
Why?
![Page 4: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/4.jpg)
1. select some of the tagged regions in an HTML doc. 2. Change the style: properties like color, position, etc.
Style block in head section. (better: put in separate file)
![Page 5: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/5.jpg)
<selector> { property: value; property: value; property: value; }
Two things to learn: 1) more interesting selectors 2) some properties
![Page 6: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/6.jpg)
Positioning with float
![Page 7: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/7.jpg)
Positioning with float
![Page 8: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/8.jpg)
Selecting specific items: id
Attribute to label an item in HTML (id attribute, double quotes)
# selector in CSS chooses labelled item
![Page 9: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/9.jpg)
Selecting groups of items: class
![Page 10: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/10.jpg)
Selecting groups of items: class. selector in CSS chooses labelled itemS
attributes label items in HTML (class attribute, double quotes)
![Page 11: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/11.jpg)
slicing HTML content: <span>What if you want to make only part of a paragraph red?
![Page 12: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/12.jpg)
Exercise: red flying objects
![Page 13: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/13.jpg)
Answer: red flying objects
![Page 14: Fundamentals of Web Programming - cs.dartmouth.edu](https://reader030.fdocuments.in/reader030/viewer/2022020620/61e32359385520231b1f47fd/html5/thumbnails/14.jpg)
Example: navbar