CSS Tutorial – CSS background tricks

In this section we will have CSS Tutorial for Job Interviews and Tech college Entrance examinations. CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. This section cover questions on CSS background, CSS border, CSS flex, CSS colors, CSS profile, padding CSS.

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  Here are few CSS tutorial you should go through before appearing for Job interviews.

Best of Luck !!

Q 1- How can you create rounded corners using CSS ?

  • border[round]: 30px;
  • corner-effect: round
  • border-radius: 30px
  • alpha-effect: round-corner;

Q 2- How do you add shadow to elements in CSS ?

  • box-shadow: 10px 10px 5px grey;
  • shadow-right: 10px shadow-bottom: 10px;
  • shadow-color: grey;
  • alpha-effect[shadow]: 10px 10px 5px grey;

Q 3- How can you create DASHED BORDER using CSS ?

  • dashed {border-style: ridge;}
  • mix {border-style: dotted dashed solid double;}
  • dashed {border-style: dashed;}
  • dashed {border-style: groove-dashed;}

Q 4- How can you achieve linear gradient in CSS ?

  • background-image: linear-gradient(red), (yellow);
  • background-image: linear-gradient(red and yellow);
  • background-image: linear-gradient(to bottom right), (red), (yellow);
  • background-image: linear-gradient(to bottom right, red, yellow);

Q 5- How to force a word wrap using CSS3?

  • word-wrap: break-word;
  • text-wrap: break-word;
  • text-wrap: force;
  • shadow: text 5px 5px 5px grey;

Q 6- How to rotate objects using CSS3 ?

  • object-rotation: 30deg;
  • transform: rotate(30deg);
  • rotate-object: 30deg;
  • transform: rotate-30deg-clockwise;

Q 7- How to create transition effects using CSS3?

  • transition: width 2s;
  • transition-duration: 2s; transition-effect: width;
  • alpha-effect: transition (width,2s);
  • linear-gradiant: transition (width,2s);

Q 8- How can you create an e-mail link in CSS ?

  • Mail href=”xxx@yyy.com”;
  • Mail>xxx@yyy.com/mail
  • href=”xxx@yyy.com”
  • href=”mailto:xxx@yyy.com”;

Q 9- What is the property used to set the class’s text color? ?

  • text-color
  • text:color
  • color
  • font-color;

Q 10- Which property is used to display list style as roman numerals ?

  • list-type:roman;
  • list-style-type:upper-roman;
  • list-style:roman;
  • list-bullet-type:roman-numerals;

Q 11- Which of the following property specifies the right padding of an element?

  • padding-bottom;
  • padding-top
  • padding-left
  • padding-right;

Q 12- Which of the following is correct about Hex Code format of CSS colors?

  • The first two digits(RR) represent a red value
  • The next two are a green value(GG)
  • The last are the blue value(BB)
  • All of the above

Q 13- Which of the following property changes the style of bottom border? ?

  • :border-bottom-style
  • border-top-style
  • border-left-style
  • border-right-style

Q 14 – Which of the following property specifies the right padding of an element? ?

  • padding-bottom
  • padding-top
  • padding-left
  • padding-right

Q 15- What is the correct HTML for inserting an image ?

  • Img alt=”MyImage” image.gif /img;
  • Image src=”image.gif” alt=”MyImage”
  • Img src=”image.gif” alt=”MyImage”
  • Img href=”image.gif” alt=”MyImage

For more Technical ,Reasoning and Aptitude questions, please refer to Home Page

Detailed tutorial on CSS can be studied on W3-Schools