Here I am sharing most asked CSS interview questions and their answers for beginners. This list of CSS interview answers surly helpful for CSS beginners or web designers who just want to began their profession as a web designer. I recommend read out these interview questions before the interview.
Question #1 - What is CSS?
CSS stands for Cascading Style Sheet. It is a popular styling language that is used with HTML to design web pages.
Question #2 - What is the latest version of CSS?
As of now CSS latest version is CSS3 . Latest Features of CSS3
Question #3 - What are the different types of CSS?
There are three types of CSS.
- Inline CSS : Inline Style Sheet is used to style only a small piece of code.
- Internal CSS : Embedded/Internal style sheets are put between the <head>...</head> tags.
- External CSS : This is used to apply the style to all the pages within your website by changing just one style sheet.
Question #4 - What is CSS selector?
It is a string that identifies the elements to which a particular declaration will apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. For More Follow
Question #5 - What is the difference between class selectors and id selectors?
There are two difference between class selectors and id selectors as below.
- A class selector is a name refenced by a full stop (“.”) and an ID selector is a name refenced by a hash character (“#”).
- An ID can be used to identify one element, whereas a class can be used to identify more than one.
Question #6 - What is Responsive Web Design?
Responsive web design is a technique that render all website pages differently on different sizes of devices.
The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
Question #7 - What is the CSS Box model and what are its elements?
The CSS box model is used to define the design and layout of elements of CSS.
The elements are as below:
The elements are as below:
- Margin
- Border
- Padding
- Content
Question #8 - Explain the difference between visibility: hidden and display: none?
visibility: hidden
simply hides the element but it will occupy space and affect the layout of the document.
display: none
also hides the element but will not occupy space. It will not affect the layout of the document.
simply hides the element but it will occupy space and affect the layout of the document.
display: none
also hides the element but will not occupy space. It will not affect the layout of the document.
Question #9 - What is the z-index and how is it used?
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
The z-index default value is zero, and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
The z-index default value is zero, and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
- Auto: Sets the stack order equal to its parents.
- Number: Orders the stack order.
- Initial: Sets this property to its default value (0).
- Inherit: Inherits this property from its parent element.
Question #10 - What are some of the common lists that can be used when designing a page?
Basically, HTML used some of the common lists these are following:-
– Ordered list
– Unordered list
– Definition list
– Menu list
– Directory list
Each of this list types makes use of a different tag set to compose.
– Ordered list
– Unordered list
– Definition list
– Menu list
– Directory list
Each of this list types makes use of a different tag set to compose.
Question #11 - Advantage of collapsing white space?
- This enables the designers to mastermind the HTML code in an efficient and intelligible organization.
- The browser collapses the multiple white spaces into a single white space in HTML.
- The browser collapses the multiple white spaces into a single white space in HTML.
Question #12 - What is the float property of CSS?
Float property is used to align the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it
Question #13 - What is the difference between CSS2 and CSS3?
CSS3 is the advance level of CSS2.0. In CSS3 we have new properties - border radius, box shadow, text shadow, multiple background images, gradient , animations, transition, transform and much more.
Question #14 - What is the syntax to link external style sheet?
Syntax :-
Syntax :-
<HTML> <HEAD> <LINK REL=STYLESHEET HREF="Test.css" TYPE="text/css"> </HEAD> </HTM
Question #15 - How embedded/internal style can be linked with HTML documents?
You can linked as below:-
<HEAD>
<STYLE TYPE=”text/css”>
style {text-indent: 15pt;}
style1{text-color: #060000;}
</STYLE>
</HEAD>
Question #16 -What are advantages of using CSS?
There are several advantages of CSS. as below -
- CSS saves time.
- Pages load faster.
- Easy Maintenance.
- Superior style to HTML
- Multiple device compatibility.
- Platform independence.
Question #17 - What are the components of CSS style?
There are three components of CSS style.
- Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
- Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
- Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
Question #18 - What Property is used to make a font italic or oblique
You can use font-style property to make a font italic or oblique.
example:- #anchor{font-style:italic;}
example:- #anchor{font-style:italic;}
Question #19 - What property is used to increase or decrease the size of a font?
You can use font-size property to increase or decrease the size of a font.
example :- #anchor{font-size:14px;}
example :- #anchor{font-size:14px;}
Question #20 - what property is used to set the color of a text?
When you use image maps, it can easily become confusing and difficult to determine which hotspots corresponds with which links. Using alternative text lets you put a descriptive text on each hotspot link.
Question #21 - what property used to align the text of a document?
HTML techniques sends ask for utilizing get a post strategy. GET post ask for information from the server and POST is utilized to submit information to the server.
Question #22 - What bullet types are available?
With ordered lists, you can select to use a number of different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.
Question #23 - What property is used to underline, overline and strike through text?
The text-decoration property is used to underline, overline, and strikethrough text.
The text-decoration property is used to underline, overline, and strikethrough text.
Question #24 - What property is used to capitalize text or convert text to uppercase or lowercase letters?
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
Question #25 - What property is used to set the text shadow around a text?
The text-shadow property is used to set the text shadow around a text.
Note: Only a member of this blog may post a comment.