Guvi CSS All Soultion (1 to 51).
 |
Guvi CSS Webkata Solution |
1. Change font size of all the elements with class name as 'size' to 60 px using css.
.size{
font-size:60px;
}
2. Change the opacity of the given text "Nice to meet you." to 0.5 and set background color as blue.
p{
background-color:blue;
opacity: 0.5;
}
3. Display an unordered list as inline with elements HTML,CSS,JS.
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
4. Add font-family 'courier' to the given paragraph text "This is a paragraph".
p{
font-family:courier;
}
5. Place an dashed blue border around the given paragraph 'I have a blue border' of width 5px.
p{
border: 5px dashed blue;
}
6. Place a solid border of width 10px around the given paragraph 'Pen is better than Sword'
p{
border:10px solid;
}
7. Capitalize the given paragraph 'This is some text' using css
.sid{
text-transform: capitalize;
}
8. Change the entire text of the given paragraph 'This is some text' to lowercase.
.sid{
text-transform:lowercase;
}
9. Separate the given words of a paragraph 'This is spacing' with a space of 20px using css.
.sid{
word-spacing: 20px;
}
10. Add text shadow of 2px horizontal 2px vertical and 5px blur effect of color red to the given paragraph 'This is a technical issue'.
.sid{
text-shadow: 2px 2px 5px red;
}
11. Set the width of the given button to 100% using CSS.
.demo{
width:100%;
}
12. Create a padding of 130px between the given text and border using CSS.
.demo{
padding:130px;
}
13. Decorate the given paragraph 'Something is better than nothing' with the lines at both top and bottom of it.
.demo{
text-decoration: overline underline;
}
14. Display all the paragraph element in green color using CSS.
p{
color:green;
}
15. Make the edges of the given green square rounded with a border-radius of 10px using CSS.
.rounded-square{
border: solid green;
border-radius: 10px;
}
16. Give a padding of 10px to the h2 heading using CSS.
h2 {
padding:10px;
}
17. Give a left-padding of 10px to the h2 heading using CSS.
h2 {
padding-left:10px;
}
18. Give a top-padding of 10px to the h2 heading using CSS.
h2 {
padding-top:10px;
}
19. Give a bottom-padding of 10px to the h2 heading using CSS.
h2 {
padding-bottom:10px;
}
20. Display "Hello from Guvian!" in blue color using h1 tag with internal CSS styling.
<style>
h1{
color:blue;
}
</style>
21. Display "Hello from Guvian" in red colour, aligned center using CSS selector in paragraph tag.
<style>
p {
color:red;
text-align: center;
}
</style>
22. Display "Hello from Guvian" in a margin of 20px with pink background in a paragraph tag.
<style>
p {
margin:20px;
background:pink;
}
</style>
23. Display an statement "Hello From Guvian!" in a h1 tag and underline it using CSS.
<style>
h1{
text-decoration: underline;
}
</style>
24. Display "Hello from guvian" using padding on all four sides, 10px, with light blue background in a paragraph tag.
<style>
p{
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background:lightblue;
}
</style>
25. Align the given text "Code well" to center and give a green border to it.
p{
text-align:center;
border-color: green;
}
26. Give Green color to the given button using css.
.demo{
color:green;
}
27. Color the given button only at borders with red.
.demo{
border:solid red;
}
28. Display all the elements with class name as "changeMeToGreen" in a green colour using CSS.
.changeMeToGreen{
color:green;
}
29. Increase the font size of all the elements with class name as "increase" to 30px using CSS.
.increase{
font-size:30px;
}
30. Change the colour of the contents of h3 tag to Green color using external CSS.
h3{
color:green;
}
31. Align the contents to center with id_name as "alignToCenter" using external CSS.
#alignToCenter{
text-align:center;
}
32. Align the contents to center with id_name as "alignToRight" using external CSS.
#alignToRight{
text-align:right;
}
33. Give a solid red border to the given square with a thickness 3px using CSS.
.red-border{
border:3px solid red;
}
34. Change the background colour of the given rectangle to blue color using CSS.
.blue-rectangle{
background-color:blue;
}
35. Give a solid red left border to the given content with a thickness 3px using CSS.
.left-border {
border-left:3px solid red;
}
36. Give a solid red right border to the given content with a thickness 3px using CSS.
.right-border {
border-right:3px solid red;
}
37. Give a solid red top border to the given content with a thickness 3px using CSS.
.top-border {
border-top:3px solid red;
}
38. Give a solid blue bottom border to the given content with a thickness 3px using CSS.
.bottom-border {
border-bottom:3px solid blue;
}
39. Change the padding of the button to 5px using CSS.
button{
padding:5px;
}
40. Display "Hello from Guvian" in a paragraph tag, where you have to increase the font size of the word 'Guvian' using class named 'note' to 20px in a span tag.
.note{
font-size:20px;
}
41. Display "Hello From Guvian" using paragraph tag and by using :after pseudo element add ! after the text.
p::after {
content: "!";
}
42. Give a linear gradient of red to yellow from top to bottom inside the displayed shape using CSS.
.gradient {
width: 300px;
height: 200px;
background: linear-gradient(red, yellow);
}
43. Give a linear gradient of red to yellow from bottom to top inside the displayed shape using CSS(use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background: linear-gradient(0deg, red, yellow);
}
44. Give a linear gradient of red to yellow from left to right inside the displayed shape using CSS( use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background: linear-gradient(0deg, red, yellow);
}
45. Give a linear gradient of red to yellow from right to left inside the displayed shape using CSS( use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background: linear-gradient(270deg,red,yellow);
}
46. Give a linear gradient of red to yellow from top-left to bottom-right inside the displayed shape using CSS( use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background-image: linear-gradient(135deg, red, yellow);
}
47. Give a linear gradient of red to yellow from top-right to bottom-left inside the displayed shape using CSS( use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background-image: linear-gradient(225deg, red, yellow);
}
48. Give a linear gradient of red to yellow from bottom-right to top-left inside the displayed shape using CSS( use degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background-image: linear-gradient(315deg, red, yellow);
}
49. Give a linear gradient of red to yellow from bottom-left to top-right inside the displayed shape using CSS(using degrees for direction change).
.gradient {
width: 300px;
height: 200px;
background-image: linear-gradient(45deg, red, yellow);
}
50. Give a circular radial gradient in which red at center and then yellow and last green inside the displayed shape using CSS.
.gradient {
width: 300px;
height: 200px;
background-image: radial-gradient(circle, red, yellow, green);
}
51. Display "Hello From Guvian" in a paragraph and highlight the word "Hello" in italics using internal CSS via class name italic.
<style>
.italic{
font:italic small-caps bold 12px/30px Georgia, serif;
}
</style>
0 Comments