Study your flashcards anywhere!

Download the official Cram app for free >

  • Shuffle
    Toggle On
    Toggle Off
  • Alphabetize
    Toggle On
    Toggle Off
  • Front First
    Toggle On
    Toggle Off
  • Both Sides
    Toggle On
    Toggle Off
  • Read
    Toggle On
    Toggle Off
Reading...
Front

How to study your flashcards.

Right/Left arrow keys: Navigate between flashcards.right arrow keyleft arrow key

Up/Down arrow keys: Flip the card between the front and back.down keyup key

H key: Show hint (3rd side).h key

A key: Read text to speech.a key

image

Play button

image

Play button

image

Progress

1/32

Click to flip

32 Cards in this Set

  • Front
  • Back
  • 3rd side (hint)
Which color text would <p> tags in this web page have if the code specified:

p { color: blue; }
p { color: yellow; }
yellow
Which of these has a higher specificity?

a) p
b) #grue
c) ul li
d) ul ol li.red
b
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Which of these has a higher specificity?

a) a.new:link
b) div p
c) li.red.level
d) H3#a1.red
d
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Elements are ____ or ___ tags.
HTML or XML
p, h1 and div are all elements.
The __ attribute has the highest specificity.
id
#
What color text would the <p> tag have if the code was written like this:

div p { color: red; }
p { color: blue; }
red
Which of these has a higher specificity?

a) body #content .alternative p
b) #grue
c) div p.tree
d) div p.tree ul li.red
a
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
What symbol is used to identify a class selctor?
.whatevernamehere (a period is used, followed by the class name)
Which is an example of a pseudo-class element?

a) div.green
b) a:visited
c) #lantern
d) body p.nav
b
Calculate the specificity of these elements:

div #maincontent.a:link
1,2,2
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Calculate the specificity of these elements:

div p.foo
0,1,2
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Calculate the specificity of these elements:

blockquote #a2
1,0,1
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Calculate the specificity of these elements:

a.new:link
0,2,1
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Calculate the specificity of these elements:

h3.bottom + p.top
0,2,2
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Calculate the specificity of these elements:

ul ol li.red
0,1,3
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
What color will the text be in this code?

.spec {color: purple;}
h1 {color: red;}
<h1 class="spec">Demo</h1>
purple
What declaration can be used to take precedence over a normal declaration?
!important
Calculate the specificity of these elements:

li.red.level
0,2,1
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
Parent tags, <div> for example, can have children tags, such as a <p> tag inside the <div>. These children tags _______ properties from their parent tags.
inherit
Using this code: <div style="font-size:18pt"> would insure that the <p> tag contained within it also had 18 point text.
What are the four elements whose properties are not inherited by child tags?
margins, border, padding, and background
Which syntax is better to set the parent and child <div> tag properties with?

a) assign id or class once. Then use CSS to access and style the generic child elements within.ie:
#stuff {}
#stuff div {}

b) assign class or id tags to set specific styles to different elements. ie:
div.stuff {}
div.insidestuff {}
a
Both of these methods work, but using one of them extensively can cause a lot of clutter, and possibly subtle CSS errors when the code becomes long and complicated.
User style sheets are a feature that allows individuals to define their own style sheets to be used on pages. Some users might need larger fonts or colors with more contrast than what the browser or page author has chosen, for example.

Author style sheets refer to the styles defined or included within a page.

For resolving conflicts, which styles take precedence?
author style sheets
What color would the <p> element in this code have?

<STYLE type="text/css">
#x97z { color: red }
</STYLE>

<P ID=x97z style="color: green">
green
How wide would this div be if it we had this style:

div {width:150px}

and this code:

<div style="width:200px;">
200 pixels
Calculate the specificity of these elements:

body #content .alternative p
1,1,2
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
What colour will Link 2 have using the following styles?

ul#greenlink a {color: green;}
a.bluelink {color: blue;}

with this code:

<ul id="greenlink">
<li><a href="b1.html">Link 1</a></li>
<li><a class="bluelink" href="b2.html">Link 2</a></li>
</ul>
green
What is the suggested order for using the 4 hyperlink pseudo-classes?
A:link
A:visited
A:hover
A:active
The four hyperlink pseudo-classes are a:link, a:active, a:visited, and a:hover.
If you have the hyperlink pseudo-classes listed in this order, what color will a visited, active link be?

a:link {color: blue;}
a:active {color: red;}
a:hover {color: magenta;}
a:visited {color: purple;}
purple
Remember that all these pseudo-classes have the same specificity.
If you have the hyperlink pseudo-classes listed in this order, what color will a visited, hovered link be?

a:visited:hover {color: maroon;}
a:link:hover {color: magenta;}
a:active:hover {color: cyan;}
maroon
Each pseudo-element here has the same specificity, but they are fundamentally different from each other.
Calculate the specificity of these elements:

div#nav li a
1,0,3
1) count the number of ID attributes in the selector (= a)
2) count the number of other attributes and pseudo-classes in the selector (= b)
3) count the number of element names in the selector (= c)
4) ignore pseudo-elements.

Combine the numbers in a,b,c format with 'a' being higher in importance than 'b', 'b' being higher than 'c'.
If you had a linked (external) style sheet with the style:

h1 {color : blue; }

and an embedded style of:

h1 {color : green; }

what color would all of your h1 elements be?
green
Imported styles are calculated before any other styles and should appear _______ any linked or embedded styles in the code.
above