CSS Interview Questions & Answers Set – 1

Posted by , No Comments

cssWhat is CSS?

1. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.

2. CSS is a web standard that describes style for XML/HTML documents.

3. CSS is a language that adds style (colors, images, borders, margins?) to your site. It?s really that simple. CSS is not used to put any content on your site, it?s just there to take the content you have and make it pretty. First thing you do is link a CSS-file to your HTML document. Do this by adding this line:

<link rel=”stylesheet” href=”style.css”
type=”text/css”>

The line should be placed in between your <head> and </head> tags. If you have several pages you could add the exact same line to all of them and they will all use the same stylesheet, but more about that later. Let?s look inside the file ?style.css? we just linked to.

h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}

4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. This is also where information meets the artistic abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in wide variety of aspects.

What are Cascading Style Sheets?

A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a “cascading” of styles) when the document is rendered to form a single style rule for each element.

How do I center block-elements with CSS1?

There are two ways of centering block level elements:

1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em – 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:

TABLE {margin-left: auto; margin-right: auto; width: 400px;}
In most legacy browsers, a table’s width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element’s content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

If background and color should always be set together, why do they exist as separate properties?

There are several reasons for this. First, style sheets become more legible — both for humans and machines. The background property is already the most complex property in CSS1 and combining it with color would make it even more complex. Second, color inherits, but background doesn’t and this would be a source of confusion.

What is class?

Class is a group of 1) instances of the same element to which an unique style can be attached or 2) instances of different elements to which the same style can be attached.

1) The rule P {color: red} will display red text in all paragraphs. By classifying the selector P different style can be attached to each class allowing the display of some paragraphs in one style and some other paragraphs in another style.
2) A class can also be specified without associating a specific element to it and then attached to any element which is to be styled in accordance with it’s declaration. All elements to which a specific class is attached will have the same style.

To classify an element add a period to the selector followed by an unique name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters). (Note: text between /* and */ are my comments).

CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */

HTML
<P>This paragraph will be red</P>
<P>This paragraph will be blue</P>
<P>This paragraph will be green</P>
<LI>This list item will be green</LI>

It is a good practice to name classes according to their function than their appearance; e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2 allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P>This paragraph has three classes attached</P>

What is grouping ?

Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}

To reduce the size of style sheets and also save some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}

What is external Style Sheet? How to link?

External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css. <HEAD> <LINK REL=STYLESHEET HREF=”style.css” TYPE=”text/css”> </HEAD>

Is CSS case sensitive?

Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { …}
div.myClass { … }

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

Three selectors: h1, .warning and #footer, what they do ?

An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin.

Using a class is just as simple. When writing .your_class you style all tags with a class with the name ?your_class?. In the example above we have .warning which will style e.g. <div> and <em>, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links.

You need one more building block: the id. This time you style an element with the attribute ?id? set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id=”footer”>. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag.

Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id ?footer.

Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue.
there is a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML.

What are Style Sheets?

Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).

What is CSS rule ‘ruleset’?

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} – CSS rule (ruleset)
{text-indent: 10pt} – CSS declaration
text-indent – CSS property
10pt – CSS value

Related Jobs & Posts

C++ Programming tips &Technical Interview Que... 1.Can we declare a static function as virtual? Ans: No. The virtual function mechanism is used on the specific object that determines which virtual f...
HTML – Interview Questions & Answers Se... How can I check for errors? HTML validators check HTML documents against a formal definition of HTML syntax and then output a list of errors. Valid...
HTML Interview Question Answer Set – 1 What is HTML? Answer1 : HTML, or HyperText Markup Language, is a Universal language which allows an individual using special code to create web pag...
C++ Programming tips & Technical Interview Qu... 41.What is forward referencing and when should it be used? Ans: Forward referencing is generally required when we make a class or a function as a fri...
C++ Programming tips &Technical Interview Que... 31.Can I have a reference as a data member of a class? If yes, then how do I initialise it? Ans: Yes, we can have a reference as a data member of a c...
C++ Programming tips &Technical Interview Que... 21.How do I get the current position of the file pointer? Ans: We can get the current position of the file pointer by using the tellp( ) member fun...

Comments

comments