Page 1
1. What are different ways to apply styles to a Web page?
__rendered_path__1
There are four ways to apply style to a Web page.
__rendered_path__26
A. Inline CSS: HTML elements may have CSS applied to them via
__rendered_path__29
the STYLE attribute.For Example: If You have <p> element into
__rendered_path__36
webpage, you can apply inline style likeshows in example.<p
__rendered_path__29
style=”font-size: 12px; color: #000000;”>Test </p>
__rendered_path__36
You can always check HTML, CSS and JavaScript code impact using Online
__rendered_path__26__rendered_path__50
HTML Javascript editor.
__rendered_path__1__rendered_path__59
Embedded
CSS
: CSS may be embedded in a Web page by placing
__rendered_path__60
the code in a STYLE element within the HEAD element.For Example: If
__rendered_path__68
You have <h2> element into webpage, you can apply embedded style
__rendered_path__60
like shows in example.
__rendered_path__68
__rendered_path__79
<head>
__rendered_path__26
<style type=”text/css”>
__rendered_path__1
h2 {
__rendered_path__26
font-size: 16px;
__rendered_path__1
color: #2d2d2d;
__rendered_path__26
font-weight: 900;
__rendered_path__1
}
__rendered_path__26
</style>
__rendered_path__1
</head>
__rendered_path__26
Linked
CSS
: CSS can be placed in an external file (a simple text file
__rendered_path__60
containing CSS) and linked via the link element.You can apply
__rendered_path__68
style to webpage using external file as shown in example.
__rendered_path__60
<link rel=”stylesheet” href=”custom/custom.css” type=”text/css”
__rendered_path__68
media=”screen, projection” />
__rendered_path__60
Imported
CSS
: Another way to utilize external CSS files via
__rendered_path__68
@import.<style>
__rendered_path__60
@import url(‘/css/styles.css’);
__rendered_path__68
</style>
__rendered_path__60
Put then your “styles.css” document can contain calls to any number of
__rendered_path__68
additional
__rendered_path__60__rendered_path__68
style sheets:

Page 2
@import url(‘/css/typography.css’);
__rendered_path__1
@import url(‘/css/layout.css’);
__rendered_path__4
@import url(‘/css/color.css’);
__rendered_path__1
2. How do CSS precedence/cascading rules work? How does the
__rendered_path__9
!important directive affect the rules?
__rendered_path__30
CSS style rules “cascade” in the sense that they follow an order of
__rendered_path__9
precedence. Global style rules apply first to HTML elements, and local style
__rendered_path__30
rules override them. For example, a style defined in a style element in a
__rendered_path__9
webpage overrides a style defined in an external style sheet. Similarly, an
__rendered_path__30
inline style that is defined in an HTML element in the page overrides any
__rendered_path__9
styles that are defined for that same element elsewhere.
__rendered_path__52
The !important rule is a way to make your CSS cascade but also have the
__rendered_path__30
rules you feel are most crucial always be applied. A rule that has the
__rendered_path__9
!important property will always be applied no matter where that rule appears
__rendered_path__30
in the CSS document. So if you wanted to make sure that a property always
__rendered_path__9
applied, you would add the !important property to the tag. So, to make the
__rendered_path__30
paragraph text always red, in the above example, you would write:
__rendered_path__52
p { color: #ff0000 !important; }
__rendered_path__64
p { color: #000000; }
__rendered_path__77
__rendered_path__64
3. What is a class? What is an ID?
__rendered_path__89
A class is a style (i.e., a group of CSS attributes) that can be applied to one
__rendered_path__9
or more HTML elements. This means it can apply to instances of the same
__rendered_path__30
element or instances of different elements to which the same style can be
__rendered_path__9
attached. Classes are defined in CSS using a period followed by the class
__rendered_path__30
name. It is applied to an HTML element via the class attribute and the class
__rendered_path__9
name.
__rendered_path__30
The following snippet shows a class defined, and then it being applied to an
__rendered_path__9
HTML DIV element.
__rendered_path__52
.test {font-family: Helvetica; font-size: 20; background: black;}
__rendered_path__52__rendered_path__9
<div class =”test”><p>test</p></div>

Page 3
Also, you could define a style for all elements with a defined class. This is
__rendered_path__1
demonstrated with the following code that selects all P elements with the
__rendered_path__3
column class specified.
__rendered_path__5
p.column {font-color: black;}
__rendered_path__5
An ID selector is a name assigned to a specific style. In turn, it can be
__rendered_path__1
associated with one HTML element with the assigned ID. Within CSS, ID
__rendered_path__3
selectors are defined with the # character followed by the selector name.
__rendered_path__1
The following snippet shows the CSS example1 defined followed by the use
__rendered_path__3
of an HTML element’s ID attribute, which pairs it with the CSS selector.
__rendered_path__5
#example1: {background: blue;}
__rendered_path__5
<div id=”example1″></div>
__rendered_path__5
4. What is the difference between an ID selector and CLASS?
__rendered_path__31
An ID selector identifies and sets style to only one occurrence of an element,
__rendered_path__3
while CLASS can be attached to any number of elements.
__rendered_path__5
5. What is Contextual Selector?
__rendered_path__31
Contextual selector addresses specific occurrence of an element. It is a string
__rendered_path__1
of individual selectors separated by white space (search pattern), where only
__rendered_path__3
the last element in the pattern is addressed providing it matches the
__rendered_path__1
specified contex
__rendered_path__5
6. What is Grouping?
__rendered_path__47
When more than one selector shares the same declaration, they may be
__rendered_path__1
grouped together via a comma-separated list; this allows you to reduce the
__rendered_path__3
size of the CSS (every bit and byte is important) and makes it more
__rendered_path__1
readable. The following snippet applies the same background to the first
__rendered_path__3
three heading elements.
__rendered_path__5__rendered_path__3
h1, h2, h3 {background: red;}

Page 4
7. What are Child Selectors?
__rendered_path__1
A child selector is used when you want to match an element that is the child
__rendered_path__4
of another specific element. The parent and child selectors are separated by
__rendered_path__7
spaces. The following selector locates an unordered list element within a
__rendered_path__4
paragraph element and makes a text within that element bold.
__rendered_path__10
p > ul {font-weight: bold;}
__rendered_path__10
8. What are Pseudo Classes?
__rendered_path__1
Pseudo classes allow you to identify HTML elements on characteristics (as
__rendered_path__7
opposed to their name or attributes). The classes are specified using a colon
__rendered_path__4
to separate the element name and pseudo class. A good example is the :link
__rendered_path__7
and :visited pseudo classes for the HTML A element. Another good example
__rendered_path__4
is first-child, which finds an element’s first child element.
__rendered_path__10
The following CSS makes all visited links red and green, the actual link text
__rendered_path__7
becomes yellow when the mouse pointer is positioned over it, and the text of
__rendered_path__4
the first element of a paragraph is bold.
__rendered_path__10
a:link {font-color: red;}
__rendered_path__7
a:visited {font-color: green;}
__rendered_path__4
a:hover {font-color: yellow;}
__rendered_path__10
p.first-child {font-weight: bold;}
__rendered_path__4
9. What are some ways you might css_viva questions IE (or IE6) only, without
__rendered_path__7
affecting other browsers?
__rendered_path__4
Below are the example for browser specific Style Sheet, which css_viva questionss
__rendered_path__7
defined browser.
__rendered_path__10
css_viva questions ALL VERSIONS of IE
__rendered_path__4
<!--[if IE]>
__rendered_path__91
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
__rendered_path__98
<![endif]-->
__rendered_path__91
css_viva questions everything EXCEPT IE
__rendered_path__4
<!--[if !IE]><!-->
__rendered_path__91__rendered_path__98
<link rel="stylesheet" type="text/css" href="not-ie.css" />

Page 5
<!--<![endif]-->
__rendered_path__1
css_viva questions IE 6 ONLY
__rendered_path__9
<!--[if IE 6]>
__rendered_path__1
<link rel="stylesheet" type="text/css" href="ie6.css" />
__rendered_path__20
<![endif]-->
__rendered_path__1
10. What’s the difference between an inline element and a block
__rendered_path__9
element?
__rendered_path__58
A block-level element is an element that creates large blocks of content like
__rendered_path__9
paragraphs or page divisions. They start new lines of text when you use
__rendered_path__58
them, and can contain other blocks as well as inline elements and text or
__rendered_path__9
data.
__rendered_path__72
An inline element is an element that define text or data in the document
__rendered_path__58
like STRONG makes the enclosed text strongly emphasized and Q says the
__rendered_path__9
enclosed text is a quotation. They don’t start new lines when you use them,
__rendered_path__58
and they generally only contain other inline tags and text or data. Or they
__rendered_path__9
include nothing at all, like the BR tag.
__rendered_path__72
Some properties that inline elements ignore include:
__rendered_path__9
width and height
__rendered_path__96
max
-
width and max
-
height
__rendered_path__101
min
-
width and min
-
height
__rendered_path__96
The CSS property display lets you change an inline property to block or a
__rendered_path__9
block to inline or either of them to not display at all.
__rendered_path__72
display: block;
__rendered_path__1
display:inline;
__rendered_path__20
display:none;
__rendered_path__1
WHEN TO CHANGE THE DISPLAY PROPERTY
__rendered_path__134
Horizontal list menus
-
Lists are block
-
level elements, but
if you
__rendered_path__96
want your menu to display horizontally, you need to convert the list to
__rendered_path__101
an inline element, so that newlines aren’t added between each list item.
__rendered_path__96
Headers in the text
-
Sometimes you might want a header to remain
__rendered_path__101
in the text, but have the HTML header values. Changing the h1-h6
__rendered_path__96
values to inline will let the following text flow next to it.
__rendered_path__101
Removing the element
-
And of course, if you want to remove the
__rendered_path__96
element completely from the document flow, you can set the display to
__rendered_path__101__rendered_path__96
none.

Page 6
11. Explain how the CSS box model works. Draw a box and then
__rendered_path__1
explain what the border is, what the margin is, what the padding is,
__rendered_path__28
etc.? If you assign a width: or height: to something, what specifically
__rendered_path__1
does that refer to?
__rendered_path__28
All HTML elements can be considered as boxes. In CSS, the term “box
__rendered_path__1
model” is used when talking about design and layout.
__rendered_path__89
The CSS box model is essentially a box that wraps around HTML elements,
__rendered_path__28
and it consists of: margins, borders, padding, and the actual content.
__rendered_path__89
The box model allows us to place a border around elements and space
__rendered_path__1
elements in relation to other elements.
__rendered_path__89Image_47_0
__rendered_path__99
Explanation of the different parts:
__rendered_path__28
Margin
-
Clears an area around the border. The margin does not have
__rendered_path__105
a background color, it is completely transparent
__rendered_path__113
Border
-
A border that goes around the padding and content. The
__rendered_path__105
border is affected by the background color of the box
__rendered_path__113
Paddin
g
-
Clears an area around the content. The padding is affected
__rendered_path__105
by the background color of the box
__rendered_path__113
Content
-
The content of the box, where text and images appear
__rendered_path__105
Here is the snippet to draw box model to your web page.
__rendered_path__89
<head>
__rendered_path__1__rendered_path__28
<style>

Page 7
div.test
__rendered_path__1
{
__rendered_path__4
width:220px;
__rendered_path__1
padding:10px;
__rendered_path__4
border:5px solid gray;
__rendered_path__1
margin:0px;
__rendered_path__4
}
__rendered_path__1
</style>
__rendered_path__4
</head>
__rendered_path__19
<body>
__rendered_path__19
<div class=”test”>The picture above is 250px wide. The total width of this
__rendered_path__1
element is also 250px.</div>
__rendered_path__19
</body>
__rendered_path__19
12. Explain vertical margin collapsing.
__rendered_path__4
Top and bottom margins of blocks are sometimes combined (collapsed) into
__rendered_path__1
a single margin whose size is the largest of the margins combined into it, a
__rendered_path__4
behavior known as margin collapsing.
__rendered_path__1
Margin collapsing occurs in three basic cases:
__rendered_path__4
Adjacent siblings
__rendered_path__62
The margins of adjacent siblings are collapsed (except when the
__rendered_path__65
later sibling needs to be cleared past floats).
__rendered_path__68__rendered_path__76
Parent and first/last child
__rendered_path__68
If there is no border, padding, inline content, or clearance to
__rendered_path__85
separate the margin-top of a block with the margin-top of its first child
__rendered_path__65
block, or no border, padding, inline content, height, min-height, or
__rendered_path__85
max-height to separate the margin-bottom of a block with the margin-
__rendered_path__65
bottom of its last child, then those margins collapse. The collapsed
__rendered_path__85
margin ends up outside the parent.
__rendered_path__65__rendered_path__136
Empty blocks

Page 8
If there is no border, padding, inline content, height, or min-height
__rendered_path__1
to separate a block’s margin-top from its margin-bottom, then its
__rendered_path__5
top and bottom margins collapse.
__rendered_path__17
vertical margins collapse between certain boxes.
__rendered_path__17
To understand how vertical margins collapse lets start with a basic
__rendered_path__1
html and CSS example.
__rendered_path__17
Adjacent Elements With Positive Margin
__rendered_path__26
Vertical adjoining margins collapses. If two elements has positive
__rendered_path__1
vertically adjoining margin than only the maximum of both will take
__rendered_path__5
effect.
__rendered_path__17
CSS CODE
__rendered_path__34
__rendered_path__1__rendered_path__39
#parent{ background-color:yellow; width:300px; }
__rendered_path__81
1
__rendered_path__83
2 #red {background-color:red; height:50px; margin-bottom:30px;}
3 #blue {background-color:blue; height:50px; margin-top:20px;}
__rendered_path__82
BROWSER RESULT
__rendered_path__84
__rendered_path__85
Margins of floating and absolutely positioned elements never
__rendered_path__34Image_58_0
collapse.
__rendered_path__88
There are other situations where elements do not have their
__rendered_path__1__rendered_path__103
margins collapsed:
__rendered_path__104__rendered_path__5__rendered_path__1__rendered_path__5__rendered_path__110
inline
-
block elements

Page 9
elements with
overflow
set to anything other than
visible
(They
__rendered_path__1
do not collapse margins with their children.)
__rendered_path__13
cl
eared elements (They do not collapse their top margins with
__rendered_path__1
their parent block’s bottom margin.)
__rendered_path__13
the root element
__rendered_path__1
13. How do you float an element, and what does that mean? What’s
__rendered_path__26
Clearing?
__rendered_path__53
With CSS float, an element can be pushed to the left or right, allowing other
__rendered_path__26
elements to wrap around it.
__rendered_path__58
Float is very often used for images, but it is also useful when working with
__rendered_path__53
layouts.
__rendered_path__58
Elements are floated horizontally, this means that an element can only be
__rendered_path__26
floated left or right, not up or down.
__rendered_path__58
A floated element will move as far to the left or right as it can. Usually this
__rendered_path__53
means all the way to the left or right of the containing element.
__rendered_path__58
Below is the example, which shows using css float property you can set
__rendered_path__26
image to the right of your web page.
__rendered_path__58
<head>
__rendered_path__53
<style>
__rendered_path__26
img
__rendered_path__53
{
__rendered_path__26
float:right;
__rendered_path__53
}
__rendered_path__26
</style>
__rendered_path__53
</head>
__rendered_path__58
<body>
__rendered_path__58
<p>
__rendered_path__58__rendered_path__26
<img src=”logocss.gif” width=”95″ height=”84″ />

Page 10
This is some text. This is some text. This is some text.
__rendered_path__1
This is some text. This is some text. This is some text.
__rendered_path__26
This is some text. This is some text. This is some text.
__rendered_path__1
This is some text. This is some text. This is some text.
__rendered_path__26
This is some text. This is some text. This is some text.
__rendered_path__1
This is some text. This is some text. This is some text.
__rendered_path__26
This is some text. This is some text. This is some text.
__rendered_path__1
This is some text. This is some text. This is some text.
__rendered_path__26
This is some text. This is some text. This is some text.
__rendered_path__1
This is some text. This is some text. This is some text.
__rendered_path__26
</p>
__rendered_path__1
</body>
__rendered_path__26
14. What’s the difference between position: relative, position: fixed &
__rendered_path__1
position: absolute?
__rendered_path__26
Here, I’ve listed basic difference between css positioning properties.
__rendered_path__272
Position-Relative. This type of positioning is probably the most confusing
__rendered_path__1
and misused. What it really means is “relative to itself”. If you set position:
__rendered_path__26
relative;on an element but no other positioning attributes (top, left, bottom
__rendered_path__1
or right), it will no effect on it’s positioning at all, it will be exactly as it would
__rendered_path__26
be if you left it as position: static; But if you DO give it some other
__rendered_path__1
positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN
__rendered_path__26
from where it would NORMALLY be.
__rendered_path__1
Position-Absolute. This is a very powerful type of positioning that allows
__rendered_path__26
you to literally place any page element exactly where you want it. You use
__rendered_path__1
the positioning attributes top, left bottom and right to set the location.
__rendered_path__26
Remember that these values will be relative to the next parent element. If
__rendered_path__1
there is no such parent, it will default all the way back up to the <html>
__rendered_path__26
element itself meaning it will be placed relatively to the page itself.
__rendered_path__1
Position-Fixed. This type of positioning is fairly rare but certainly has its
__rendered_path__26
uses. A fixed position element is positioned relative to the viewport, or the
__rendered_path__1
browser window itself. The viewport doesn’t change when the window is
__rendered_path__26
scrolled, so a fixed positioned element will stay right where it is when the
__rendered_path__1
page is scrolled.
__rendered_path__26
15. What does z-index do?
__rendered_path__1__rendered_path__26
The z-index property specifies the stack order of an element.

Page 11
An element with greater stack order is always in front of an element with a
__rendered_path__1
lower stack order.
__rendered_path__3
Here is the Example, where using z-index property you can display in front of
__rendered_path__6
image.
__rendered_path__3
<head>
__rendered_path__1
<style>
__rendered_path__6
img
__rendered_path__1
{
__rendered_path__6
position:absolute;
__rendered_path__1
left:0px;
__rendered_path__6
top:0px;
__rendered_path__1
z-index:-1;
__rendered_path__6
}
__rendered_path__1
</style>
__rendered_path__6
</head>
__rendered_path__3
<body>
__rendered_path__1
<h1>This is a heading</h1>
__rendered_path__6
<img src=”w3css.gif” width=”100″ height=”140″ />
__rendered_path__1
<p>Because the image has a z-index of -1, it will be placed behind the
__rendered_path__6
text.</p>
__rendered_path__1
</body>
__rendered_path__6