Online Test CSS 3

Online Test CSS 3


  1. body{ 
     background: red url("test.gif"); 
     background-repeat: repeat-y; 
     background-attachment: fixed;
    }
    
  2. body{ 
     background: red url("test.gif");
     background-repeat: repeat-x;
     background-attachment: fixed;
    }
    
  3. body{ 
     background: red url("test.gif"); 
     background-repeat: no-repeat; 
     background-attachment: fixed;
    }
    
  4. body{ 
     background: red url("test.gif");
     background-repeat: repeat;
     background-attachment: fixed;
    }
    
  5. body{ 
     background-image: url("test.gif");
     background-repeat: space;
    }
    
Answer: Answer is d, e

  1. finish strokes, flared or tapering ends, or actual serifed endings.
  2. stroke endings that are plain without any flaring, cross stroke, or other ornamentation.
  3. either join strokes or other cursive characteristics beyond those of italic typefaces.
  4. primarily decorate the characters while still containing their representations.
Answer: Answer is b
Further Reading:
Useful resources, sans-serif

  1. Value
  2. Choices
  3. Default
  4. repeat-item
  5. repeat-index
Answer: Answer is c
Further Reading:
Useful resources, Features at risk

  1. The default cursor will be displayed.
  2. No cursor will be displayed.
  3. A pointer cursor will be displayed.
  4. A text cursor will be displayed.
Answer: Answer is b
Further Reading:
Useful resources, ‘cursor’ property

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}
What will this code do?
  1. It will put all tables on a right-hand side landscape page.
  2. It will rotate the page if the table is positioned at the right side.
  3. It will keep the table in the landscape position and rotate the page.
  4. None of the above
Answer: Answer is a
Further Reading:
Useful resources, Using named pages: 'page'

  1. Condensed
  2. Normal
  3. semi-narrower
  4. expanded
  5. semi-expanded
Answer: Answer is c
Further Reading:
Useful resources, font-stretch property

  1. Clean separation of design and content
  2. Minimal code duplication
  3. Highest priority
  4. Reduced page download time
Answer: Answer is c

<style>
.name::after 
{ 
 content: leader(solid) 
}
</style>

<div class="entry">
 <span class="name"> Shane Mathew</span>
 <span class="number"> 9843423232</span>
</div>
What will be the output if the name and the number end up on different lines?
  1. Shane Mathew....
    ...9843423232
  2. Shane Mathew____
    ___9843423232
  3. Shane Mathew   
     9843423232
  4. Shane Mathew---
    ---9843423232
Answer: Answer is b
Further Reading:
Useful resources, leaders (example 16)

  1. Explicit grid
  2. Natural grid
  3. Default grid
  4. None of the above
Answer: Answer is a
Further Reading:
Useful resources, grid declarations

  1. Yes
  2. No
Answer: Answer is b
Further Reading:
Useful resources, ruby-align property


<style type="text/css">

div.container{
width:38em; 
 border:1em solid black; 
}    

div.split{
box-sizing:border-box; 
width:50%;
border:1em silver ridge; 
float:left; 
}

</style>
HTML code:
<div class="container"> 
<div class="split">Box 1.</div>
<div class="split">Box 2.</div> 
</div>
  1. Two boxes will be stacked one on another.
  2. Box 1 will be on the left hand side and Box 2 will be on the right hand side horizontally.
  3. Box 2 will be on the left hand side and Box 1 will be on the right hand side horizontally.
  4. Both boxes will overlap each other.
Answer: Answer is a
Further Reading:
Both box has exact 50% width and 1em border. Border will be added with height and width. So each box will be stacked instead of standing horizontally.

em { 
color: rgba(0,0,255,1) 
}
  1. Opacity 1 with solid red color
  2. Opacity 0 with solid blue color
  3. Opacity 0 with solid red color
  4. Opacity 1 with solid blue color
  5. None of the above
Answer: Answer is d
Further Reading:
Useful resources, rgba-color

body 
{ 
text-replace: "a" "b" "b" "c";
}
What will be the output of the following string if you implement the text-replace style?
andy lives behind café
  1. bndy lives behind cbfe
  2. cndy lives cehind ccfe
  3. andy lives behind café
  4. andy lives cehind bafe
Answer: Answer is b
Further Reading:
All ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters are converted to ‘c’. Useful resources, text-replace

  1. Small
  2. Medium
  3. Large
  4. Default
Answer: Answer is b
Further Reading:
Useful resources, font-size property

  1. 0 to 256
  2. 0 to 255
  3. -250 to 250
  4. -255 to 255
Answer: Answer is b
Further Reading:
Useful resources, rgb-color

  1. textbox1, textbox2 ,textbox3
  2. textbox2, textbox3 ,textbox1
  3. textbox3, textbox2 ,textbox1
  4. textbox1, textbox3 ,textbox2
Answer: Answer is b
Further Reading:
Useful resources, nav-index property

ruby-text (in XHTML: rt)
  1. It specifies that an element defines a ruby base.
  2. It specifies that an element contains one or more ruby bases.
  3. It specifies that an element defines a ruby text.
  4. It specifies that an element contains one or more ruby texts.
  5. It specifies that an element defines a ruby structure.
Answer: Answer is c
Further Reading:
Useful resources, css ruby model

  1. 0
  2. 1
  3. Normal
  4. None
Answer: Answer is b
Further Reading:
Useful resources, opacity property

  1. Button
  2. Span
  3. table row
Answer: Answer is c
Further Reading:
Minimum width can’t be applied to non-replaced inline elements, table rows, and row groups. Useful resources, min-width

  1. img { image-resolution: auto }
  2. img { image-resolution: auto, 300dpi }
  3. img { image-resolution: 300dpi }
  4. None of the above
Answer: Answer is c
Further Reading:
Useful resources, image-resolution



John leads his team to the         victory, but fails to reach the   finals.
  1. Johnleadshisteamtothevictory,butfailstoreachthefinals.
  2. John leads his team to the victory, but fails to reach the finals.
  3. John leads his team to the         victory, but fails to reach the   finals.
  4. John leads his team to thevictory, but fails to reach thefinals.
Answer: Answer is b
Further Reading:
Useful resources, white-spacewhite-space-collapse

  1. #fb0fb0
  2. #ffbb00
  3. #fbfb00
  4. None of the above
Answer: Answer is b
Further Reading:
Useful resources, CSS Color Module

  1. Auto
  2. Never
  3. Always
  4. Normal
  5. length
Answer: Answer is d
Further Reading:
Useful resources, font-smooth property

  1. 50% 50%
  2. 0% 0%
  3. 100% 100%
  4. none
Answer: Answer is d
Further Reading:
Useful resources, transform property

  1. normal
  2. pre
  3. nowrap
  4. pre-wrap
  5. pre-line
Answer: Answer is b
Further Reading:
Useful resources, white-space

  1. img { float= left }
  2. img { float: left here }
  3. img { background: "black" }
  4. img { border-width: 10 }
  5. All of the above
Answer: Answer is e
Further Reading:
In a, ‘=’ sign is invalid. In b, ‘here’ word is invalid. Similarly, in c, use or ‘quotation’ for black is invalid and for option d, there is ‘no mention of unit’ for border-width.

  1. img {  float: next-page;  }
  2. img { float: top-corner next-page; }
  3. img { float: next-page top; }
  4. b and c
Answer: Answer i
Further Reading:
Useful resources, float-modifiers

  1. Yes
  2. No
Answer: Answer is a
Further Reading:

  1. page-break-inside
  2. page-break-outside
  3. page-break-before
  4. page-break-after
  5. None of the above
Answer: Answer is b
Further Reading:
Useful resources, page-breaksPage Break Aliases

  1. 0
  2. 10
  3. 100
  4. 500
  5. None of the above
Answer: Answer i
Further Reading:
Useful resources, voice-volume


  1. border: "none";
  2. border= "none";
  3. border: none;
  4. border= none;
  5. None of the above
Answer: Answer is c
Further Reading:
Useful resources, border-properties

  1. Window
  2. Tab
  3. None
  4. Parent
  5. current
Answer: Answer is d, e
Further Reading:
Useful resources, target-new property

body
{
   background-image: url("test.png");
   background-attachment: fixed;
   background-position: 100% 100%;
   background-repeat: no-repeat;
} 
  1. The image will be shown in the background at the bottom left corner.
  2. The image will be shown in the background at the bottom right corner.
  3. The image will be shown in the background at the top left corner.
  4. The image will be shown in the background at the top right corner.
  5. The image will be shown in the center of the page.
Answer: Answer is b
Further Reading:
Useful resources, background

  1. em { color: rgb(300,0,0) }
  2. em { color: rgb(255,-10,0) }
  3. em { color: rgb(110%, 0%, 0%) }
  4. em { color: rgb(100%, 0%, 0%) }
  5. All of the above
Answer: Answer is e
Further Reading:
Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device.
em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Useful resources, rgb

  1. The element will be shown with 3D effect but the children will be rendered flattened into the 2D plane.
  2. The element will be shown with 2D effect but the children will be rendered into the 3D plane.
  3. Both the element and its children elements will be rendered in 3D effect.
  4. Both the element and its children elements will be rendered in 2D effect.
Answer: Answer is a
Further Reading:

  1. Auto
  2. Balance
  3. none
Answer: Answer is b
Further Reading:
Useful resources, column-fill

DIV { line-height: 1.2; font-size: 10pt }
  1. DIV { line-height: 1.2em; font-size: 10pt }
  2. DIV { line-height: 12em; font-size: 10pt }
  3. DIV { line-height: 120%; font-size: 10pt }
  4. DIV { line-height: 20%; font-size: 10pt }
  5. DIV { line-height: 80%; font-size: 10pt }
Answer: Answer is a, c

@media print {
.footnote {
float: footnote;
content: target-move(attr(href, url))
}
.marker {
display: none
}
}
HTML code:
<p>John was a great writer<a class="footnote" href="#words"> [More]</a>. ... <p id=words><span class="marker">[More]</span> Great poet too.

  1. The tool tip will appear saying Great poet too.
  2. A pop up will appear saying Great poet too.
  3. The page will shift focus to the line Great poet too.
  4. Nothing will happen.
Answer: Answer is d
Further Reading:
Useful resources, footnotes

  1. Outline
  2. Border
  3. Both a and b
Answer: Answer is a
Further Reading:
Useful resources, border-propertiesoutline property

  1. Orphans
  2. Widows
  3. Bottom
  4. Overflow
  5. None of the above
Answer: Answer is a
Further Reading:
Useful resources, orphans


  1. Slow
  2. Normal
  3. Fast
  4. none
Answer: Answer is b
Further Reading:
Useful resources, marquee-speed

:focus,:active { outline-offset: 10px }
  1. The focus outline will appear at a distance of 10 pixels from the active element.
  2. The width of the focus outline will be 10 pixels.
  3. No outline will be shown.
Answer: Answer is a
Further Reading:
Useful resources, outline-offset

  1. None
  2. Manual
  3. Auto
  4. default
Answer: Answer is b
Further Reading:
Useful resources, hyphens property

font-weight:normal
What is the other way of getting the same result?
  1. font-weight:100
  2. font-weight:900
  3. font-weight:400
  4. font-weight:700
Answer: Answer is c
Further Reading:
Useful resources, font-weight

p { margin: 3em 2em }
  1. The top and the bottom margins will be 3em and the left and the right margins will be 2em.
  2. The top and the bottom margins will be 2em and the left and the right margins will be 3em.
  3. The top and the left margins will be 3em and the bottom and the right margins will be 2em.
  4. The top and the right margins will be 2em and the bottom and the left margins will be 3em.
Answer: Answer is a
Further Reading:
Useful resources, margins

h2 { pause: 40s 60s }
  1. pause-before will be set to 40 seconds and pause-after will be set to 60 seconds.
  2. pause-after will be set to 40 seconds and pause-before will be set to 60 seconds.
  3. pause-after and pause-before will be set to 40 seconds.
  4. pause-after and pause-before will be set to 60 seconds.
Answer: Answer is a
Further Reading:
Useful resources, pause-props

  1. twenty two
  2. two two
  3. twenty and two
  4. four
Answer: Answer is b
Further Reading:
Useful resources, speaking-props

The RGB color model is hardware-specific while the HSL is symmetrical to lightness and darkness.
  1. True
  2. False
Answer: Answer is a
Further Reading:
Useful resources, hsl-color

  1. div { content: '1' } div::before { content: '2'; } div::before::before { content: '3'; }
  2. div { content: '3' } div::before { content: '2'; } div::before::before { content: '1'; }
  3. div { content: '1' } div::before { content: '2'; } div::before(2) { content: '3'; }
  4. div { content: '3' } div::before { content: '2'; } div::before(2) { content: '1'; }
Answer: Answer is a
Further Reading:
Useful resources, nesting

  1. continuous or paged
  2. visual or tactile
  3. grid or bitmap
  4. braille or screen
Answer: Answer is d
Further Reading:
Useful resources, media groups



div { grid-rows: 4em (0.25em 1em); }
  1. It creates rows with 4em height.
  2. It creates a header row with 4em height and alternative rows with 0.25em width and 1em heights.
  3. It creates a header row with 4em height and alternative rows with 0.25em and 1em heights.
  4. It creates a header row with 4em width and alternative rows with 0.25em width and 1em heights.
Answer: Answer is c
Further Reading:
Useful resources, grid- rows examples IV

  1. None
  2. Left
  3. Right
  4. Top
Answer: Answer is d
Further Reading:
Useful resources, clear property

  1. 0
  2. 1
  3. 5
  4. None
Answer: Answer is b
Further Reading:

@import "style.css";

@media print {
@import "print-main.css"; 
BODY { font-size: 10pt }
}

h1 {
color: red
}
  1. Two style sheets can't be included with @import.
  2. The body tag can't be included inside @media.
  3. @import rule is invalid since it occurs inside a @media block.
  4. It is valid.
Answer: Answer is c
Further Reading:
Useful resources, at-rules

  1. Length
  2. Number
  3. Percentage
  4. integer
Answer: Answer is a
Further Reading:
Useful resources, letter-spacing

  1. Start
  2. End
  3. Left
  4. Right
  5. Center
  6. justify
Answer: Answer is a
Further Reading:
Useful resources, text-align property

If a parent element display property is set to none, its children too will not be rendered.
  1. True
  2. False
Answer: Answer is a

  1. font-size
  2. font-variant
  3. font-weight
  4. line-height
Answer: Answer is a, d
Further Reading:
Useful Resources: font properties,line-height

Online Test CSS 2

  1. Orphans
  2. Widows
  3. Bottom
  4. Overflow
  5. None of the above
Answer: Answer is a
Further Reading:
Useful resources, orphans

a:link {color: green}
a:visited {color: blue}
a:hover {color: red}
a:active {color: black}
What will be the color, when the mouse goes over a link?
  1. Green
  2. Blue
  3. Red
  4. Black
Answer: Answer is c

  1. snap
  2. clip
  3. scroll
  4. visible
Answer: Answer is b
Further Reading:
Useful resources, clip

  1. vertical-align: super
  2. vertical-align: superscript
  3. vertical-align: top
Answer: Answer is a
Further Reading:
Useful resources, superscript

Which of the following is the best style definition if you are targeting all the paragraphs?
  1. par {letter-spacing: 3px; word-spacing: -5px}
  2. par{letter-spacing: -0.8px; word-spacing: 25px}
  3. p {l-spacing: 3px; w-spacing: -5px}
  4. p {letter-spacing: -0.8px; word-spacing: 25px}
Answer: Answer is d
Further Reading:
Useful resources, letter-spacing

.redborder {
border-color:#ff0000;
border-width:thin thick
}
What type of border will be displayed if one of the paragraphs defined in the webpage uses this style?

  1. This will display a red border with thin top and bottom
  2. This will display a red border with thick top and bottom
  3. This will display a red border with thick left and right
  4. This will not display any border
Answer: Answer is d
Further Reading:
This will not display any border, because border style is not specified.

  1. font-weight
  2. font-variant
  3. font-size-adjust
  4. font-size
Answer: Answer is c
Further Reading:
Useful resources, font-size-adjust-prop

  1. Image will have zero width and height so it will be hidden.
  2. Image will be positioned at the upper left corner.
  3. Image will be positioned at the lower right corner
  4. None of the above
Answer: Answer is b
Further Reading:
Useful resources, background-position

td#aln {
text-align: center;
color: blue
}
How will you refer to this style in your web page?
  1. By using the class attribute on a td cell
  2. By using the id attribute on a td cell
  3. By using the class attribute on any HTML element which supports the class attribute
  4. By using the id attribute on any HTML element which supports the id attribute
Answer: Answer is b

  1. visible
  2. hidden
  3. scroll
  4. auto
Answer: Answer is a, b, c, d
Further Reading:
Useful resources overflow

  1. Yes
  2. No
Answer: Answer is a
Further Reading:
To override a in line style, use !important rule. Useful resources, !important

  1. When using CSS, positioning can be absolute, relative or dynamic
  2. The float property for text/images can be left, right or center
  3. The values for visibility can be true or false
  4. The display property sets how an element is displayed
Answer: Answer is d
Further Reading:
Useful resources, display property

  1. blockquote { text-padding: 2em 4em 5em }
  2. blockquote { padding-x: 2em 4em 5em }
  3. blockquote { padding-y: 2em 4em 5em }
  4. blockquote { padding: 2em 4em 5em }
Answer: Answer is d
Further Reading:
Useful resources, padding-properties

  1. expanded
  2. inline-table
  3. table-row
  4. table-column-group
Answer: Answer is a
Further Reading:
Useful resources, display property

  1. wait
  2. pointer
  3. text
  4. image
Answer: Answer is d
Further Reading:
Useful resources, ‘cursor’ property

#styl2 { color: red; }
How will you refer to this style in your web page?
  1. By using the class attribute in a td cell
  2. By using the class attribute in any HTML element which supports the class attribute
  3. By using the id attribute in any HTML element which supports the 'id' attribute
Answer: Answer is c

  1. When you are creating pages for older versions of Netscape Navigator
  2. When you don't want older browsers like IE4 or Netscape 4 to use the style sheet
  3. When you want to include a css file in another css file
  4. There is no such technique available for applying style sheets
Answer: Answer is b, c
Further Reading:
Useful resources, at-import ruleat-import

  1. list-style-type
  2. list-style-position
  3. list-style-image
  4. list-style-align
Answer: Answer is d
Further Reading:
Useful resources, list-style

h2, h4, h5, h6 { color: cyan; }
Which of the following is correct for the above definition?
  1. Grouping of tags is not allowed in the style definition
  2. The style definition should span a single line
  3. Grouping tags should be separated by semicolons
  4. You can group as many tags as you like
Answer: Answer is d
Further Reading:
Useful resources, grouping

  1. Yes
  2. No
Answer: Answer is a



p strong {color: green; }
  1. All strong text and all paragraph text will be displayed in green color
  2. All paragraphs that are contained within <strong></strong> tags will be displayed in green color
  3. All strong text that is contained in a paragraph will be displayed in green color
  4. Only the paragraph text will be displayed in green color
  5. Only the strong text will be displayed in green color
  6. The style definition is erroneous and will not be applied to any element of the webpage
Answer: Answer is b

  1. scroll
  2. visible
  3. hidden
  4. auto
Answer: Answer is b
Further Reading:
Useful resources, overflow

  1. It uses a hash as the separator symbol
  2. It applies the style to only the first element defined with that style
  3. It applies the style to only the last element defined with that style
  4. It applies the style to all the elements defined with that style
Answer: Answer is d
Further Reading:
Useful resources, class

  1. When font size is set to 46pt, the height of the letter 'x' will be 100pt
  2. When font size is set to 100pt, the height of the letter 'x' will be 46pt
Answer: Answer is b
Further Reading:
Useful resources, aspect-value

  1. @media screen, print {  span.med{font-weight:bold}  }
  2. .media screen, print {  span.med{font-weight:bold}  }
  3. .media screen print {  span.med{font-weight:bold}  }
  4. #media screen, print {  span.med{font-weight:bold}  }
Answer: Answer is a
Further Reading:
Useful resources, at-media-rule

  1. normal, wider, narrower
  2. normal, italic, oblique
  3. normal, bold, lighter
  4. small, medium, large
Answer: Answer is b
Further Reading:
Useful resources, font-style

  1. link
  2. active
  3. lang
  4. ins
Answer: Answer is d
Further Reading:
Useful resources, pseudo-classes

td.right {text-align: right}
td.left {text-align: left}
Which of the following is the right way to use them in an HTML page?
  1. <td class="td.right">Some Text</td>
  2. <td class="right" class="left">Some Text</td>
  3. <td class="td.left" class="td.right">Some Text</td>
  4. <td class="right">Some Text</td>
Answer: Answer is b

BODY {background: url('banner.jpeg') right top}
What is the percentage of the background-position?
  1. 0% 0%
  2. 0% 100%
  3. 100% 0%
  4. 100% 100%
Answer: Answer is c
Further Reading:
Useful resources, background-position

p,i { color:red }
What do you understand about the contextual selector used above?
  1. All the text within a paragraph will be italicized
  2. All the italic text in the page will have red color
  3. All the page text under <p></p> tag and <i></i> tag will be red
  4. All the italic text within a paragraph will be red
Answer: Answer is c




  1. Set negative z-index for the image
  2. Set positive z-index for the image
  3. Set negative x-index for the image
  4. Set positive x-index for the image
Answer: Answer is a
Further Reading:
Useful resources, z-index



Share this article :

Post a Comment

 
Copyright © 2014. Mominul's Diary - All Rights Reserved
Developed by Mominul Islam