Create an account
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: 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: 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
where url defines the name and location of the background image file
Image repeats in both the vertical and the horizontal until the entire background is filled
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
By default, the image moves with the content as the user scrolls. Can change this by using
where type is scroll, fixed or local
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.
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.
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
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
where value is length expressed in CSS unit of measure
Takes an element out of the normal flow of the document and positions it along the left or right edge of its containing element.
where position is none (the default), left or right
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
where position is none (the default), left, right or both (to ensure that both margins are clear of floating elements
Set size of margin style
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;
Space around elements
where length is similar to margin definition of length
padding: top right bottom left;
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
Defines thickness of the border
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
Defines color of border
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
Defines the style of the border
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
Apply by using
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
where horizontal is horizontal radius and vertical is the vertical radius
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
Always include a DOCTYPE declaration in the HTML file to put IE and other browsers into Standards mode rather than Quirks mode
Outline width can be applied using
where value is expressed in CSS units or with keywords thin, medium or thick
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
Define style using
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
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
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
Define how browsers should handle content that overflows allotted space using
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).
Used to view content in the horizontal direction using
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)
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
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
Specify a different stacking order
where value is a positive or negative integer or the keyword auto.
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 and try again
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