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 CSSselector {property: value}

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.

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

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:

To be governed by an external CSS, the.HTML file must have a link to the stylesheet between the tags. The syntax of a stylesheet link is as follows:

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

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

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.

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)

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

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

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

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:

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

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.

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.

font-size declares the size of the font. Use the standard font size for,, etc. rather than stylizing 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

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

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

Always use HTML tags when they can add meaning, structure, or semantics to your content. If you want to write the sentence I love cheese (where the word "love" should carry particular emphasis), the tag is the correct choice. CSS is absolutely not an acceptable solution. Similarly, the 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..., 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.

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)

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

…. Element 2 Content …. …………………………….. …………………………………………………………. margin padding …. Element 1 Content …. ……………………………..

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

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:  This can be condensed into this 

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.