{"id":38,"date":"2020-08-01T14:25:04","date_gmt":"2020-08-01T18:25:04","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-3-%e2%80%a2-styles\/"},"modified":"2021-07-23T15:29:18","modified_gmt":"2021-07-23T19:29:18","slug":"tutorial-3-styles","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-3-styles\/","title":{"raw":"Tutorial 3 \u2022 Styles, Fonts, and Tables","rendered":"Tutorial 3 \u2022 Styles, Fonts, and Tables"},"content":{"raw":"
\r\n

CSS Styles<\/h1>\r\nIt's commonly said that HTML gives structure to your page, while cascading style sheets (CSS) determines its appearance. CSS has two meanings: (1) a file of type .css, and (2) the hierarchy of styles, i.e., that a local\/inline style overrides a global\/embedded style, which in turn overrides an external .css file.\r\n\r\nThree ways of writing styles:\r\n

Local or inline style.<\/strong> A style=\"\" statement inside a tag, e.g., <p style=\"font-family: Roboto;\">. Local\/inline styles override global\/embedded and CSS files.<\/p>\r\n

Global or embedded style.<\/strong> A <style> tag with statements in the document head. Global\/embedded styles override CSS files.<\/p>\r\n

CSS file.<\/strong> A separate file of type .css that can be applied to multiple pages, e.g. file \"styles.css\" attached to a page, <link href=\"styles.css\" type=\"text\/css\" rel=\"stylesheet\"><\/p>\r\n\r\n

\r\n

Making a CSS File<\/h2>\r\n
    \r\n \t
  1. Copy the global\/embedded styles from one of your pages into a separate file, without the <style> tags, and save with file extension .css, e.g., \"styles.css.\"<\/li>\r\n \t
  2. Link your .css file to both pages using the <link> tag:\r\n
    <link href=\"styles.css\" type=\"text\/css\" rel=\"stylesheet\"><\/pre>\r\n<\/li>\r\n \t
  3. Verify that the styles take effect and that the .css file appears as a separate Dreamweaver tab in your document.<\/li>\r\n<\/ol>\r\n<\/div>\r\n
    Using Selectors<\/h2>\r\nSelectors are like the strings on a marionette\u2014they connect the tags with the styles you want to apply. You can select all tags by writing the tag in a style statement and the styles in braces, e.g., p {font-family: Georgia;} selects all paragraphs and sets them in the font Georgia. But what if you want to style different paragraphs differently? In that case you can label the paragraph with an ID (use once on a page) or with a class (used multiple times).\u00a0Select the ID in CSS using a hash tag # and a class by preceding it with a dot.\r\n\r\nPseudoclasses are a type of class that\u2019s built in to the HTML5 and does not need to be labeled by the designer. Example: p:nth-child(1) selects the first paragraph.\r\n\r\n<\/div>\r\nAnother way to select tags for styling is to use the structure of the HTML. Example: you used an unordered list of bullet points to make a navigation menu, and you placed the list within a navigation or <nav> tag. You can select only that list by writing \u201cnav ul.\u201d Other lists on the page will not be affected.\r\n
    \r\n\r\nA great exercise on selectors is the \u201cCSS Diner\u201d at http:\/\/flukeout.github.io<\/a>. To select one or more items out of several:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    Methods of Selecting Tags for Styling<\/th>\r\n<\/tr>\r\n
    Selection method<\/em><\/strong><\/td>\r\nExample in HTML<\/em><\/strong><\/td>\r\nExample in CSS<\/em><\/strong><\/td>\r\n<\/tr>\r\n
    Use an ID (for one item)<\/td>\r\n<p id=\"para1\"><\/td>\r\n#para1 {}<\/td>\r\n<\/tr>\r\n
    Use a class (for multiple items)<\/td>\r\n<p class=\"para1\"><\/td>\r\n.para1 {}<\/td>\r\n<\/tr>\r\n
    Use a pseudoselector (for first, second, or a repeating pattern of connected items, known as \u201cchildren\u201d)<\/td>\r\n\u2014\r\n(built into HTML5)<\/td>\r\np:nth-child(1)\r\n1, 2, 3, \u2026,\r\nodd, even\r\n1n+3 (every 3 starting with 1st)<\/td>\r\n<\/tr>\r\n
    Use the HTML structure, e.g., <div> with an <img> tag in it<\/td>\r\n<div><img><\/td>\r\ndiv img {}<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    What to Style<\/h2>\r\nTwo demo files from Patrick Carey\u2019s textbook, New Perspectives on HTML<\/em> (Thompson) show examples of how you can style text and color. (A third shows the web-safe palette.)\r\n
    \"This<\/p>\r\ndemo_text_styles<\/strong>.<\/strong> Notice all the characteristics of type that you can style. Some common ones include:\r\n