Chapter 6: More CSS Basics

margin property

configures ____ on all sides of an element. To configure the size, use a numeric value (px or em). To have no space, configure it to 0 (with no unit). Can also configure individual settings for margin-top, margin-bottom, margin-right, margin-left.

padding property

configures empty space between the content of the HTML element and the border. By default, it is set to 0. Can also configure individual settings for padding-top, padding-bottom, padding-right, padding-left.

radial gradient

is a smooth blending of color emanating outward from a single point. Code as the value of the background-image property to configure a radial gradient. Example: background-image: radial-gradient(#FFFFFF, #0000FF);

linear gradient

is a smooth blending of color in a single direction such as from top to bottom or from left to right. To configure code the linear-gradient function as the value of the background-image property. Example: background-image: linear-gradient(to bottom, #FFFFFF, #00FF00);

gradient

is a smooth blending of shades from one color to another color.

padding area

is between the content and the border. The default value is 0. When the background element is configured, the background is applied to both the ____ and the content areas.

border area

is between the padding and the margin. The default has a value of 0 and does not display.

hue

is the actual color which is represented by numeric values ranging from 0 to 360.

visible width

is the total of the content width, the padding width, and the border width.

center page content

key is to configure a div element that contains or "wraps" the entire page content.

box-shadow / text-shadow

add depth and dimension the the visual display of a web page.

box-shadow property

can be used to create a ____ effect on the box model. Configure a ____ by coding values for the horizontal and vertical offset, blur radius (optional), spread distance (optional), and color. Example: box-shadow: 5px 5px 5px #828282;

border-radius property

can be used to create rounded corners and soften up those rectangles. Is supported by current versions of major browsers. Includes one to four numeric values (px or em) or percentages: border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, and border-top-right-radius. Example: border: 1px solid #000000; border-radius: 15px;

background-size property

can be used to resize or scale the background image. Valid values for the property can be: a par of percentage values (width, height), a pair of pixel values (width, height), cover, and contain. Example: #test1 { background-image: url(sedonabackground.jpg); background-repeat: no-repeat; background-size: 100% 100%; }

height property

configures the ____ of an element's content in the browser viewport with either a numeric value unit (900px) or percentage (60%) of the parent element. Example: height: 60%

width property

configures the ____ of an element's content in the browsers viewport with either a numeric value unit (100px or 20em) or percentage (80%) of the parent element. ONLY configures the ____ of the element's content (not including any padding, border, or margin). Example: width: 80%

border property

configures the ____, or boundary, around an element. By default it has a width set to 0 and does not display. Can also configure individual settings for border -top, border -bottom, border -right, border -left, border -width, border -style, border -color.

saturation

configures the intensity of the color and is indicated by a percentage value (full color saturation= 100%, gray = 0%)

opacity property

configures the transparency of an element. Values range from 0 (completely transparent)to 1 (opaque = no transparency). Applies to both the background and the text. Example: opacity : 0.6;

background-clip property

confines the display of the background image with the following values: content-box, padding-box, and border-box. Example: .test { background-image: url(myislandback.jpg); background-clip: content-box; width: 400px; padding: 20px; margin-bottom: 10px; border: 10px dashed #000; }

content area

consist of a combination of text and web page elements such as images, paragraphs, headings, lists, and so on.

box model

consists of a content area surrounded by padding, a border, and margins.

text-shadow property

creates a ____ around specified text. Configure by coding values for the horizontal and vertical offset, blur radius (optional), and color. Example: text-shadow: 3px 3px 5px #666;

lightness

determines the brightness or darkness of the color and is indicated by a percentage value (normal color=50%, white=100%, black=0%).

margin

determines the empty space between the element and any adjacent elements. Is ALWAYS transparent. Browser often have default ____ values set for the web page document and for certain elements such as paragraphs, headings, forms. Use this property to override the default browser values.

border-style property

offers a variety of formatting options. Not all uniformly applied by browsers. Example: .dashedborder { border-width: 3px; border-style: dashed; border-color: #000033; } Shorthand Example: .dashedborder { border: 3px dashed #000033; }

background-origin property

positions the background image using the following values: content-box, padding-box, and border-box. Has no effect if the background-attachment property is set to the value fixed. Example: .test { background-image: url(trilliumsolo.jpg); background-origin: content-box; background-repeat: no-repeat; background-position: right-top; width: 200px; padding: 20px; margin-bottom: 10px; border: 1px solid #000; }

alpha

represents the transparency of the color and has a value from 0 (transparent) to 1 (opaque).

min-width property

sets the ____ ____ of an element's content in the browser viewport with either a numeric value unit (700px or 20em) or percentage (75%) of the parent element. CAN prevent content from jumping around when a browser is resized. Scrollbars appear if the browser viewport is resized below the ____ ____. Example: min-width: 750px

max-width property

sets the ____ ____ of an element's content in the browser viewport with either a numeric value unit (960px) or percentage (90%) of the parent element. CAN reduce the possibility of text stretching across large expanses of the screen by a high-resolution monitor. Example: max-width: 960px

RGBA color

syntax for the color property that configures transparent color. The values for red, green, and blue must be decimal values from 0 to 255. Example: h1 { color: rgba (255, 255, 255, 0.8); }