How can we help?

You can also find more resources in our Help Center.

WTWEB110_2013_ch4

STUDY
PLAY
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.