WTWEB110_2013_ch4

Created by deborah_derden 

Upgrade to
remove ads

Blocks

Paragraphs or block quotes that occupy a defined rectangular area within a page

Inline Elements

Sentence within a paragraph or a citation within a block quote flow within a block

Box Model

Composed of the following series of concentric boxes:
- content of the element itself
- padding extending between the element's content and the border
- border of the box surrounding the padding space
- margin containing the space between the border and the next page element

Display Property

Specify the display type by
display: type;
where type is a display type

Display Property: NOTE

Can prevent browsers from displaying an element by setting its display property to none

Box Model: NOTE

Major headings, such as h1 headings, often are offset from their surrounding content by a large external margin

Reset Style Sheet

Defines a designer's own default styles; can start from a known baseline

Reset Style Sheet: NOTE

Start by defining all HTML5 structural elements as block elements since IE does not define structural elements as block elements

Reset Syle Sheet: NOTE2

Temporarily hide each section by setting the initial display property for each section to none and then re-displaying only sections that you're ready to work on

Background Images

Background images
background-image: url(url);
where url defines the name and location of the background image file

Tiling

Image repeats in both the vertical and the horizontal until the entire background is filled
background-repeat: type;
where type is repeat (the default), repeat-x, repeat-y, no-repeat, round or space. [round and space are not well supported]

Background Image: NOTE

By default, background image is placed in upper-left corner. Can change position of background image using
background-position: horizontal vertical;
where horizontal/vertical can be the distance from the top-left corner using CSS units of length, a percentage of the element's width or height, or keywords: top, center or bottom (vertical) and left, center or right (horizontal)

Background Image: NOTE2

If you include only one position value, it is applied to the horizontal position and is vertically centered

Background Attachment

By default, the image moves with the content as the user scrolls. Can change this by using
background-attachment: type;
where type is scroll, fixed or local

Watermark Effect

Use the fixed background attachment option; translucent background behind elements

Background Size Property

Sets the size of an element's background image
background-size: width height;
where width width and height are in CSS units or a percentage of element's width/height or keywords auto (sets background image automatically based on size of image in image file), cover (scale image in order to cover all of background while still retaining proportions of image) or contain (scale image so that all image is completely contained within element even if not all element is covered by image)

Background Image: NOTE3

The images that are listed last are the first ones loaded. If images overlap, the first images listed appear on top of subsequent images. List the background color last so that the background images are loaded on top of it. You can specify only ONE background color.

Property Listing

The last property listed and recognized by the browser will be the one applied to the Web page; always start with the oldest and most basic standard and finish with the most current.

Screen Resolution

The most common is 1024 x 768. Roughly 63% of users view the Web at a screen width of 1280 pixels or more.

Web Page Layout: Fixed

One in which the size of the Web page and the size of the elements within it are set without regard to the screen resolution

Web Page Layout: Fluid or Liquid

Defines the size of the page and its elements as a percentage of the screen width, meaning that a Web page and its elements are wider on a wider screen

Web Page Layout: NOTE

Fixed layouts are easier to set up and maintain, but are less pleasing to the eye when viewed on wider screen. Fluid layout more difficult to set up initially, but more adaptable to market with variety of screen sizes and resolutions.

Web Page Layout: Elastic

All measurements are expressed relative to the default font size using the em unit

Element Widths and Heights

Set these using
width: value;
height: value;
where value is the width or height using one of the CSS units or a percentage of the width or height of the containing element

Element Widths and Heights: NOTE

Measurements only apply to the element content, not to padding space, borders, or margins around element. Usually don't set height value because browsers automatically increase height of an element to match content

Element Widths and Heights: Min/Max

Specify min and/or max with
min-width: value;
min-height: value;
max-width: value;
max-height: value;
where value is length expressed in CSS unit of measure

Floating

Takes an element out of the normal flow of the document and positions it along the left or right edge of its containing element.
float: position;
where position is none (the default), left or right

Floating: NOTE

If there is not enough room in a container for all of the floating elements, they automatically wrap to the next line in the page

Floating: Element below float

To place an element below a float use
clear: position;
where position is none (the default), left, right or both (to ensure that both margins are clear of floating elements

Margin Size

Set size of margin style
margin-top: length;
margin-right: length;
margin-bottom: length;
margin-left: length;
where length is expressed in CSS units or percentage of containing element's width or height or keyword auto to allow browsers to automatically set margin size
margin: top right bottom left;

Margin Size: NOTE

You can overlap page elements by specifying negative values for the margins

Padding

Space around elements
padding-top: length;
padding-right: length;
padding-bottom: length;
padding-left: length;
where length is similar to margin definition of length
padding: top right bottom left;

Padding: NOTE

If a single value is entered, it is applied to all four padding values

Positive Space

The part of the page occupied by text, graphics, borders, icons and other page elements

Negative Space or White Space

The unoccupied area which provides balance and contrast to elements contained in positive space

Browser Extention Styles

Must be started with a hypen (-)
-moz-background-size: 40%;

Border Width

Defines thickness of the border
border-top-width: width;
border-right-width: width;
border-bottom-width: width;
border-left-width: width;
where width is a percentage or a CSS unit or keywords thin, medum or thick
border-width: top right bottom left;
one value to all and two values to top/bottom and left/right

Border Color

Defines color of border
border-top-color: color;
border-right-color: color;
border-bottom-color: color;
border-left-color: color;
where color is a color name, color vaue or the keyword transparent to create an invisible border
border-color: top right bottom left;
one value to all and two values to top/bottom and left/right borter

Border Style

Defines the style of the border
border-top:style: style;
border-right-style: style;
border-bottom-style: style;
border-left-style: style;
where style is one of the nine border styles solid dashed dotted, double, outset, insest, groove, ridge and none
border-style: top right bottom left

Border Width: NOTE

By default, block-level elements have a width equal to the width of their containing element unless a different width is set by the page design

Rounded Corners

Apply by using
border-top-left-radius: radius;
border-top-right-radius: radius;
border-bottom-right-radius; radius;
border-bottom-left-radius; radius;
where radius is the radius of the rounded corner in CSS units and top-left, top-right, bottom-left and bottom-right are the radii of the individual corners. If one value, applied to all corners. Two values first to top-left and bottom right and other to top-right and bottom-left. If three, top-left, top-right/bottom-left, and bottom-right in that order

Rounded Corners: Perfect Circle

Define a square block element with the same width and height value and set the radius of all four corners to half of that value

Elongated or Elliptical Corners

Specify two values for the radius separated by slash
horizontal/vertical;
where horizontal is horizontal radius and vertical is the vertical radius

Elongated Corners: Single Corner

Do not include the slash between the horizontal and vertical radii

Elongated Corners: NOTE

Rounded and elongated corners do not clip element content. If the content of the element extends into the corner it still will be displayed as part of the background. Avoid heavily rounded or elongated corners unless you can be sure they will not obscure or distract from the element content.

Element Width: NOTE

The width taken up by an element is calculated by:
total width = content width + padding + border width

DOCTYPE: NOTE

Always include a DOCTYPE declaration in the HTML file to put IE and other browsers into Standards mode rather than Quirks mode

Outline Width

Outline width can be applied using
outline-width: value;
where value is expressed in CSS units or with keywords thin, medium or thick

Outline

A line drawn around and element that does not add to the total space allotted to an element and does not affect the position of the element in the page. They can be non-rectangular in shape

Outline Color

Defined using
outline-color: color;
where color is a CSS color name or value

Outline Style

Define style using
outline-style: style;
where style is one of the design styles none, dotted, dashed, solid, groove, ridge, inset, outset, or double
outline: width color style;

Position an Element

To position an element at a specific point
position: type;
top: value;
right: value;
bottom: value;
left: value;
where type indicates the type of positioning applied to the element and the top, right, bottom and left properties indicate the coordinates of the top, right, bottom an left edges of the element

Position an Element: NOTE

The position property has five possible values: static (the default), absolute, relative, fixed and inherit.

Position an Element: Static Position

The browser places and object where it would naturally flow within the document

Position an Element: Absolute Position

Places an element at specific coordinates either in the page or within a container element. The location of the object depends on the content in which absolute positioning has been applied

Position an Element: Relative Position

Used to move an element relative to where the browser would have placed it if no positioning had been applied

Drop Cap

Consists of an enlarged initial letter in a body of text that drops down into the text body. Increase the font size of an element's first letter, float it on the left margin and decrease the line height of the first letter so the surrounding content can wrap around the letter
p:first-letter {
font-size: 400%;
float: left;
line-height: 0.8;
}

Overflow

Define how browsers should handle content that overflows allotted space using
overflow: type;
where type is visible (default; increase the height of an element to fit the overflow content), hidden (keeps the element at the specified height/width, but cuts off excess content), scroll (keeps the element at the specified dimension, but adds horizontal/vertical scroll bars to allow users to scroll through the overflow) or auto (keeps the element at the specified size adding scroll bars only as they are needed).

Horizontal Overflow

Used to view content in the horizontal direction using
overflow: auto;
white-space: nowrap;

White Space

Property defines how the browser should handle white-space in the document. Setting it to nowrap keeps inline content on a single line, preventing line wrapping, Other options are normal (default), pre (to preserve all white space from the HTML file) and pre-wrap (to preserve white space but to wrap excess content to a new line)

Clipping

Allows you to define a retangular region through which an element's content can be viewed. Anything that lies outside the boundary of the rectangle is hidden.
clip: rect(top, right, bottom, left);
where top, right, bottom, left define the coordinates of the clipping rectangle

Clipping: NOTE

Can only be applied when object is placed using absolute positioning

Transparent Backgrounds

Supported in PNG and GIF image formats, but not in JPEG images. GIF image format supports 256 colors. PNG image format supports 16.7 million colors and also the alpha channel, enabling designers to use transparent to semi-transparent colors

Stacking Elements: NOTE

Elements that are loaded later by the browser are displayed on top of elements that are loaded earlier. Elements placed using CSS positioning are stacked on top of elements that are not

Z-index

Specify a different stacking order
z-index: value;
where value is a positive or negative integer or the keyword auto.

Z-index: NOTE

Z-index works only for elements that are placed with absolute positioning. An element's z-index value determines its position relative only to other elements that share a common parent; the syle has no impact when applied to elements with different parents.

Please allow access to your computer’s microphone to use Voice Recording.

Having trouble? Click here for help.

We can’t access your microphone!

Click the icon above to update your browser permissions above and try again

Example:

Reload the page to try again!

Reload

Press Cmd-0 to reset your zoom

Press Ctrl-0 to reset your zoom

It looks like your browser might be zoomed in or out. Your browser needs to be zoomed to a normal size to record audio.

Please upgrade Flash or install Chrome
to use Voice Recording.

For more help, see our troubleshooting page.

Your microphone is muted

For help fixing this issue, see this FAQ.

Star this term

You can study starred terms together

NEW! Voice Recording

Create Set