1. What is css? Why CSS? What are the advantages of css?
CSS stands for cascading style sheet, CSS is a markup language used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes.
Why CSS
- HTML was originally designed as a simple way of presenting information
- Formatting of the web page was far less important than the content
- Of course, now the presentation of your content has become important to a web site’s success
- This was the reason of introduction of CSS
Advantages of CSS
- Ease of Use: It is very easy to learn CSS and facilitates the creation of websites. All codes are put on one page, meaning it would not involve going through multiple pages to improve or edit the lines.
- Website Speed: Typically, the code used by a website may be up to 2 or more pages. But with CSS, that’s not the code, and thus the web site database remains uncluttered, avoiding any website loading problem.
- Transfer Size: It decreases the size of the file transfer. Therefore the file transfer is very quick
- Multiple Browser Support : Many browsers support CSS. It is consistent with all the web browsers on the internet
- Web Page Crawl : CSS helps to allow SEO for the website. Adding CSS to the web pages makes it easier for the search engine to find the website in the search result.
- Enhanced Design Capabilities : CSS offers a wide range of styling options, including fonts, colors, layouts, and animations. This allows for creative and visually appealing designs that enhance the user experience.
2. Why background and color are the separate properties if they should always be set together?
There are two reasons behind this:
- It enhances the legibility of style sheets. The background property is a complex property in CSS and if it is combined with color, the complexity will further increase.
- Color is an inherited property while the background is not. So this can make confusion further.
3. What is the use of CSS opacity?
The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object.
For example;
- <style>
- Img.trans {
- opacity: 0.4;
- Filter: alpha(opacity=40); /* For IE8 and earlier*/
- }
- </style>
4. Name the property for controlling the image repetition of the background?
The background-repeat property repeats the background image horizontally and vertically. Some images are repeted only horizontally or vertically.
<style>
body {
background-image:url(“paper1.gif”);
margin-left;100px;
}
</style>
5. What are the benefits of CSS sprites?
If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.
6. What is the float property of CSS?
The CSS float property is used to move the image into the right or left along with the texts to be wrapped around it. It doesn’t change the property of the elements used before it.
7. What is the purpose of z-index? And how is it used?
- The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
- An element with a higher z-index is always stacked above than a lower index.
- z-index can take the following values:
> Auto : Sets the stack order equal to its parents.
> Number : Orders the stack order.
> Initial : Sets this property to its default value (0).
> Inherit : Inherts the property from its parent element.
8. What is tweening?
- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieving tweening.
9. What is the difference between CSS2 and CSS3?
The main difference between CSS2 and CSS3 is that CSS3 is devided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.
Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.
10. There is a term being extensively used with CSS3 i.e, ‘Webkit’. Please explain the use of this term?
Many modern browsers are based on Webkit which is software engine component for rendering web pages in the web browsers like Chrome, Safari, and Opera etc. When applying a rule for these browsers we need to use the prefix ‘-Webkit’ for these browsers to read the rule correctly.
