Ans: The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.
Ans: In a web page we are using many images to decorate. All these image takes time to load individually. This old fashion of image loading increases http request to server. It hampers the performance of web page. To resolve this CSS3 comes with sprites. It helps to keep many images in a single file. Due this it decreases the http request to the server. Gives better performance and taking less server time.
Ans: The 'border-radius' property is used to give rounded corners in CSS3. The rounded corners can be given to any element using this property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners {
border-radius: 15px;
border: 2px solid #000000;
background: #00FFFF;
padding: 20px;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<p>Rounded corners for an element with a background color and border:</p>
<p id="rcorners">Rounded corners!</p>
</body>
</html>
Ans: Standard Generalized Markup Language marked the beginning of style sheets in 1980s.
Ans: CSS3 is the 3rd revision of CSS. Compare to CSS2 CSS3 introduced the following new features.
Calculating value with calc()
In CSS2 to set dynamic width we use JavaScript or Jquery. This problem is resolved in CSS3. CSS3 introduced calc() function. For an example if you want to set a div (#container) with 100px less then the 100% width then you can do the following using CSS3 calc method.
#container {
/* Calculate the width Dynamically */
width: calc(100% - 100px);
margin: 0 auto;
}
Ans: CSS3 allows you to set multiple background images by calling local stored images.
Following syntax is used for adding multiple background images:
Syntax:background-image: url(img1.gif), url(img2.gif);
Example:
<html>
<head>
<style>
#bg {
background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg"), url("/home/careerride8/careerride8/CSS3-Example/images/back-ground.jpg");
background-position: right bottom, left top;
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</div>
</body>
</html>
Output: Hello World.
Ans: The variations for CSS are:
Ans: About CSS3 Grouping let us discuss an example to make you more clear on this. Some time in our page we have h1, h2, h3 .. h5, h6 tags. If I want to apply font color red to all this tags. Here grouping comes. Let you watch the below example. It will clear your understanding.
h1, h2, h3 {color: red;}
Ans: In CSS3, word wrapping means breaking the long words into next line.
Syntax: word-wrap: break-word;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#wordwrap {
width: 10em;
border: 1px solid #0000ff;
word-wrap: break-word;
}
</style>
</head>
<body>
<p id="wordwrap"> Delhi has a serious problem when it comes to pollution, withpreviousDiwalisturninginto a nightmare for residents.</p>
</body>
</html>
Ans: Limitations are:
Ans: In CSS3 Child Selector used to to apply styles upon the child elements of a parent elements. Lets for an example I have a ul tag inside a paragraph. Here ul is the child element of paragraph. To apply CSS styles we can use the following CSS3 syntax:
p > ul { font-size:20px; }
Ans: Media Queries use the @media rule to include a block of CSS properties only if a certain condition is true.
Example:
@media screen and (max-width: 480px)
{
body
{
background-color: green;
}
}
If the browser window is smaller than 480px, the background color will change to green
Ans: Advantages are:
Ans: To avoid repetitive background images, you can use "background-repeat" property with no-repeat value.
"background-repeat" property has two values: repeat and no-repeat.
By default background-repeat property has repeat value.
Example:
<html>
<head>
<style>
#bg{
background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg");
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</body>
</html>
Ans: Using CSS pseudo Class we can add special effects to some Selectors.
Example of Anchor Pseudo Class
/* style for unvisited link */
a:link { color: #FF0000; font-size:12px; }
/* style for visited link */
a:visited { color: #00FF00; font-size:14px; }
/* on mouse over link */
a:hover { color: #FF00FF; font-size:16px; }
/* selected link */
a:active { color: #0000FF; font-size:12px; }
Example of First Child Pseudo Class
p:first-child { color: #0000FF; }
Related Interview Questions...