Week 4ART 239 Web Design I

Class Notes for Monday 2/11/19 & Wednesday 2/13/19

Agenda

Download the Class Presentation PDF

Homework videos

Part1 Week 4 Homework - HTML

Part2 Week 4 Homework - CSS (top section)

Part3 Week 4 Homework - CSS (bottom section)

Web Research Presentations

Introduction to CSS

CSS, or Cascading Style Sheets, is how we style web pages and make them look the way they look. But it isn't just for text styles and layout, you can do so truly amazing art and animation with it as well:

A CSS rule is made up of the following:

CSS structure: Selector{ declaration(property:value;)}

CSS "cascades" which means children inherit the properties of their parents. By declaring the same properties on children, you can override the parent's properties.

 

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

Dreamweaver CSS Designer palette interface

Use the Dreamweaver CSS Designer feature to quickly build your CSS.

CSS Background Properties

CSS Background Properties
background-color
sets the background color of an element
background-image
sets a background image for an element
gradient
displays smooth transitions between two or more specified colors
background-position
sets the starting position of a background image
background-size
specifies the scale of a background image
background-clip
specifies where the background is cropped
background-repeat
indicates if a background image will be repeated and on what axis
background-origin
specifies where the background image is positioned
background-attachment
specifies whether the background image will be fixed or scroll with page
box-shadow
attaches one or more shadows to an element
h-shadow
position of the horizontal shadow
v-shadow
position of the vertical shadow
blur
blur distance
spread
size of the shadow
color
color of the shadow
inset
changes the shadow to inside an element

CSS Layout Properties

CSS Layout Properties
width
sets the width for an element
height
sets the height for an element
min-width
when an element is responsive, this specifies the minimum width of the element
min-height
when an element is responsive, this specifies the minimum height of the element
max-width
when an element is responsive, this specifies the maximum width of the element
max-height
when an element is responsive, this specifies the maximum height of the element
display
indicates if, or how, an element is rendered
box-sizing
tells the browser what sizing properties (width and height) to include - border-box or just the content-box
margin
specifies the amount of space around an element
padding
specifies the amount of space between the content of an element and its edge - increases the size of the element
position
alters the way elements are positioned on a page
float
specifies the side around which other elements flow around the floated element
clear
specifies the sides of an element that do not allow other floating elements - avoids a non-floating element going under a floating element
overflow (x or y)
determines what happens if the contents of a container exceed its size:
visible
increases the container’s size so that all of its contents are visible
hidden
maintains the container’s size and clips content that doesn’t fit - no scroll bars are provided.
scroll
adds scroll bars to the container regardless of whether the contents exceed the container’s size
auto
makes scroll bars appear only when the container’s contents exceed its boundaries
visibility
determines the initial display condition of the content
z‑index
determines the stacking order of the content
opacity
specifies how much you can see through an element

CSS Border Properties

CSS Border Properties
the tabs choices on the top
choose full border around entire shape or top, right, bottom, and/or left border individually, where you can set different attributes for any side
border-width
specifies the thickness of the border - top, bottom, left, and right can be done individually
border-style
specifies the kind of border, such as solid, dashed, or double - top, bottom, left, and right can be done individually
border-color
specifies the color of the border - top, bottom, left, and right can be done individually
border-radius
creates rounded corners
border-collapse
specifies whether table borders are combined into a single border or detached
border-spacing
sets the spacing between borders of adjacent table cells when the border-collapse option is set to separate

CSS Text Properties

CSS Text Properties
color
sets the text color
font-family
sets the font family (or series of families) for the style - with the default font list browsers display text in the first font of the series that is installed on the user’s system - web fonts appear the same on all systems as the font data is online
font-style
specifies Normal, Italic, or Oblique as the font style
font-variant
sets the small caps variant on text - Dreamweaver does not display this attribute in design mode
font-weight
applies a specific or relative amount of boldface to the font - normal is equivalent to 400 - bold is equivalent to 700
font-size
defines the size of the text
line-height
sets the height of the line on which the text is placed - this setting is traditionally called leading - select Normal to have the line height for the font size calculated automatically or enter an exact value
text align
sets left, right, center or justify alignment of text within the element
text-decoration
adds an underline, overline, strike-through, or makes the text blink
text indent
specifies how far the first line of text indents
h-shadow
adds a shadow to your text on the horizontal axis
v-shadow
adds a shadow to your text on the verticle axis
blur
controls the amount of blur in the shadow
color
specifies the color of the shadow
text-transform
changes the case of your text: capitalize, uppercase, or lowercase
letter-spacing
defines the amount of white space between letters
word-spacing
defines the amount of white space between words
white-space
tells the browser how to handle line breaks and spaces in a block of text
vertical-align
aligns inline elements, such as text and images, in relation to elements that surround them
list-style-position
sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside)
list-style-image
specifies a custom image for bullets
list-style-type
sets the appearance of bullets or number