IDB-BISEW CSS3 Short Questions

1. Define DOM. The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. 2. What are CSS selectors? A CSS selector is the part of a CSS rule set that actually selects the content that we want to style. The different kinds of selectors are available: a. Universal Selector b. Type selectors c. Class selectors d. ID Selectors e. Descendant Selectors f. Attribute Selectors 3. Define the following selectors with an example: a. Universal Selector: It selects any element, and represented by an asterisk * sign. b. Type selectors: A type selector uses the name of HTML tag without the angle brackets, and redefines the default look of the tag. For this reason, type selectors are sometimes called tag selector. Example: HTML

 - <div class=”className”></div>
CSS -  div{ }

c. Class selectors A class selector applies style rules to elements that have the equivalent class attribute in their opening HTML tag. Example: HTML -

 <div class=”className”></div>

CSS - .className{ } d. ID Selectors An ID selector applies styles to elements that have the equivalent id attribute in their opening HTML tag. It must be unique within page. Example: Define in HTML -

 <div id=”idName”></div>
html
head  body
meta  title  h1  p
dfn  abbr
id
ml
title 
CSS3 Short Questions
Call in CSS -  #idName{ }

e. Descendant Selectors: A descendant selector matches any element that is a descendent of another. Example:

HTML -   <div id=”idName”>
<p>   </p>
</div>
CSS -  #idName p{ }

f. Attribute Selectors An Attribute selector matches any element that has a particular attribute in its opening HTML tag. Example:

 HTML -   <input type=”text” />
CSS -    input[type=”text”]p{ }

4. Define Pseudo-classes and Pseudo-elements. A pseudo-class doesn’t rely on a class attribute in the HTML markup, but is applied automatically by the browser depending on the position of the element or its interactive state. Example: E:link, E<img src="/images/emotions/facebook_emotions/fbpacman.png" title="Pacman" alt="Pacman" />isited, E:active Like a pseudo-class, a pseudo-element is not identified as such by HTML markup. It applies styles to content based on its position in the HTML hierarchy. Example: E:first-letter, E:first-line 5. Write the Units of measurement of the followings: a. Length Units Relative toch The width of the character 0 (zero) in the current fontrem The font size of the root element vw The viewport’s width vh The viewport’s height vmin The viewport’s width or height, whichever is smaller vax The viewport’s width or height, whichever is larger b. Angle Units Relative to deg Degrees grad Gradians (1/400 of a turn)rad Radians turn Turns (360 degrees) c. Time Units Relative to CSS3 Short Questionss Seconds mMs Milliseconds (1/1,000 of a second) 6. Write options for CSS color values. Options for color values:  Color Keywords  Hexadecimal notation  RGB (red, green, blue) format  HSL (hue, saturation, lightness) format (CSS3)  RGBA (red, green, blue with alpha transparency) format (CSS3)  HSLA ( hue, saturation, lightness with alpha transparency) format (CSS3) 7. How can you embed your own font to the web page? In the new @font-face rule we must first define a name for the font (e.g. myFirstFont), and then point to the font file.

@font-face {
font-family: myFirstFont;
src: url('pacifico_regular-webfont.eot');
src: url('pacifico_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('pacifico_regular-webfont.woff2') format('woff2'),
url('pacifico_regular-webfont.woff') format('woff'),
url('pacifico_regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

8. Definition of box-model. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. 9. What is shorthand property in CSS? The shorthand property sets all the related properties in one declaration. Such as, the font shorthand property that can be set, are (in order): font: font-style font-weight font-size/line-height font-family; Example: font: italic bold 12px/30px Georgia, serif; 10. How can you add an image background to the webpage by CSS?

body{ 
CSS3 Short Questions
background-image: url(imageLocation/image_name.extention);
}

11. What is CSS sprite? An image sprite is a collection of images put into a single image. With CSS, we can show just the part of the image we need by use the background positioning option. 12. Write shorthand syntax for CSS box-shadow property. Syntax :

 box-shadow: h-shadow  v-shadow  blur  spread color; 

Example :

 box-shadow: 1px 1px 2px 3px #CC3300;

13. Write shorthand syntax for CSS border property. Syntax : border: width style color; Example :

 border: 1px solid  #CC3300;

14. Write shorthand syntax for CSS border-radius property. Syntax : border-radius: value<img src="/images/emotions/hotmail_emotions/moon.gif" title="Sleeping half-moon" alt="Sleeping half-moon" />; Example 1

border-radius: 5px;
is equivalent to:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; 

Example 2

border-radius: 2px 5px 1px 10px;
is equivalent to:
border-top-left-radius:  2px;
border-top-right-radius:  5px;
border-bottom-right-radius:  1px;
border-bottom-left-radius: 10px; 

15. Write four shorthand syntaxes for box-model. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. CSS3 Short Questions Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

16. How can you transparent element by rgba()? Give an example. Syntax: background-color: rgba (red value, green value, blue value, transparent value (1 to 0)) Example:

HTML -<p id="p2">Green</p>
CSS -   #p2 {
background-color:rgba(0, 255,0,0.3);
}

17. How can you add space around Elements? We can add space around an element using by margin properties. Example:

HTML - <p id="p2">Content</p>
CSS -   #p2 {
Margin: 10px;
}

18. Write down difference between absolute position and relative position. Relative: The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. Absolute : An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. 19. How can you apply CSS float property and why? We apply float property for floating an element left or right position within a page. Syntax:

HTML - <div class=”floated”></div>
CSS - .floated{
float: left;
}

20. What is CSS z-index property? The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Example:

HTML -  <h1>This is a heading</h1> 
CSS3 Short Questions
<img src="image.jpg" />
CSS -  img {
position: absolute;
z-index: -1;
}

In this case the h1 ordered in front. 21. Define cross-browser effect in CSS. For Cross-browser effect the page does not work properly in the same way to all browsers.