Shared Flashcard Set

Details

CSS - Cascading Style Sheets
A comprehensive test of CSS - Cascading Style Sheets
40
Computer Science
Graduate
03/02/2013

Additional Computer Science Flashcards

 


 

Cards

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
What is a selector
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
What is a property ?
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
What is a serif font ?
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

serif

sans-serif

cursive

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 {  /*Some CSS*/ }
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
left, right, both
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
staticThis 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.
Supporting users have an ad free experience!