Week 5ART 239 Web Design I

Class Notes for Monday 2/25/19, Wednesday 2/27/19

Agenda

Download the Class Presentation PDF

Lesson videos

Flamingo Tile - HTML setup

Flamingo Tile - CSS styling

Flamingo Tile - button styling

Flamingo Tile - adding the horizontal tile

The CSS Box Model

Box model visual

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image above illustrates the box model.

Content
The content of the box, where text and images appear
Padding
Clears an area around the content. The padding is transparent
Border
A border that goes around the padding and content
Margin
Clears an area outside the border. The margin is transparent

More on the Box model, check out the W3Schools site.

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.

Display property

The display property specifies the display behavior (the type of rendering box) of an element. Certain elements have different default display properties, but by using CSS you can change these.

inline
Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block
Displays an element as a block element (like <p> or <div>). It starts on a new line, and takes up the whole width.
inline-block
Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
none
The element is completely removed

Floats & clears

The float Property

The float property is used for positioning and layout on web pages. In its simplest use, the float property can be used to wrap text around images. It can have one of the following values:

left
The element floats to the left of its container. (Elements that come after it in the html will wrap to its right.)
right
The element floats to the right of its container. (Elements that come after it in the html will wrap to its left.)
none
The element does not float (will be displayed just where it occurs in the text). This is default
inherit
The element inherits the float value of its parent

The clear Property

The clear property specifies what elements can float beside the cleared element and on which side. The most common way to use the clear property is after you have used a float property on an element. When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

The clear property can have one of the following values:

none
Allows floating elements on both sides. This is default
left
No floating elements allowed on the left side
right
No floating elements allowed on the right side
both
No floating elements allowed on either the left or the right side
inherit
The element inherits the clear value of its parent

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 commenting in Dreamweaver, select the text (or line you want to comment out) and hit "Command /""

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

Another option is to use the very capable reset created by Eric Meyer

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

Sematic page structure

<header>
    <nav>Primary site navigation<nav>
</header>
<main>
    All main content goes in here.
    <section>Use sections to semantically group content.</section>
</main>
<aside>
    Content connected to the main content goes here, think of this as a “sidebar”. </aside>
<footer>
    Copyright, social link content can go here
    <nav>Secondary or redundant navigation<nav>
<footer>

HR tag

In HTML5 denotes a thematic change in a document (used to be used as just a horizontal rule). you can style hrs as well giving them colors, gradations, etc. For example: https://css-tricks.com/examples/hrs/