Skip to content

Latest commit

 

History

History
104 lines (86 loc) · 2.47 KB

css-practice.md

File metadata and controls

104 lines (86 loc) · 2.47 KB

CSS Practice

Q. How to draw a circle inside Square using single DIV in css?

<!DOCTYPE html>
<html>
  <head>
    <title>Circle inside Square</title>
  </head>
  <style>
    .rectangle {
        border-radius: 10px;
        display: inline-block;
        width: 205px;
        height: 205px;
        border: 1px solid #000;
        background-color: white;
    }
    .rectangle::before {
        display: block;
        position: absolute;
        left: 10px;
        top: 10px;
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: #eee;
    }
    </style>
    <body>
        <div class="rectangle"></div>
    </body>
</html>

Live Example

Q. How to center align a div inside another div?

.container {
	width: 500px;
	height: 500px;
	background-color: red;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

Live Example

Q. How to create a zebra striped table with CSS?

To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows:

tr:nth-child(even) {
    background-color: #f2f2f2
}

Q. How Do I Have A Fixed (non-scrolling) Background Image?

In CSS, we can use the background-attachment property. The background attachment can be included in the shorthand background property, as in this example:

body {
  background: white url(example.gif) fixed ;
  color: black ;
}

Q. What elements will match each of the following CSS selectors?

  • div, p Selects all <div> elements and all

    elements

  • div p Selects all <p> elements that are anywhere inside a
    element
  • div > p Selects all <p> elements where the immediate parent is a
    element
  • div + p Selects all <p> elements that are placed immediately after a
    element
  • div ~ p Selects all <p> elements that are anywhere preceded by a
    element