Week 5ART 239 Web Design I

Lesson videos for Monday 10/1/18, Wednesday 10/3/18

Flamingo Tile - HTML setup

Flamingo Tile - CSS styling

Flamingo Tile - button styling

Flamingo Tile - adding the horizontal tile

Class Notes

CSS: Psudeo Classes

:link
Selects all links (example- a:link)
:visited
Selects all previously visited links (example- a:visted)
:hover
Selects all links on mouseover (example- a:hover)
:active
Selects the active link (example- a:active)

It is best practice to cover all of the "states", particularly for links. An easy way to do that is "LOVE HATE" or
L :link
O
V :visited
E
H :hover
A :active
T
E

Doing them in that order in your CSS is ideal - if you do it in the wrong order, unpredictable results will happen!

Paragraph and Line breaks

Bold and Italic

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/

Lists

list item <li>
Defines an item in the list. (See code below)
unordered lists <ul>
Defines an unordered list.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

LOOKS LIKE (of course design can be changed with CSS):

  • Coffee
  • Tea
ordered lists <ol>
Defines an ordered list.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>

LOOKS LIKE (of course design can be changed with CSS):

  1. Coffee
  2. Tea

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