Term
| What is inline styling in CSS ? |
|
Definition
The style="" attribute is applied directly to the HTML tag with the CSS as the attribute value between the double quotes.
Ex.
<p style="color:red">Red font!</p>
|
|
|
Term
| Is inline styling the best way to implement CSS in an HTML document ? |
|
Definition
| No, because: you have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place! |
|
|
Term
| If you place your CSS between the <style></style> tags within your HTML document where do the style tags belong ? |
|
Definition
| Between the <head></head> tags. |
|
|
Term
| What HTML tag do you use to link an external style sheet to the document and what 3 attributes must this tag have ? |
|
Definition
The <link> tag.
The type="" attribute
The rel="" attribute
The href="" attribute
Ex.
<link type="text/css" rel="stylesheet" href="stylesheet.css" /> |
|
|
Term
| What is the basic syntax of CSS ? |
|
Definition
A selector followed by a left curly bracket ' { ' that contains properties with their respective values and ended with a right curly bracket' } '
Ex.
selector { property: value; }
|
|
|
Term
|
Definition
Any HTML element, such as<p>, <img>, or <table>. You just take off the <>s! To make a paragraph's text red with CSS, you'd type:
p { color: red; }
|
|
|
Term
|
Definition
An aspect of a selector. For instance, you can change the font-family,color, and font-size of the text on your web pages (in addition to many more). |
|
|
Term
| What is a value (in CSS) ? |
|
Definition
A possible setting for a property. With the color property you could use red, blue, black, or almost any color (as the value); font-family can be a whole bunch of different fonts; and so on. |
|
|
Term
| All property:value pairs for a selector are surrounded by what ? |
|
Definition
left and right curly bracket ' { } '
Ex.
p {
font-family: Garamond;
font-size: 16px;
} |
|
|
Term
What does em mean in terms of font size ?
Ex.
<p style="font-size: 1em"> |
|
Definition
| The em unit is a relative measure: one em is equal to the default font size on whatever screen the user is using. 0.5em would be half the default size, 2em would be twice the default size, etc... |
|
|
Term
| What situation would using the em font size unit be more appropriate than the px unit ? |
|
Definition
| When the user may be viewing your document on a different size screen, such as a smart phone. |
|
|
Term
|
Definition
A font with little decorative bits on the ends of the strokes that make up letters.
Ex.
This is in serif font. This is sans-serif. |
|
|
Term
| What is a sans-serif font ? |
|
Definition
| A plain-looking font, like this one. It doesn't have the little decorative bits on the ends of the strokes. |
|
|
Term
| What are the three built in default fonts in CSS ? |
|
Definition
|
|
Term
| What happens when you use an asterisk ' * ' as a selector in CSS ? |
|
Definition
It applies whatever properties:values you set to every HTML tag.
Ex.
* {color:red} |
|
|
Term
| What is a pseudo-class selector ? |
|
Definition
| A way of accessing HTML items that aren't part of the document tree. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked! |
|
|
Term
| What is the syntax for a pseudo-class selector ? |
|
Definition
selector:pseudo-class_selector { property: value; }
|
|
|
Term
| Name three pseudo-class selectors for links. |
|
Definition
a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouseover. |
|
|
Term
What does the first-child pseudo-class selector do?
p:first-child { color: red; }
|
|
Definition
| It make all paragraphs that are the first children of their parent elements red. |
|
|
Term
What does the nth-child pseudo-class selector do in this example?
p:nth-child(2) { color: red; }
|
|
Definition
It would turn every paragraph that is the second child of its parent element red.
The element that is the child goes before:nth-child; its parent element is the element that contains it. |
|
|
Term
How will the selectors in this example affect the outcome of the user's document ?
div div p { }
|
|
Definition
Only the <p> child of the second <div> element will be affected by the properties:values of the CSS.
This will style all paragraphs nested inside two divs and will leave all paragraphs that don't meet these criteria alone. |
|
|
Term
| Name four possible values for the display property. |
|
Definition
block
inline-block
inline
none |
|
|
Term
| What does the block value do when applied to the display property ? |
|
Definition
| Makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width. |
|
|
Term
| What does the inline-block value do when applied to the display property ? |
|
Definition
| Makes the element a block box, but will allow other elements to sit next to it on the same line. |
|
|
Term
| What does the inline value do when applied to the display property ? |
|
Definition
| Makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line). |
|
|
Term
| What does the none value do when applied to the display property ? |
|
Definition
| Makes the element and its content disappear from the page entirely. |
|
|
Term
| What does the margin property do in CSS ? |
|
Definition
| It is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. |
|
|
Term
| What does the border property do in CSS ? |
|
Definition
| It is the edge of the element. It's what is made visible every time you set the border property (to a number greater than zero). |
|
|
Term
| What does the padding property do in CSS ? |
|
Definition
| It sets the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content. |
|
|
Term
| What does the content property do in CSS ? |
|
Definition
| The actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph. |
|
|
Term
This example sets all four margins in one statement, what does the first, second, third, and fourth value represent ?
margin: 1px 2px 3px 4px;
|
|
Definition
Top, Right, Bottom, Left
i.e.-Starts at the top and goes counter-clockwise. |
|
|
Term
| What does margin:auto; do ? |
|
Definition
| It tells the document to auto matically put equal left and right margins on our element, centering it on the page. |
|
|
Term
Can you apply negative values to the margin property ?
Ex.
margin-left: -20px |
|
Definition
| Yes, this will move the element 20 pixels to the left. |
|
|
Term
| What does the float property do (with the value of right or left) ? |
|
Definition
| Floats an element to the right or left of the page as far as it can without interfering with other elements. |
|
|
Term
| What are the three values for the clear property ? |
|
Definition
|
|
Term
| What do the three values (left, right, & both) do when applied to the clear property ? |
|
Definition
| If you tell an element to clear:left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear:both, it will get out of the way of elements floating on the left and right. |
|
|
Term
| If you don't specify an element's positioning type, it defaults to ______? |
|
Definition
| static - This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document. |
|
|
Term
What is absolute positioning ?
position:absolute; |
|
Definition
| The element is positioned in relation to the first parent element it has that doesn't have position:static . If there's no such element, the element with position:absolute gets positioned relative to <html> |
|
|
Term
What is relative positioning ?
postion:relative; |
|
Definition
| It tells the element to move relative to where it would have landed if it just had the default static positioning. |
|
|
Term
What is fixed positioning ?
position:fixed; |
|
Definition
| It anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past. |
|
|
