review: css beginner tutorial

30
Review: CSS Beginner Tutorial Selectors thru Borders

Upload: bertha-guy

Post on 02-Jan-2016

50 views

Category:

Documents


2 download

DESCRIPTION

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 content - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Review: CSS Beginner  Tutorial

Review: CSS Beginner Tutorial

Selectors thru Borders

Page 2: Review: CSS Beginner  Tutorial

CSS Beginner

• 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}

Page 3: Review: CSS Beginner  Tutorial

In-line CSS

• 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.

Page 4: Review: CSS Beginner  Tutorial

In-line CSS

• 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

Page 5: Review: CSS Beginner  Tutorial

Internal CSS

Page 6: Review: CSS Beginner  Tutorial

External CSS

• 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:

Page 7: Review: CSS Beginner  Tutorial

External CSS linked

• 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">

Page 8: Review: CSS Beginner  Tutorial

Selectors, Properties and Values

• 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

Page 9: Review: CSS Beginner  Tutorial

Selectors, Properties and Values

• 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

Page 10: Review: CSS Beginner  Tutorial

Selectors, Properties and Values

• 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.

Page 11: Review: CSS Beginner  Tutorial

• 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

Page 12: Review: CSS Beginner  Tutorial

• 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

Page 13: Review: CSS Beginner  Tutorial

• 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

Page 14: Review: CSS Beginner  Tutorial

• 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

Page 15: Review: CSS Beginner  Tutorial

• aqua• black• blue • fuchsia• gray• green• lime• white• yellow

• maroon• navy• olive• orange• purple• red• silver• teal

transparent is also a valid value

Color Names

Of the dozens of named HTML colors, there are 17 standard colors:

Page 16: Review: CSS Beginner  Tutorial

• Colors can be applied to most selectors using “color” and “background-color” properties

Color Names

Page 17: Review: CSS Beginner  Tutorial

• 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

Page 18: Review: CSS Beginner  Tutorial

• 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

Page 19: Review: CSS Beginner  Tutorial

• 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

Page 20: Review: CSS Beginner  Tutorial

• 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

Page 21: Review: CSS Beginner  Tutorial

• 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

Page 22: Review: CSS Beginner  Tutorial

• 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

Page 23: Review: CSS Beginner  Tutorial

• 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

Page 24: Review: CSS Beginner  Tutorial

• 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 Spacing

• Text-align: this is left, right, center or justify (like in Word)

• Text-indent: indents the first line in a paragraph

Page 25: Review: CSS Beginner  Tutorial

Text

Page 26: Review: CSS Beginner  Tutorial

The Box Explanation

…. Element 2 Content …. ……………………………..………………………………………………………….………………………………………………………….………………………………………………………….

margin

padding

…. Element 1 Content …. ……………………………..

Page 27: Review: CSS Beginner  Tutorial

The Box Explanation

Page 28: Review: CSS Beginner  Tutorial

• 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-rightMargins and

Padding

Page 29: Review: CSS Beginner  Tutorial

• 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;

Margins and Padding

• You can also set the margin/padding of an element for all four sides at once like this:

This can be condensed into this

Page 30: Review: CSS Beginner  Tutorial

• 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