CSS interview questions must read

  1. 1.      What is the use of CSS?  CSS stands for Cascading Style Sheets. Setting up fonts and page styles in HTML is cumbersome. Instead, you can create external style sheets as CSS files. The style can then be applied to all pages of a Web site by editing a single page.
  2. 2.      How does CSS define a style?  The CSS syntax is selector {property:value; property:value;}. The selector is a typical HTML tag such as <h3> or <p>. The properties of the tag’s element might be color, size, position or font.
  3. 3.      How can you add comments for clarity?  Comments are bracketed as follows:  /* comment */. This allows the developer to explain more clearly what the style is.
  4. 4.      What are id and class selectors?  These are user-defined ‘names’ for elements, “id” for a single unique element; its name is preceded with a pound sign, such as #paral. A class selector sets a style for many HTML elements with the same class; its name is preceded with a period.
  5. 5.      How do you insert a CSS style into an HTML document?  There are three ways to do this. An inline style mixes the content with the presentation. This is not a preferred method, but has its uses, such as when a style is applied only once. An external style sheet is used when the style applied to all or many pages. Each page has a <link> tag to connect it to the external CSS file. An internal style sheet is used when only one document (page)  has its own unique style; the tag <style> is used in the head section of the HTML page.
  6. 6.      What is CSS background?  This is the definition of the background effects of an element, much like the stationery choice in Outlook. This is inserted in the body element.You can put a color or an image into the background. Colors can be defined by hex values, RGB values or simple color names like “blue”. Images can be repeated horizontally, vertically, or both, as in a fill property. An image can instead be positioned with a not-repeat command. You can also set whether a background image is fixed or scrolls with the rest of the page.
  7. 7.      In what ways can you set the style for text?  You can define the color and alignment of text. Yu can ‘decorate’ text – remove a link underline, blink, underline, overline, and draw a line through. You can change the case of text to all-upper-case, all-lower-case or capitalized words. And you can indent text. Other properties you can set are word spacing, white space within an element, unidcode-bidi, shadow, height, letter spacing and writing direction. Fonts can be set as generic (similar style) or font families (specific font names.) Fonts can be normal, italic or oblique, and you can specify a size for a font.
  8. 8.      How can you style links? Links can have any style. However, for the sake of clarity, they are usually blue and underlined. A link can be in any one of four states – unvisited, visited, when clicked, and when the mouse loves over it. Each of these states can have its own style. You might want to expand the size of the link when a mouse-over. And it’s standard to change a visited link to red.
  9. 9.      What about styling lists?  In HTML a list is either unordered (bulleted) or ordered (with numbers or letters). With CSS you can set different item markers for both kinds of lists, or even set an image as an item marker. These markers can be circles, squares, Roman numerals, and other styles. These values (type, position, image) can be combined into one property called the list-shorthand peoperty.
  10. 10.  What can you do with a table?  CSS allows you to make a table change from a grid to a visual representation – unique first-row type and background color, different colors for different (usually every other) rows, table borders, width and height, text alignment, and cell margins.

Some more CSS job interview questions and answers

Q1)What is CSS?

It stands for Cascading Style sheet which is used for styling HTML as it collect common properties for tag or group of tags and apply consistent look and behavior to them.

Q2)Why it’s necessary to Use CSS?

In general, CSS is used to separate content of web pages from design “avoid spaghetti code, the same as the servlet do with JSP in development”. That’s good for team work as the designed will not interfere with that who is writing the web page and scripts at all in addition to arrangement process.

CSS also essential to control the look of the web page without involving the web page itself in the design as all will happen is to reference the place of the css file in the web page.


Q3)How to apply styles to a page?

There are many ways to apply the style to the web page, like:

implicitly: can write the style code inside <style> tag inside the page

explicitly: by writing the style code in a separate file .css and link it using <link> tag

inline: by using style attribute


Q4)what is a class in css?

It’s a group of css attributes specified by a name and is applied to HTML tags. It’s identified by . Followed by class name and then the set of attributes that describe it.

Ex: .className {..,..,..;}


Q5)Talk about word – wrapping in CSS3

sometimes while writing in a container on a web page, the end of line terminated on a long unfinished word. What actually happen as it’s drawing that  it continue getting out the border.

It’s not cool at all and is considered to be a bug specially if the application is interactive “i.e. the user is writing on a container”

the solution was provided CSS3 in word-wrap property which wrap the long words to the next line.

It’s supported by all browsers , so it’s so good so far.

Q6)What is comments in css3? How to apply comments?

Comments are human readable instructions that are written by the designer in order to describe his code.

Comments are not interpretable by the browser.

It can be written inside /*    */.

Q7)is it possible to eliminate borders from a certain object in html page using css?

Yes , easily set border property of that object to none.


Q8) Is CSS Case sensitive?

No. except when using XHTML it become case sensitive for some browsers “not all”


Q9)Show an example of using shadows in CSS3

<!DOCTYPE html>






text-shadow: 5px 15px 2px threedhighlight;






<h1>OMG! it’s true shadow</h1>





Q10) is the linking method is the same when linking CSS with XML?

No, Completely Different


Q11) talk about responsive design

it’s a terminology that describes the ability of website of being displayed in the same consistent look in different devices like mobiles, desktops, laptops , …etc

it’s not stable yet since it differ from one device to another and requires much efforts from the designer to over come this problem.

With the help of responsive design, this problem is partially solved.

Leave a Reply

Your email address will not be published.