1 / 15

CS110: Computers and the Internet

This guide covers essential CSS concepts including font styling, customized markup, and the Box Model application. Learn how to effectively use styles in three different ways: inline styles specified directly in HTML tags, internal stylesheets embedded within the document's head, and external stylesheets linked from separate CSS files. Discover the versatility of font families and sizes, and how to manipulate margins, padding, and borders to create appealing layouts. Gain hands-on experience through exercises that apply these principles in real-world scenarios.

ermin
Télécharger la présentation

CS110: Computers and the Internet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS110: Computers and the Internet Customized Markup, Fonts, Box Model

  2. Today • Styling fonts • Customized markup • The Box Model

  3. CSS Example

  4. CSS • Style sheets can be put in (at least) three different places: • Inline Styles. These are specified in the tag itself using the style attribute. • Document-Level (Internal) Style Sheets. These are specified in the <head> of a document, using a special tag <style>. • External Style Sheets. These are specified in a separate CSS file that is connected to the HTML file by the <link> tag. • http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic/introCS1.html

  5. Fonts with CSS serif family sans-serif family A Times New Roman Georgia Verdana Arial body { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; font-style: italic; } em { font-family: Impact; } Specifying font size: font-size: 14pt; font-size: 20px; font-size: 150%; Keywords:xx-small,x-small,small,medium, large, x-large,xx-large, smaller, larger default is normal

  6. Helvetica, A Story

  7. SPAN and DIV http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic/introCS2.html

  8. Class versus ID • The key is uniqueness: an id must be unique, while a class describes a kind/type/category of element.

  9. Hands on Exercise • http://cs.wellesley.edu/~cs110/lectures/CSS_example/CSSbasic.html • Modify document-level style sheet: paper-based exercise on handout • Modify external style sheet: Computer-based exercise

  10. CSS Box Model p { color: maroon; background-color: pink; width: 200px; padding: 20px; border: 5px dashed blue; margin: 50px; } margin padding width box content border The top, bottom, left and right sides of the margin, padding and border can be styled differently, to create many distinct appearances

  11. Exploring the the Box Model with Firebug • http://cs.wellesley.edu/~cs110/lectures/BoxModel/box-ex1.html

  12. Centering Inline Content

  13. Centering Inline Content (2)

  14. Centering Block Elements

  15. Centering Images

More Related