1 / 13

HTML review and CSS

HTML review and CSS. Looking stylish!. But first…. Any issues with the reading? Any questions with the reading?. Today. Using HTML to make a meaningful page Using CSS to make a nice-looking page How to use selectors to select specific elements How to set various properties

binah
Download Presentation

HTML review and CSS

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. HTML review and CSS Looking stylish!

  2. But first… • Any issues with the reading? • Any questions with the reading?

  3. Today • Using HTML to make a meaningful page • Using CSS to make a nice-looking page • How to use selectors to select specific elements • How to set various properties • How classes can be useful

  4. HTML review • Let's go ahead and make a simple HTML page that represents a summary of blog posts

  5. div and span • Sometimes, we want to create a block element (div) or inline element (span) that isn't one of the predefined meanings • Once we add CSS, these will make a lot more sense

  6. Styling it up • We want to make our blog look a lot more exciting • We are going to add CSS to specify how we want things to look • Let's look at CSS syntax…

  7. Simple selectors • The simplest selector is simply a tag name • For instance, let's write a selector to select all paragraph text…

  8. Simple properties • The simplest properties affect the color of elements • We can set the text color using "color:" • We can set the background color using "background-color:" • Let's see how to represent color, and then start making things pretty

  9. Color: RGB and you • Colors in a computer are represented by a certain amount of red, green, and blue light • These lights combine to form the colors we see • We have one byte for each of R, G, and B • Each can range from 0-255 • We can specify color in a few ways…

  10. Full red • rgb(255, 0, 0) • #ff0000 • #f00 • red • For a full list of named colors, see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value • For pure grays, all components are the same • #333, #999 #ccc, etc.

  11. Assigning colors responsibly • Try to assign colors to various selectors so that: • Each article is distinct from other articles • The article text is distinct from the text for the article information and the tags • All text is legible • It doesn't hurt to look at • You probably want selectors for: • section • h2 • p • div • ul

  12. Adjusting font size • To adjust font size, use the property "font-size:" • After the colon, indicate a length • We have different units to choose from: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages

  13. Adjusting font size • To adjust font size, use the property "font-size:" • After the colon, indicate a length • We have different units to choose from: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages • Typically, you will use • px – pixels • % – percentage (relative to… something) • em – amount relative to parent text size • rem – amount relative to "html" element text size

More Related