Placement_Prepration

CSS Coding 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 Demo: Circle inside Square

↥ back to top

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 Demo: center div

↥ back to top

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
}

Live Demo: Zebra Striped

↥ back to top

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

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

↥ back to top

Q. How to align image vertically in a division that spans vertically on the whole webpage?

You can align an image vertically center inside a <div> by using the CSS vertical-align property in combination with the display: table-cell; on the containing div element.

Additionally, since CSS margin property is not applicable to display: table-cell; elements, so we've wrapped the containing DIV with another DIV (.outer-wrapper) and applied margin on it. This solution will work even for images with greater height than containing DIV.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Vertically Center the IMG in a DIV with CSS</title>
  <style>
    .outer-wrapper {
      display: inline-block; 
      margin: 20px;
    }

    .frame {  
      width: 250px;
      height: 200px;
      border: 1px solid black;
      vertical-align: middle;
      text-align: center;
      display: table-cell;
    } 

    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: 0 auto;
    }
  </style>
  </head>
<body>
    <h2>Vertically Center the IMG in a DIV with CSS</h2>
    <!-- Alignment of undersized image -->
    <div class="outer-wrapper">
        <div class="frame">
            <img src="../images/club.jpg" alt="Club Card">
        </div>
    </div>
</body>
</html>

Live Demo: CSS vertical-align Property

↥ back to top

Q. How to style every element which has an adjacent item right before it?

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Combinator</title>
    <style>
        div + p {
            background-color: yellow;
        }
    </style>
  </head>
<body>
    <div>
        <h2>My name is Donald</h2>
        <p>I live in Duckburg.</p>
    </div>

    <p>My best friend is Mickey.</p>
    <p>I will not be styled.</p>
</body>
</html>

Live Demo: CSS Combinator

↥ back to top

Q. Write down a selector that will match any links end in .zip, .ZIP, .Zip etc.

[att$=val] Represents an element with the att attribute whose value ends with the suffix “val”. If “val” is the empty string then the selector does not represent anything.

a[href$=".zip" i]:after {
  content: '↓'
}

↥ back to top

Q. Place a div to corner top-right of the page?

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Position</title>
    <style>
      .topheader {
        position: relative;
        height: 20px;
      }

      .message {
        position: absolute;
        top: 0;
        right: 0;
        border: 1px solid;
      }
    </style>
  </head>
<body>
    <div class="topheader">
      <div class="message">Hello World!</div>
    </div>
</body>
</html>

Live Demo: CSS Position

↥ back to top

Q. You have 3 div's. You have to align first div in right side and other 2 div’s in left side. Write CSS to achieve this?

using flexbox

.example {
    display: flex;
    flex-direction: row;
}

.example > .a {order: 3; } /* Will be displayed third  */
.example > .b {order: 1; } /* Will be displayed second */
.example > .c {order: 2; } /* Will be displayed first  */

<div class="example">
    <div class="a">First</div>
    <div class="b">Second</div>
    <div class="c">Third</div>
</div>

Live Demo: Flexbox Example

↥ back to top

Q. CSS Media Query Example

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

@media only screen and (max-width: 1080px) {
  /* place here CSS for when the screen is less than 1080px wide */
  .card {
    width: 100%;
  }
}

Live Demo: CSS Media Query

↥ back to top

Q. CSS background-color gray opacity css code example

.transparent {
    background-color: rgba(255, 255, 255, 0.5);
}
.transparent {
    opacity: 0.5;
}

Live Demo: CSS Opacity

↥ back to top

Q. Place header at bottom of div

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

↥ back to top

Q. CSS Gradient Example

/*From bottom to top*/

.container {
  width: 500px;
  padding: 4px;
  background: linear-gradient(to top, red, yellow); 
}

Live Demo: CSS Gradient

↥ back to top

Q. How to make fixed background image in css

body {
  background-image: url("../images/horse.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Live Demo: CSS fixed-background

↥ back to top

Q. Add space between flex items

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px; /* HERE WE ADD THE SPACE */
}

Live Demo: Flexbox Space

↥ back to top

Q. How to disable arrows from input type number?

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Live Demo: Number Input Field

↥ back to top

Q. How to get text to start a new line?

.break-word {
  word-wrap: break-word;
}

Live Demo: CSS word-wrap

↥ back to top

Q. How to select child element in css?

.parent > .immediate-child {
  color: red;
}

Live Demo: CSS select child element

↥ back to top

Q. minmax with repeat css grid

/* To achieve wrapping, we can use the auto-fit or auto-fill keywords. */

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

Live Demo: CSS grid-template-columns

↥ back to top

Q. How to make text not selectable in css

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

Live Demo: Not Selectable Text

↥ back to top

Q.center wrapped flex children

.container {
  display: flex;
  
  justify-content: space-around;
  /* OR */
  justify-content: space-evenly;
}

Live Demo: flex children

↥ back to top

Q. create a rounded corner button using css

.btn {
  background-color: #f44336;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}

Live Demo: Rounded Corner Button

↥ back to top

Q. How apply blur in background-image

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('../images/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Live Demo: blur in background-image

↥ back to top

Q. CSS text-overflow ellipsis multiple lines

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

Live Demo: CSS text-overflow ellipsis

↥ back to top

Q. How to place a fixed button at bottom right of the screen in html

.feedback {
  background-color : #31B0D5;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-color: #46b8da;
}

#mybutton {
  position: fixed;
  bottom: -4px;
  right: 10px;
}

<div id="mybutton">
  <button class="feedback">Feedback</button>
</div>

Live Demo: fixed button

↥ back to top

Q. center div in middle of page

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Live Demo: center div

↥ back to top

Q. Sass @extend and Inheritance

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Live Demo: Sass @extend

↥ back to top

Q. css fade in example

.fade-in-image {
  animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

Live Demo: CSS fade-in

↥ back to top

Q. css get property with data attribute

<div data-content="data-attribute example in css"></div>

[data-content]:before {
  content: attr(data-content);
}

Live Demo: CSS data-attribute

↥ back to top

Q. css remove highlight when click

button:focus { outline: 0; }

Live Demo: CSS outline

↥ back to top

Q. How to select last nth child

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>

p:nth-last-child(3) {
  background-color: yellow;
}

Live Demo: CSS nth-last-child()

↥ back to top

Q. can i call mixin in html

/* sass mixin */

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(45deg)); }

Live Demo: SASS @mixin()

↥ back to top

Q. css rotate text

/* Answer to: "css rotate text" */

.rotate {

  transform: rotate(-90deg);

  /* Legacy vendor prefixes that you probably don't need... */
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Live Demo: CSS rotate()

↥ back to top

Q. css blink

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">Blink Text Example!</div>

Live Demo: CSS Animation

↥ back to top

.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;
   /* z-index works pretty much like a layer:
   the higher the z-index value, the greater
   it will allow the navigation tag to stay on top
   of other tags */
}

Live Demo: Sticky/Affix Navbar

↥ back to top

Q. Change input border color when selected

input:focus {
	outline: none;
  	border: 1px solid red;
}

Live Demo: CSS focus

↥ back to top

Q. CSS import otf font

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

Live Demo: CSS @font-face

↥ back to top

Q. css shadow on image

div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Live Demo: CSS box-shadow

↥ back to top

Q. sass conditional code

/** How to create an if-else clause in sass

* First create a mixin, which is like a function in javaScript
* And pass in an optional parameter to the mixin to hold the value
* js ==> if, else if, else, while sass is ==> @if, @else if, @else
* No brackets surrounding each condition in sass
* Then pass in your block of styles to optionally load.
* @mixin variable-name(optional parameter(s))
*
**/

  @mixin border-stroke($val){
    @if $val == light {
      border: 1px solid black;
    }
    @else if $val == medium {
      border: 3px solid black;
    }
    @else if $val == heavy {
      border: 6px solid black;
    }
    @else{
      border: none;
    }
  }

  // Usage
  // Call a mixin using the @include followed by the mixin name

  h2{
    @include border-stroke(medium)
  }

/**
* scss conditional style
* 
**/

$p: 3;

@while $p < 5 {
  .item-#{$p} {
        color: red;   
        $p : $p + 1;
    }
}

↥ back to top

Q. How to disable mouseover in css

.noHover{
    pointer-events: none;
}

<a href='' class='btn noHover'>You cant touch ME !</a>

Live Demo: CSS pointer-events

↥ back to top

This site is open source. Improve this page.

Placement_Prepration

CSS Coding Practice

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

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

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

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

Q. How to align image vertically in a division that spans vertically on the whole webpage?

Q. How to style every element which has an adjacent item right before it?

Q. Write down a selector that will match any links end in .zip, .ZIP, .Zip etc.

Q. Place a div to corner top-right of the page?

Q. You have 3 div's. You have to align first div in right side and other 2 div’s in left side. Write CSS to achieve this?

using flexbox

Q. CSS Media Query Example

Q. CSS background-color gray opacity css code example

Q. Place header at bottom of div

Q. CSS Gradient Example

Q. How to make fixed background image in css

Q. Add space between flex items

Q. How to disable arrows from input type number?

Q. How to get text to start a new line?

Q. How to select child element in css?

Q. minmax with repeat css grid

Q. How to make text not selectable in css

Q.center wrapped flex children

Q. create a rounded corner button using css

Q. How apply blur in background-image

Q. CSS text-overflow ellipsis multiple lines

Q. How to place a fixed button at bottom right of the screen in html

Q. center div in middle of page

Q. Sass @extend and Inheritance

Q. css fade in example

Q. css get property with data attribute

Q. css remove highlight when click

Q. How to select last nth child

Q. can i call mixin in html

Q. css rotate text

Q. css blink

Q. css fix nav bar to top

Q. Change input border color when selected

Q. CSS import otf font

Q. css shadow on image

Q. sass conditional code

Q. How to disable mouseover in css