1. What is CSS3? What's new with CSS3?
CSS3 is the latest evolution of the Cascading Style Sheets language.
Now let's have a look at what's new:
Responsiveness - CSS3 supports responsive design, and can also handle media queries. With Media queries, we can easily apply personalized CSS properties for different screen widths.
Modules - CSS3 is broken up into modules, improving both functionality and ease of working. With modular structure, CSS3 makes it much easier to make changes.
Animations - Using CSS3, the user can easily create 3D transformations, transitions, and animations.
Shadows - CSS3 comes with the ability to add drop shadows to elements using the box-shadow property and add shadow to text using text-shadow property.
Colors - New color formats like RGBA (Red, Green, Blue, Alpha), HSL(Hue, Saturation, Lightness), HSLA(Hue, Saturation, Lightness, Alpha) have been added. The gradient and opacity properties have also been added.
Reduced the Alignment Problems - Box-Sizing tool allows us to get the right size for their elements without having to subtract dimensions for padding and borders.
Border Radius - The border-radius property lets you create rounded corners without the need for images or additional markup, an effect that required a lot of formatting work to achieve before.
2. What is gradient and explain its types?
CSS gradients let you display a progressive transition between two or more specified colors.
A linear gradient creates an image consisting of a progressive transition between two or more colors in a straight line. To create a linear gradient, all you need is to specify two colors. These are called color stops.
Example of Linear Gradient
<style>
#lineargradexample {
height: 300px;
background-image: linear-gradient(black, white);
}
</style>
Radial gradients radiate out from a central point. To create a radial gradient you must also define at least two color stops.
Example of radial Gradient
<style>
#radialgradexample {
height: 150px;
width: 400px;
background-image: radial-gradient(black, green, yellow);
}
</style>
3. What is Media Query in CSS3?
Media query feature of CSS enables you to customize the appearance of websites for multiple devices. A media query consists of a media type that allows you to specify how documents will be presented in different media such as screen, print, an aural browser, etc.
Media query use @media rule to apply different styles for different media types/devices.
Example
/*Here, we tell the browser to display a 12 pixels Verdana font on the screen. And if the page is printed, it should use a 10 pixels Times font. */
@media screen
{
p.rText {font-family:verdana,sans-serif; font-size:12px}
}
@media print
{
p.rText {font-family:times,serif; font-size:10px}
}
4. What are the media types in CSS3?
Media Types in CSS: There are many types of media types which are listed below:
all - It is used for all media devices
print - It is used for printer.
screen - It is used for computer screen, smartphone, etc.
speech - It is used for screen readers that read the screen loud.
5. Explain CSS3 Animations?
CSS animation lets an element gradually change from one style to another without using JavaScipt/jQuery. It lets move elements around the screen, makes them spin around, change color, size, shape, and much more. To use CSS animation, you need to write animations using keyframes which basically holds what styles the element will have at certain times.
Example - Here, the rectangle background color changes from Red to Green
/* The animation code */
@keyframes animate {
from {background-color: red;}
to {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 50px;
background-color: red;
animation-name: animate;
animation-duration: 3s;
}
6. What is the use of calc()?
The calc() function lets you perform calculations to be used as the property value. It takes a single expression as its parameter and expression's result is used as property value. The expression can be any simple expression with addition, subtraction, multiplication and division.
Example
width: calc(100% - 90px);
The most useful ability of calc() is its ability to mix units, like percentages and pixels.
7. What is CSS3 Flexbox?
CSS3 Flexbox or Flexible box is a Layout Module that provides an easy and clean way to arrange items within a container. It enables you to create complex layouts with only a few lines of code without using float or positioning. A Flexbox layout consists of a flex container that holds flex items.
8. What is word-wrap property in CSS3?
The word-wrap property allows long words to be able to be broken in order to prevent overflow and wrap onto the next line.
CSS Syntax
word-wrap: normal|break-word|initial|inherit;
Description of the values of word-wrap property:
normal - This is default value. It breaks words only at allowed break points
break-word - Forces an unbreakable word to wrap in a new line
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.
9. How can you create shadow effect in CSS3?
With CSS3 you can create two types of shadows:
text-shadow - The CSS property applies shadow to text
box-shadow - The CSS property applies shadow to elements.
10. What is the use of CSS3 sprites?
A web page with multiple images, particularly small images, such as icons, buttons etc. generates multiple server requests and loads individually, resulting in a slower experience. To resolve this CSS3 comes with sprites. With CSS sprites, multiple images are combined into a single image called a sprite sheet. This reduces the number of server requests and save bandwidth.
11. How does class selector differ from an ID selector?
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify multiple HTML elements.
12. What are CSS3 Transitions?
CSS3 transitions allow you to change property values smoothly from one value to another, over a given duration.
13. What do you know about pseudo-elements?
CSS pseudo-elements are used to style specified parts of an element. There are two pseudo-elements:
1. first-line
2. first-letter
The
::first-line pseudo-element is used to add a special effect to the first line of a text.
The
::first-letter pseudo-element is used to add a special effect to the first character of a text.
14. How does the Z index function?
Z index is used for specifying the overlapping element. Sometimes, overlapping may occur while using CSS for positioning HTML elements. Z index helps to avoid overlapping elements. It is a number which can be positive or negative. The default value of Z index is zero (0).
===============================================================
1. Which property is use to give rounded corners in CSS3?
Answer:
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>
2. What is the syntax for adding multiple background images in CSS3?
Answer:
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>
3. What do you know about word wrapping in CSS3?
Answer:
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>
4. What is the use of Media Queries in CSS3?
Answer:
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
5. What is the syntax to avoid repetitive background images using CSS?
Answer:
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>
