1 . Explain the three main ways to apply CSS styles to a web page?
CSS can be integrated in three ways:
Inline: term is used when the CSS code have attribute of HTML elements
<p style=”colour:skyblue;”> hello world!</p>
External: separate CSS file is created in the workspace and later linking them in every web page that is created
<link rel=”text/css” href=”your_CSS_file_location”/>
Internal: the head element of the web page has internal CSS implemented in it
<head><style>p{color:Red;background-color:black;}</style></head>
2. What are pseudo elements and what are they used for?
Pseudo elements are used to style particular parts of an element. They always start with a double colon – although a single colon is still allowed for backwards compatibility – It can be use like below :
p::first-line { ... } span::first-letter { ... } ::selection { ... } .header::after { ... } .tooltip::before { ... }
3. Distinguish between CSS2 and CSS3.
- CSS3 is divided into two various sections which are called as a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
- CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
- In CSS3 we will find that many graphics related characteristics have been introduced like “Border-radius or box-shadow, flexbox.
- In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.
4.Write all the properties of flexbox.
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
5. How Is Multi-column Feature Used In Css3
By using the Multi-Column feature of CSS3 the web designers can get their output in multiple columns with definitions defined for each column like column-width, column-count.
6.What Is The Syntax Of Word Wrap In Css3?
The general syntax word-wrap property of CSS3 is as follows:
word-wrap: normal| break-word
The default initial value is normal in the above syntax.
7.Advantages of using CSS3 animations over script-based animation
- Easy to use and anybody can create them without the knowledge of JavaScript.
- Executes well even under reasonable system load. As simple animations perform poorly in JavaScript, the rendering engine uses the frame-skipping techniques to allow smooth flow of animation.
- Allows the browser to control the animation sequence, optimize performance and efficiency by reducing the update frequency of animations executing in tabs that aren’t currently visible.
8. What is CSS3 Transitions?
CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration.
div { -webkit-transition: width 2s, height 4s; /* Safari */ transition: width 2s, height 4s; }
9. What is CSS3 Animation?
When the animation is created in the @keyframe, bind it to a selector, otherwise, the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
- Specify the name of the animation
- Specify the duration of the animation
10. CSS3 Media Query Example
If the viewport is minimum 480 pixels or widee then the body backgroud color will be changed to blue.
@media screen and (min-width: 480px) {body {background-color: blue;}}