1 / 30

Review: CSS Beginner Tutorial

Review: CSS Beginner Tutorial. Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities of a web page CSS uses a different format than HTML: HTML <tag attribute=“value”> content </tag>

bertha-guy
Download Presentation

Review: CSS Beginner Tutorial

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. Review: CSS Beginner Tutorial Selectors thru Borders

  2. CSS – Cascading Style Sheets – is a way to style HTML • HTML is the content base of a web page • CSS provides the presentation qualities of a web page • CSS uses a different format than HTML: • HTML <tag attribute=“value”> content </tag> • CSS selector {property: value} CSS Beginner

  3. In-line CSS are put directly into HTML using style attributes. • Above you see the in-line style that makes the specific paragraph red. • Keep in mind that your HTML should be kept a presentation free document, so use in-line styles as sparingly as possible. In-line CSS

  4. Embedded, or internal styles are used to style a whole page • Inside the head tags the style tags surround all of the styles for the page • The style on the following page will make all of the paragraphs on the page red and all of the links blue • This approach should also be avoided because of the direct link it creates between HTML and CSS In-line CSS

  5. Internal CSS

  6. External styles are used for the whole, multipage website • This is an separate file from you HTML page • The file is typically saved with the name, “style.css” • It looks like this: External CSS

  7. To be governed by an external CSS, the .HTML file must have a link to the stylesheet between the <head> tags. • The syntax of a stylesheet link is as follows: • <link href="_css/style.css" rel="stylesheet" type="text/css"> External CSS linked

  8. HTML has tags – CSS has corresponding selectors • Selectors are the names given to styles in internal and external style sheets • CSS selectors are simply the names of HTML tags and are used to change the style of a specific tags Selectors, Properties and Values

  9. For each selector there are properties inside curly brackets • These take the form of words such as color, font-weight, or background-color • A value is given to the property following a colon – not an ‘equals’ sign – and semi-colons separate the properties Selectors, Properties and Values

  10. This will apply the given values to the font-size and color properties to the body selector • When this is applied to the HTML document, the text between the body tags (which is the content of the whole page) will be 0.8ems in size and navy in color. Selectors, Properties and Values

  11. px(font-size: 12px) – is the unit for a 12 pixel-tall font. 12px is a standard default font size for many browsers. • pt(font-size: 12pt) – is the typical unit for font sizes in print media. One point is equal to 1/72 of an inch. • % (font-size: 80%) – this will make the font 80% smaller than the standard format • When a value is zero, you don’t need a unit (no border – border:0) Lengths and Percentages

  12. em: (font-size: 2em) means the font size is twice the size of the browser default font size. • For example, if the standard font-size for an HTML page without CSS styles is 12pt, then 2em would make the font 24pt Lengths and Percentages

  13. Web page fonts should be able to change according to the size of the window. • Because of this, it is best practice to use em or percentages for sizing of all of your fonts Lengths and Percentages

  14. You have 16,777,216 colors to use within CSS • They come in the forms of names, rgb (red/green/blue) value, or a hex code Colors

  15. aqua • black • blue • fuchsia • gray • green • lime • white • yellow • maroon • navy • olive • orange • purple • red • silver • teal transparent is also a valid value Of the dozens of named HTML colors, there are 17 standard colors: Color Names

  16. Colors can be applied to most selectors using “color” and “background-color” properties Color Names

  17. Named colors tend to be harsh primaries, so its best to play with their hexadecimal versions to tone them down • It’s best to use hexadecimal colors all the time. The following rule states that all text tagged h1 will be Cyan over a DarkMagenta background. Hexadecimal Colors

  18. The font-family property sets the font(s) your page is written in: Times New Roman, Arial, and Verdana are standard for most browsers. • There are many font options, but the font you specify must be on the user’s computer, so avoid obscure fonts • You can specify your first choice of font first, then list other options after the first choice that the browser can choose if the first choice if not supported by typing their names with commas in between. • Fonts are case-sensitive, so be sure to capitalize! • If the name of your font is more than one word, you must put the name of the font in quotations. Text: font-family

  19. font-size declares the size of the font. • Use the standard font size for <h1>, <h2>, etc. rather than stylizing <p> with larger font and bold weight • The font size hierarchy should be kept as much as possible for clear read of formatting • You should also use em or % relative to other elements on the page. Try to avoid using set font sizes so that they can adjust relative to the size of the browser window Text: font-size

  20. This stated whether the font is bold or not • It’s best to stick with font-weight: bold, or no declaration at all. Text: font-weight

  21. This stated whether the font is italic or not • It’s best to stick with font-style: italic, or no declaration at all. Text: font-style

  22. Always use HTML tags when they can add meaning, structure, or semantics to your content. If you want to write the sentence I <em>love</em> cheese (where the word "love" should carry particular emphasis), the <em> tag is the correct choice. CSS is absolutely not an acceptable solution. Similarly, the <strong> tag is used to denote importance. • Always use CSS when you are changing the visual appearance of your page. The title heading on your page is a <h1>...</h1>, but you can make it bold or not, purple or not using CSS. • A rule-of-thumb is to imagine how a screen reader will interpret your page. If a reader interprets the page without any stylesheets attached, it should ideally translate your content with your intended verbal tone intact. Text style and weight: When to use HTML tags vs CSS

  23. This stated whether the font is underlined or not • The options for this are: • text-decoration: overline (places a line above the text) • text-decoration: line-through (puts a line through the text) • text-decoration: underline (puts a line under the text and should only be used for links because that is the expected formatting for links from standard formatting) • text-decoration: none (this removes the standard underlining for links, and should be used regularly to increase the sophistication of your site) Text: text-decoration

  24. Letter-spacing: spacing between letters in a word • Word-spacing: spacing between words in a sentence • Line-height: this sets the height of a line in an element • Use “em” for these as much as possible • Text-align: this is left, right, center or justify (like in Word) • Text-indent: indents the first line in a paragraph Text Spacing

  25. Text

  26. …. Element 1 Content …. …………………………….. margin padding …. Element 2 Content …. …………………………….. …………………………………………………………. …………………………………………………………. …………………………………………………………. The Box Explanation

  27. The Box Explanation

  28. You can set margins and padding one side at a time: • margin-top • margin-bottom • margin-left • margin-right • padding-top • padding-bottom • padding-left • padding-right Margins and Padding

  29. You can use margin/padding shorthand to combine values for all four sides, starting on the top and moving clockwise around the box. • margin: top right bottom left; • You can also set the margin/padding of an element for all four sides at once like this: Margins and Padding  This can be condensed into this 

  30. Border-style establishes that you want a border around an element • Here are types of border styles: solid, dotted, dashed, double, groove, ridge, inset, and outset • Border-width sets the width of the border, and each side can be set individually like margins and padding • Border-color is just like any other color setting we’ve discussed. • Borders can be really tacky – use them cautiously. Borders

More Related