Embedded Files
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, css3 interview questions and answers is combined with the markup languages HTML or XHTML.
Which Style will Apply?
<style>
#divclass { color: red; }
.cssclass { color: blue; }
</style>
<body><div id=”divclass” class=”cssclass”>This is a Test Line</div></body>
ID Selector Style will apply. Here the div text will display Red.
Difference between Class Declaration
Spacing in between class specifiers means a ascendant and descendant relationship.
.test .heading { font-weight: bold; }
<span class=”test”><p class=”heading”>Something</p></span>
The lack of space means that the element must have both classes for the rule to apply.
.heading.major { color: blue; }
<p class=”heading major”>Major heading</p>
What is the difference between div > p and div p?
div > p — Affects only direct children.
div p — Affects grandchildren, grandgrandchildren etc. as well.
Example:
<div>
<p>The first paragraph.</p>
<blockquote>
<p>A quotation.</p>
</blockquote>
<div>
<p>A paragraph after the quotation.</p>
</div>
</div>
What is the difference between block and inline-block?
When working with HTML and CSS a block, inline and inline-block may be confusing. Below are some examples of each of these attributes to give a better understanding of how each of them work.
CSS display: inline
In our first example, we start by using a <span> tag, which by default is an inline element. As can be seen in the example below, the span text is red and is contained on the same line (inline) of the text before and after the span.
Example text to give an example of how span text can be as an inline, block, or inline-block element and how it can change the appearance of text.
<span style=”color:red;”>span text</span>
CSS display: block
In the next example, we’ve changed the default of the <span> tag to display as a block. Because a block element occupies its own line, it gives the appearance that an enter or return was pressed after “how” and “text” in our example.
Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.
<span style=”color:red; display: block;”>span text</span>
CSS display: inline-block
Finally, in the next example, we’ve changed the default of the <span> tag to display as an inline-block. Unlike a block element an inline-block remains inline with all text around the element and appears the same as an inline.
Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.
<span style=”color:red; display: inline-block;”>span text</span>
Why would I use an inline-block instead of inline?
After seeing the above examples, you may immediately ask yourself why would I want to use a block or inline-block element? By making an element a block element, you get the ability to have a vertical height to that element as shown below.
Inline span with height:
Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.
<span style=”color:red; background-color:yellow; height:60px;”>span text</span>
Inline-block span with height:
Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.
<span style=”color:red; background-color:yellow; display: inline-block; height:60px;”>span text</span>
Sequence of CSS execution
ul { color: red; }
ul li { color: blue; }
ul li:first-child { color: green; }
ul li:last-child { color: gray; }
ul li:nth-child(4) { color: yellow; }
<ul>
<li>Biswabhusan</li>
<li>Nibedita</li>
<li>Nilakshi</li>
<li>Sonakhi</li>
</ul>
Output: Green, Blue, Blue, Yellow
What is the Syntax of Opacity in CSS3?
Style=”opacity:0.4; filter:alpha(opacity=40)”
Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
CSS3 :nth-child() Selector
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.
p:nth-child(odd) { background: red; }
p:nth-child(even) { background: blue; }
p:nth-child(3n+0) { background: red; }
What are the different types of Selectors in CSS?
A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.
Universal Selector, ID Selector, Element Type Selector, Class Selector, Attribute Selector
What is the difference between inline, inline-block, and block?
Block Element: The block husband whatsapp status elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.
Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags.
Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.
What are Pseudo elements and Pseudo classes?
Pseudo-elements allows us to create items that do not normally exist in the document tree, for example ::after.
• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection
In the below example, the color will appear only on the first line of the paragraph.
p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}
Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.
• :link
• :visited
• :hover
• :active
• :focus
Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}
What is a z-index, how does it function?
z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the display of elements should happen in cases of overlapping.
What is cascading in CSS?
“Cascading” refers to the process of going through the style declarations and defining weight or importance to the styling rules that help the browser to select what rules have to be applied in times of conflict. The conflict here refers to multiple rules that are applicable to a particular HTML element. In such cases, we need to let the browser know what style needs to be applied to the element. This is done by cascading down the list of style declarations elements.
For example, if we have the below style:
p{
color:white;
}
and we also have the following declaration below it or in another stylesheet that has been linked to the page:
p{
color: black;
}
We have a conflict in color property here for the paragraph elements. Here, the browser just cascades down to identify what is the most recent and most specific style and applies that. Since we have the color:black; as the most specific declaration, the color black is applied to the paragraph elements. Now if you want to ensure color white is applied to the paragraph, we can define weight to that style by adding !important as shown below:
p{
color:white !important;
}
!important ensures that the property has the maximum weight in presence of other conflicting properties.
How does this property work overflow: hidden?
The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have to be added to the content area when the content size exceeds the specified container size where the content is enclosed. If the value of overflow is hidden, the content gets clipped post the size of the container thereby making the content invisible.
For example,
div {
width: 150px;
height: 50px;
overflow: hidden;
}
If the content of the div is very large and exceeds the height of 50px, the content gets clipped post 50px and the rest of the content is not made visible.
What is the importance of CSS Sprites?
CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:
• It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
• It helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
• When there are multiple images, the browser makes separate calls to get the image for each of them. Using sprites, the images are combined in one and we can just call for that image using one call.
CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
Page updated
Google Sites
Report abuse