Week 4ART 239 Web Design I

Class Notes for Monday 9/24/18 & Wednesday 9/26/18

Web Colors

Hex, RGB, and RGBa

Hex
Hexadecimal color values are supported in all browsers and are specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 (lowest) and FF (highest) specifying the intensity of the color.
Example: #000000 is black.
RGB
RGB color values are supported in all browsers and specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 (lowest) and 255 (highest).
Example: rgb(0,0,0) is black
RGBa
RGBa color values are similar to RGB except but with the addition of transparency. They are specified with: rgba(red, green, blue, alpha). The RGB parameters behave the same way, however the alpha defines the opacity of the color from 0 (completely transparent) to 1.0(completely opaque).
Example: rgba (0,0,0,0.5) is 50% transparent black.

Classes vs. IDs

Class
Classes have a "." before their name when used in CSS. When referenced in the HTML file, you do not use the "." but rather define it on an element as class="myClass". The class selector is used for styling and is not unique allowing you to use the same class on multiple elements. You can also use multiple classes on the same element.
Example: .myClass
ID
IDs have a "#" before their name when used in CSS. When referenced in HTML you do not use the "#" but rather define it on an element as id="myID". The id selector is used to specify a a single, unique element. Each element can have only one ID which makes them very useful for identifying objects with Javascript, Refrain from using IDs for styling and reserve them for functional items. You should only use an ID name once in your document. Duplicate ID tags will most likely fail a web site validation process and may have negative effects when called upon (for example with JavaScript).
Example: #myID

Centering a site or a child element of a wider DIV

When an element is contained by one overall box (like the body tag, or a wider div). You can give your child element a class of "container" or "wrapper". Then set that class in the CSS to the overall width you want to center (for example 768 pixels wide) in a browser window, and set the left and right margins to auto.

Commenting

<!--   -->
Comments out html preventing it from rendering in a browser
/*   */
Comments out CSS code preventing it from being seen by the browser

Shortcut for commentign in Dreamweaver, select the text (or line you want to comment out) and hit "Command /""

Semantic Tags

A semantic element clearly describes its meaning to both the browser and the developer. Examples of semantic elements: header, footer, and img - Clearly defines its content. Examples of non-semantic elements: div and span - Tells nothing about its content.

<header>
should be used as a container for introductory content
<nav>
a section of a page that links to other pages or to parts within the page
<section>
a section is a thematic grouping of content, typically with a heading
<article>
specifies a complete independent, self-contained content that makes sense on its own and it is able to stand independently from the rest of the web site - examples: a forum post, a magazine or newspaper article, a blog entry
<aside>
defines content separate from the content it is placed in (like a pullquote or a sidebar) and should be related to the surrounding content
<footer>
a footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
<main>
specifies the main content of a document
<img>
defines an image
<figure>
specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>
defines a caption for a <figure> element - contained inside the figure tag
<mark>
defines marked/highlighted text
<details>
defines additional details min an interactive element that the user can view or hide (not supported in IE) Example
<summary>
defines a visible heading for a <details> element
<time>
defines a date/time

CSS Reset or Zeroing out your code

Browsers have default styling that affects margins and padding of objects. Setting a “CSS reset” or zeroing out these default setting is easy, just declare all the tags as 0 margin and 0 padding like this (This can be saved in your Snippets):

html, body, header, nav, div, ol, ul, li, dl, dt, dd, heading, img, p, h1, h2, h3, h4, h5, h6, main, aside, article, section, footer, pre, form, fieldset, input, blockquote, textarea, table, th, td, embed, object {
margin: 0px;
padding: 0px;
}