Advertisement

Advertisement


CSS Interview Questions

Here are some frequently asked CSS interview questions ?

What is CSS ?

Answer : CSS stands for Cascading Style Sheet. It is used to give a stylistic, beautiful, attractive look and formatting to a webpage. It is used with HTML to give the webpage an attractive look and feel and can also be used with XML documents including plain XML, SVG and XUL. More..


How can you integrate CSS on a web page ?

Answer : There are three methods to integrate CSS on web pages:


What is the use of CSS ?

Answer : It is used with HTML to give the webpage an attractive look and feel and can also be used with XML documents including plain XML,SVG and XUL. More..

Some Advantages of CSS :

  • Time Saving
  • Multiple Device Compatibility
  • Page Reformating
  • Improves HTML functionality

Why Embedded Style Sheet is used?

Answer : It is used to give styling to the whole webpage at once. It's scope is limited to the only webpage it is written in. Although it can be written anywhere in the page within <style> tag but is preferred within head section of html. More..


<!DOCTYPE html>
<html lang="en">
<head>
<title> Embedded CSS </title>
<meta charset="UTF-8">
<style type="text/css">
body { background-color: seagreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

What is CSS Selector ?

Answer : CSS selectors are used to select the element you want to stylize. Selectors are the part of CSS rule set. CSS selectors select the HTML elements according to their id's, classes, type, attribute etc. More..


How universal selector is used ?

Answer : The universal selector is used as a wildcard character. It selects all the elements on the pages. More..


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Universal Selector </title>
<meta charset="UTF-8">
<style>
*{
color: green;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p>
</body>
</html>

Output

CSS Universal Selector

This is heading 1.

This is heading 2

This style will be applied on every paragraph.


What are the advantages of External Style Sheet ?

Answer : Advantages :

  • You can create various IDs and Classes and reuse them in multiple pages.
  • You can control multiple webpages' style by altering only one style sheet.
  • Page Reformatting
  • Improves HTML functionality

What is the difference between padding and margin ?

Answer : The margin property defines the space around elements i.e, how much space should be left to the sides. You can change the margins of an element one by one for each side or can give all at once using shorthand property.

CSS Margin Property

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

CSS Margin Values

  • Auto
  • Length (px,pt, cm, etc.)
  • %
  • Inherit

The padding property is used to define the space between the content and the border of the element. It clears an area around the content unlike margins which clears the area around the element.

CSS Margin Property

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

How can we add icons to the web page ?

Answer : We can add icons to the HTML webpage by using an icon library like font-awesome, Bootstrap and Google. To add icon we need to add the name of the given icon class to any inline HTML element. (lt;i> or lt;span>) . Icons in the icon libraries are scalable vectors that can be customized with CSS.


Name the Position states used in CSS ?

Answer : In CSS, there are four position states as stated below:

  • Static(default)
  • Relative
  • Fixed
  • Absolute

What are the differences between ID and Class ?

Answer : In CSS a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The only difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.