CSS
Background color- What property allows us to change the background color? How many ways can you specify your choices? What happens if you dont specify a color?
background - color - Css treats each html element as if it appears in a box and the back ground color property sets the color of the background for that box. You can specify your choice of color in the same three ways you can specify for foreground colors: RGB values, Hex codes, and color names. If you don't specify a color, then the background is transparent.
Background Images - What property allows you to place an image behind any html element? What is the value?
background-image: url(""); - The background-image property allows you to place an image behind any html element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box. the path to the image follows the letters url, and is inside parentheses and quotes.
Cursor Styles - What does this property allow you to do? What are the most common values for this property?
cursor - This property allows you to control the type of cursor that should be displayed. Here are the most common properties: auto, crosshair, default, pointer, move, text, wait, help, url("")
Hiding boxes- What property allows you to hide boxes from users? What are the two possible properties that you can use?
visibility - The visibility property allows you to hide boxes from users but it leaves a space where the element would have been. The property can take two values: hidden; visible;
Comments - How do we add comments in CSS?
/* /* - CSS allows you to add comments with these symbols.
Responding to users - What are the three pseudo-classes that can edit links?
:hover - This changes the appearance of links and buttons when a user puts a cursor over them. :active - This applied when an element is being activated by a user. :focus - This is applied when an element has focus. Any element you can interact with has focus.
Articles - What is the element and what is it used for?
<article> - This element acts as a container for any section of a page that could stand alone and potentially be syndicated. If a page contains sever articles then each individual article would live inside its own <article> element. They can be nested within each other.
Asides - What is the element and what is its two purposes?
<aside> - This element has two purposes, depending on whether its inside an <article> element or not. When inside, it should contain info related to the article, but not essential to its overall meaning. When outside, it acts as a container for content that is related to the entire page.
Figures - What is the element and what is it used for?
<figure> <figcaption> - It can be used to contain any content not just images.
Headers and Footers - What are the elements and what can they be used for?
<header> <footer> - These elements can be used for: The main header or footer that appears at the top or bottom of every page on the site. A header of footer for an individual <article> or <section> within the page.
Heading groups - What is the element and what is it used for?
<hgroup> - The purpose of the <hgroup> element is to group together a set of one or more <h1> though <h6> elements so that they are treated as one single heading.
Using external CSS - What is the element to use external CSS? What are the three attributes you need? what should the name of the file be?
<link> - The link element can be used in a html document to tell the browser where to find the css file used to style the page. It's an empty element, and it lives inside the <head> element. It should use three attributes: href - This specifies the path to the css file type - This attribute specifies the type of doc being linked. The value should be text/css rel - This specifies the relationship between the html page and the file it's linked too. the value should be stylesheet when linking to a css file. *An html page can use more than one css style sheet. To do this have multiple <link> elements for every css file.
Navigation - What is the element and what is it used for?
<nav> - This element is used to contain the major navigational blocks on the site such as the primary site navigation.
Sections - What is the element and what is it used for?
<section> - This element groups related content together, and typically each section would have its own heading.
Using internal css - What is the element? What attribute should you use?
<style> - You an also include CSS rules within an html page by placing them inside a <style> element, which usually sits inside the <head> element of the page. The <style> element should use the type attribute to indicate that the styles are specified in css. The value should be text/css. **When building a size with more than one page, you should use an external css style sheet.**
More font choices - How do we add more font choices? What values are need? do you still need to specify another selector and declaration? What is the seletor?
@font-face THIS IS THE SELECTOR - This selector allows you to use a font, even if its not installed on the computer. You need to add three declarations and values - font-family - This specifies the name of the font and the value is the name of the font. src - This specifies the path to the font. Ex: src:url('fonts/chuck.com) format - This specifies the format that the font is supplied in.
Using floats side by side - (Not for studying)
A lot of layouts place boxes next to each other. The float property is commonly used to achieve this. When elements are floated, the height of the boxes can affect where the following elements sit.
Key concepts in positioning elements - (Not really for studying)
Building Blocks - Css treats each html element as if it's in its own box. This box will either be an inline or block level box. * block level elements start on a new line. * inline elements flow in between surrounding text. Containing elements - If one block-level- element sits inside another than the outer box is known as the containing or parent element. Its common to group a number of elements together inside a <div> element.
styling forms - NOT TO STUDY
CSS is commonly used to control the appearance of form elements. It is most common to style Text inputs and text areas submit buttons Labels on forms - especially alignment
CSS format - How does css format work? What are the two parts? Define the two.
CSS works by associating rules with HTML element. A CSS rule contains two parts a selector and a declaration. Selectors - Indicate which element the rule applies too. The same rule can apply to more than one element. If you separate the element names with commas. Declarations - Indicates how the element should be styled. They are split into two parts (a property and value) and are separated by a colon.
Foreground color - What property allows us to change the color of text inside an element? What are the three ways you can specify color?
Color: The color property allows you to specify the color of text inside an element you can specify any color in css in one of three ways. RBG values - These express colors in terms of how much red, green , and blue are used to make it up. Hex codes - these are six-digit codes that represent the amount of red, green, and blue in a color. Preceded by a pound or has sign. Color names - There are 147 predefined color names that are recognized by browsers.
Declarations - What is a declaration? How many parts is it made of? Can you specify more than one properties in one delceration?
Css declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi colon. Properties - Indicate the aspects of the element you want to change. Values - Specify the setting you want to use for the chose properties
Controlling the position of elements - What are the three positioning schemes that allow you to control the layout of a page? How do you indicate where a box should be positioned?
Css has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, absolute positioning. You specify the positioning scheme using the position property. You can also float elements using the float property. To indicate where a box should be positioned, use the box offset property to tell the browser where it should be placed.
Font format - Don't need to study just good to know.
Different browsers support different formats for fonts, so you will need to supply the font in several variations. The various font formats should appear in this order. eot woff ttf/otf svg
Border, Margin, and Padding - What are the three properties that can be adjusted to control its appearance?
Every box has three available properties that can be adjusted to control its appearance - Border - Every box has a border. The border separates the edge of one box from another. Margin - Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Padding - Padding is the space between the border of a box and any context contained within it. Adding padding can increase the readability of its context.
HSL and HSLA - What does this property do? What values does it use? What does HSLA do?
HSL - this property gives an alternative way to specify color. The value of the property starts with the letters hsl, followed by values in parenthesis. Hue - This is expressed as an angles (0 - 360) Lightness - This is expressed as a percentage with 0 percent being white, 50 percent being normal, and 100 percent being black. Saturation- This is expressed as a percentage HSLA - Adds a fourth value for transparency alpha - This is expressed as a number between 0 and 1.0
Styling Submit Buttons - What are the five properties that are commonly used with styling submit buttons? NOT FOR STUDYING BUT TRY AND REMEMBER IT
Here are some properties that can be sued to style submit buttons: color - Is used to change the color fo the text text-shadow - can give a 3D look to the text border-bottom - to make the bottom of the border slightly thicker and stand out background-color :hover
Table Properties - What are the 7 properties commonly used with tables? NOT REALLY FOR STUDYING BUT TRY AND REMEMBER IT!!!!
Here are the properties commonly used with tables: width - To set the width of the table padding - to set the space between the border of each table cell and its contents. text-transform - To make the <th> uppercase letter-spacing, font-size - To add additional styling border-top, border-bottom - To set borders above and below the <th> text-align - to align the writing background-color - To change the background color :hover - To highlight a table row. There are all tips to ensure the tables are clean and easy to follow. -Give cells padding - Distinguish headings - Shade alternate rows - Align numerals -
New html5 layout elements layout elements - (NOT FOR STUDYING)
Html5 introduces a new set of elements that allow you to divide up the parts of a page. The name of these elements indicate the kind of content you'll find in them.
Rules Cascade - What are the three main reasons a css rule might take precedence over another?
If there are two more rules that apply to the same element, its important to understand which takes precedence. Last rule - If the two selectors are identical, the latter of the two will take precedence. Specificity - If one selector is more specific than the others, the more specific rule will take precedence over more general ones. Important - You can add !important after any property value to indicate its more than other rules.
Inheritance - How does inheritance work in css?
If you specify the font-family or color properties on the <body> element, they will apply to most child elements. This is b/c the value of the font-family property is inherited by child elements. You can compare this with the background color of border properties they are not inherited by child elements. You can force a lot of properties to inherit values from their parent elements by using inherit for the values of the properties.
Centering Content - How do you center a box on the page.
If you want to center a box on the page, you can set the left-margin and right-margin to auto. First in order to do this, you need to set a width for the box.
Styling links -Are these properties? What are the selectors? What do they do?
In css, there are two pseudo-classes that allow you to set different styles for links. :link - This allows you to set styles for links that have not yet been visited. :visited - This allows you to set styles for links that have been clicked on.
Centering images using css - What should the image be turned into in order to center it? What are the two way you can center an image?
In order to center an image, it should be turned into a block-level element using the display property with a value of block. There are two ways in which you can center an image. 1. On the containing element you can use the text-align property with a value of center. 2. On the image itself, you can use the margin property and set the values to 0px and auto.
Creating multi-column layouts with floats - How is a multiple column design achieved? What are the three properties are used to position columns next to each other?
Many web pages use multiple columns in their design. This is achieved by using a <div> element to represent each column. The following three css properties are used to position the columns next to each other. width - This sets the width of the columns. float - This positions the columns next to each other. margin - This creates a gap between the columns. * Use the div element *
Opacity - What does opacity allow you to do? What is the value? What is another way to also include opacity?
Opacity - The opacity property allow you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0. rgba - Adds a fourth property to indicate opacity. this value is known as an alpha value and is a number between 0.0 and 1.0.
Understanding color - Not really for studying!
RGB values - Values for red, green, and blue are expressed as numbers between 0 and 225. Hex codes - Hex values represent values for red, green, and blue in hexadecimal code. Color names - Colors are represented by predefined names. Hue - Hue is near to the colloquial idea of color. Saturation - Saturation refers to the amount of gray in a color. At max saturation, there would be no gray in the color. At minimum, the color would be mostly gray. Brightness - Brightness refers to how much black is in a color. At max there in no black, and at minimum very dark.
Type face terms - Not really for studying
Serif - The Serif fonts have extra details on the ends of the main strokes of the letters. Traditionally used for longer passages b/c it was easier to read. Sans-Serif - This font has straight ends to letters, and a cleaner design. If the test is small this is much clearer to read. Monospace - Every letter has the same width.
Understanding CSS - What is the key to understanding CSS? What are three examples of the styles css lets you edit?
The key to understanding how css works is to imagine that there is an invisible box around every html element. CSS allows you to create rules that control the way that each individual box is presented. Ex styles: Boxes - Width and height, borders, background color and images. Text - Typeface, size, color, italics and bold uppercase. Specific -There are also specific ways in which you can style certain elements such as lists, tables, and forms.
A liquid layout - (Not really for studying)
The liquid layout uses percentages to specify the width of each box so that the design will stretch to fit the size of the screen.
Padding - What does this property allow you to specify? What is the value usually specified in? Can you specify different values for each side?
The padding property allows you to specify how much space should appear between the content of an element and its border. The value of this property is most often specifies in pixels. If a width is specified for a box, padding, is added onto the width of the box. You can specify different values for each side of a box using: padding-top padding-right padding-bottom padding-left
CSS Selectors - What are the 8 common css selectors?
There are many different types of css selectors, that allow you to target rules to specify elements in an html doc. CSS selectors are case sensitive, so they must match element names and attribute values exactly. Selector: Meaning: Universal Selector *{} Applies to all elements Type Selector h1,h2{} Matches element names Class Selector .note{}. Matches element with class value ID selector #idvalue{} Matches an element with id value Child selector li>a {} Matches an element thats a child of another Descendant selector p a {} matches an element that is a descendant of another Adjacent sibling selector h1+p{} matches element that is next sibling of another General sibling selector h1^p{} Matches an element that is a sibling of another.
Multiple style sheets - What are the property and element that allow you to add multiple style sheets to a page?
There are two ways to add multiple style sheets to a page: @import: - Your html page can link to one style sheet and that style sheet can use the @import rule to import other style sheets. <link> - You can also use a separate <link> element for each style sheet.
Styling Text Inputs - What 8 properties are commonly used with styling text inputs? NOT FOR STUDYING BUT TRY AND REMEMBER
This is the commonly used CSS properties with text inputs: font-size - sets the size of the text entered by the user. color - sets the text color background color - sets the background color of the input. border - adds a border around the edge of the input box border-radius - can be used to make rounded corners. :focus , :hover background-image - adds a background image to the box.
A fixed width layout - (Not really for studying)
To create a fixed width layout, the width of the main boxes on the page will usually be specified in pixels. We make a rule for the <body> element to fix the width at a certain pixels ex 960px
Image rollovers and sprites - (NOT REALLY FOR STUDYING)
Using CSS, it's possible to create a link or button that changes to a second style when a user moves their mouse over it, and a third style when they click on it. This is achieved by setting a background image for the link or button that has three different styles of the same button. When the user moves their mouse over the element, or clicks on it, the position of the background image is moved to show the relevant image. When a singe image is used, it's know as a sprite.
Aligning images using css - What property do developers use to align images? What are the two ways this can be achieved? What is it also common to do?
Web page authors are using the float property to align images. There are two ways that this is commonly achieved. 1. The float property is added to the class that was created to represent the size of the image. 2. New classes are created with names such as align-left or align-right to align the images to the left or right of the page. These class names are used in addition to classes that indicate the size of the image. It is also common to add a margin to the image to ensure that the text does not touch their edge.
Contrast - What are the three different types of contrast? How are they different?
When picking foreground and background colors, it's important to ensure that there is enough contrast for the text to be legible. Low Contrast - Text is harder to read High Contrast - Text is easier to read unless it's a lot of text. Medium Contrast - Used for long spans of text.
Controlling sizes of images - What two properties allow you to control the size of an image? What are the common size dimensions that developers use?
You can control the size of an image using the width and height properties. Specifying image size helps pages to load more smoothly. You might think your site is likely to have images of all different sizes, but a lot of sites use the same sizes. - Small portrait: 220 x 360 - Small landscape: 330 x 210 - Feature photo: 620 x 400 You can do this rather than putting the dimensions in the html.
Background-position - What is the property that specifies where in the browser window the background image should be placed? What are the pair of values that this property has?
background-position - This property specifies where in the browser window the background image should be placed. This property has a pair of values. The first for horizontal and the second for vertical. - left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom - If you only specify one value, the second value will default to center. You can also use a pair of percentages.
Repeating images - What is the property that allows you to control how an image repeats? What are the four values it can take? What property allows you to control the position of an image when a user scrolls? What are the two values?
background-repeat: - This property can have four values. repeat - The background image is repeated both horizontally and vertically. repeat-x - The image is repeated horizontally only. repeat-y - The image is repeated vertically only. no-repeat The image is only shown once. background-attachment: This property specifies whether a background image should stay in one position or move as the user scrolls up and down the page. fixed - The background image stays in the same position. Scroll - The background image moves up and down as the user scrolls.
shorthand for background - What is the shorthand property for background? What order does it need to be specified in?
background: - This is a shorthand for all of the other background properties. The properties must be specified in the following order: 1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position
Shorthand - What is the shorthand property to specify width, style, and color of border.
border - The border property allows you to specify, width, styles, and color of a border in one property. Ex: border: 3px dotted #008874
Border Color - What does this property do? What values can you use? Is it possible to individually change the styles?
border-color - You can specify the color of a border using either RGB values, hex codes, or CSS color names. It's possible to individually change the styles like above or use a shorthand order relative to the box.
Border Images - What does this property allow you to do? What are the three properties that it needs?
border-image - The border-image property applies an image to the border of any box. It takes a background image and slices it into nine pieces. This property requires three pieces of info: url("") where to slice the image value and stretch - repeat - round The box must also have a border width for the image to be shown.
Gaps between cells - What are the two properties that you can use for gaps between cells? What are the three properties that can be taken?
border-spacing - This property allows you to control the distance between adjacent cells. The value of this property is usually specified in pixels. You can specify two values for horizontal and vertical spacing. border-collapse - This property can have two values collapse - Borders are collapsed into a single border where possible. separate - Borders are detached from each other.
Border Style - What does this property do? What 9 values can you use? How do you change the border style individually.
border-style - You can control the style of a border using this property. This property can take the following values. Solid - A single solid line. Dotted - A series of square dots. Dashed - A series of short lines. Double - two solid lines. Groove - Appears to be carved into the page. Ridge - Appears to stick out of the page. Inset - Appears embedded into the page. Outset - Looks like its coming out of the screen. Hidden/None no border shown. You can individually change the styles of different borders using: border-top-style, border-right-style, border-bottom-style, border-left-style.
Border Width - What is this property used for? What are the values that can be used?
border-width - This property is used to control the width of a border. The value can either be given in pixels or one of these values: thin, medium, and thick You can control the individual size of borders using four separated properties - border-top-width, border-right-width, border-bottom-width, border-left-width. You can also specify different widths for the four border values, like so; border-width: 2px 1px 1px 2px
Clearing floats - What is the property and what does it allow you to do? What are the 4 values that it can take?
clear: - This property allows you to say that no element (within the same containing element) should touch the left or right hand sides of the box. It can take the following values. left - The left-hand side of the box should not touch another element. right - The right side can't touch another element. both - They both can't touch another element. none - Elements can touch either side.
Change Inline/Block - What does this property allow you to do? What are the four possible values that you can use?
display - The display property allows you to turn an inline element into a block-level element or vise versa, and can also be used to hide an element. inline - This causes a block-level element to act like an inline element. block - This causes an inline element to act like a block-level element. inline-block - This causes a block-level element to flow like an inline element, while retaining other features fo a block-level element. none - This hides an element from the page.
Borders on empty cells - What does this property do? What three value can it take?
empty-cells - If you have empty cells in your table, then you can use this property to specify whether or not their borders should be shown. It can take one of three values: show - This shows the borders of any empty cells hide - This hides the borders of any empty cells inherit - This value instructs the table cell to obey the rules of the containing table.
Floating Elements - What is the property and the values? What does it mean to float an element? What two values can it take?
float: - The float property allows you to take an element in normal flow and place it as far to the left or right of the containing element as possible. Anything else that sits inside the containing element will flow around the element that's floated. Also use the width property to indicate how wide the floated element should be.
Specifying type face - What property do you use to specify type face? What is the value you should use? What are some other use full things to do?
font-family - The font-family property allow sou to specify the type face that should be used. The value of the property is the name of the type face you want to use. You should specify a list of fonts separated by commas so the browser can use an alternative font from the list. It is also common to end with a generic font name. If the font name is longer than one word is should be put in double quotes.
size of type - What property do you use to specify size of type? What values go with it?
font-size - The font-size property enables you to specify a size for the font. There's a couple values you can use: Pixels - Offer very precise control over how much space text takes up Ex: 12px Percentages - 0% - 200% Ems - An em is equivalent to the width of a letter m.
Italic - What is the property to make italic text? What are the three values that this property can take?
font-style - IF you want to create italics text, you can use this property. There are three values this property can take. normal - normal style (off switch) italic - Causes text to be italic oblique - Causes text to be oblique
Bold - What is the property to make bold text? What are the two values that this property commonly take?
font-weight - The font-weight property allows you to create bold text. There are two values that this property commonly takes. Normal - This causes text to appear at a normal weight. (used as an off switch) bold - This causes text to appear bold.
Letter and word spacing - What property allows you space out letter and word? What values do you use, and in terms of what?
letter-spacing - It's help full to increase the kerning when your heading or sentence is all uppercase. You can also control the gap between words using the word-space property. word-spacing - When you specify a value for these properties, it should be given in ems. The default gap between words is set by the typeface .25em.
Leading - What does this property do? What can the value be, and in terms of what?
line-height - In css, the line height property sets the entire height of a line of text. Increasing the line-height makes the vertical gap between lines of text larger Ex: line-height: 1.4em ; }
list-shorthand - What is the property that acts as a shorthand for list styles including, type, image, and position? Can you put the values in any order?
list-style - This acts as a shorthand for list styles. It allows you to express the marker's style, image, and positions properties in any order.
Images for bullets - What can you do with this property? What value does this property take? And what elements can this property apply too?
list-style-image - You can specify an image to act as a bullet point using this property. The value is url followed by quotes and parenthesis. This property can be used on rules that apply to the <ul> and <li> elements.
Positioning the marker - What does this property do? What two values can this property take?
list-style-position - This property indicates whether the marker should appear on the inside or the outside of the box containing the main points. outside: inside:
Bullet point styles - What does this property allow you to do? What element does this apply to? What are the 10 properties it can take?
list-style-type - The list-style-type property allows you to control the shape or style of a bullet point. It can be used on rules that apply to the <ul>, <ol>, and <li> <ul> - none, disc, circle, square <ol> - decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman.
Margin - What does this property do? What can the values be?
margin - The margin property controls the gap between boxes. Its values is given in pixels, although you can also use percentages or ems. You can specify values for each side of a box using. margin-top margin-right margin-bottom margin-left
Limiting Height -What does this property do? What are the values that you can use?
min-height, max-height - In the same way that you might want to limit the width of a box on a page, you may also want to limit the height of it. This is achieved using the min-height and max-height properties.
Limiting Width - What does this property do? What are the values in?
min-width, max-width - Some page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch. These are helpful properties to ensure that the content of pages are legible. Values are in pixels.
Overflowing content - What does this property do? What are the two values that it can take?
overflow - The overflow property tells the browser what to do if the content within a box is larger than the box itself. It can have one of two values - hidden - This property hides any extra content that does not fit in the box. scroll - This property adds a scrollbar to the box so that users can scroll to see the missing content.
Absolute positioning - What is the property and value? What does absolute positioning mean? Do you use offset properties?
position: absolute; - When the position property is given a value of absolute, the box is take out of normal flow, and no longer affects the position of other elements on the page. We use the offset properties to specify where the element should appear.
Fixed positioning - What is the property and the value? What does fixed positioning mean? Do you use the offset properties?
position: fixed; - Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed. It positions the element in relation to the browser window. Therefore, when a user scrolls it stays in the exact same place. The box offset properties are used to position the box.
Relative positioning - What is the property and the value? What does relative positioning mean? What else do you have to indicate in order how far you should move the element? What are the values give in?
position: relative; - Relative positioning moves an element in relation to where it would have been in normal flow. Ex: You can move it 10px lower or 20px to the left. You can indicate that an element should be relatively positioned using the position property with a value of relative. After you then use the offset properties (top, bottom, left, right) to indicate how far you should move the element. The values of the box offset properties are given in pixels, percents, or ems.
Normal flow - What is the property and the value? What does it mean to be in normal flow?
position: static; - In normal flow, each block-level element sits on top of another. Since this is the default way, you do not need to specify it.
Styling Field sets and legends - What are the 6 common properties used with styling field set and legends?
properties commonly used with these two elements are: width - is used to control the width of the field set color - is sued to control the color of text. background-color - is used to change the color behind these items. border - is used to control the appearance of the border - border-radius - padding -
Alignment -What does this property do and what is the property called? What are the 4 values that go with it?
text-align - this property allows you to control the alignment of text. left - This indicates the text should be left-aligned right - this indicates the text should be right-aligned center - this allows you to center the text. justify - This indicates that every line in a paragraph except the last should take up the width of the full box.
Underline and Strike - What is the property that allows you to decorate text? what are the 5 values that you can use with it?
text-decoration - This property allows you to specify the following values. none - This removes any decorations already applied to the text. Underline - This adds a line underneath the text. overline - This adds a line over the top of the text. line-through - adds a line through words. blink - Animates the txt to make it flash on and off
Indenting Text - What is the property that allows you to indent text? What are the values specified in? Can it take a negative value?
text-indent - The text-indent property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in pixels or ems. *It can take a negative value, which means it could be used to push text off the browser window.*
Upper and Lower case - What is the property that makes upper and lower case letters? What are the three values that this property can take?
text-transform - This property is used to change the case of text. uppercase - this causes the text to appear uppercase. Lowercase - Makes the text look lowercase Capitalize - Causes each word to appear capitalized.
Vertical alignment - What is the property used for? What is the property? What is it most commonly used with? What are the 8 values that go with it?
vertical-align - more commonly used with inline elements such as <img> The values it can take are: baseline, sub, super, top, text-stop, middle, bottom, text-bottom.
Box Dimensions - How do you set your own dimensions for a box? What value do you use to specify the size of the box.
width, height - To set your own dimensions for a box you can use the height and width properties. The most popular way to specify the size of the box are to use pixels, percentages, or ems. When you use percentages the size of the box is relative to the size of the browser window, or the size of the box containing it.
Overlapping elements - What is the property and the value? Why would we use this property? How does the value work?
z-index - When you use the relative, fixed, or absolute positioning, boxes can overlap. If you want to control which elements sits on top, use the z-index property. It's value is a number, and the higher the number the closer the element is to the front.