INTERVIEW QUESTIONS » IMPORTANT css interview questions and answers for freshers

IMPORTANT css interview questions and answers for freshers

The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

The variations for CSS are:

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3

World Wide Web Consortium maintains the CSS specifications.

Using HTML we can create web pages.When we attach HTML with CSS than it may modify the design,page content,color,buttons etc on the HTML page.

Yes, it can be achieved by using a semicolon.

HTML sheet methods is collaborated with CSS and used accordingly.

While making the float declaration, 1 pixel is added every time it is used in the form of the border, and even more float is allowed thereafter.

Box shadow can be created like this –

box-shadow: 5px 5px 2px #fffff;

Control statements and external style sheets are used to overrule underlining Hyperlinks.

“font-style” property can be used for making the font oblique.

In CSS, you cannot revert back to old values due to lack of default values. The property can be re- declared to get the default property.

CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements.

here are mainly divided into three parts:

  1. border-width
  2. border-color
  3. border-style

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.

div
{
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}

“Cascading” refers to the cascading order in HTML document. This will sort the declared CSS in an order to avoid the conflicts.

Below are the different components of CSS styles –

  • Property
  • Selector
  • Value

Universal selectors is used to match any element types. Below is the example for the same.
For example:
*{
color: #FFFFFF;
}

“background-position” property can be used for controlling the position of the image in background.

Yes we can make a class selector for a particular element. Below is the example for the same –
h2.myelementClassName
{
color: #FFFFFF;
}

Type selector matches the element of specific type. To give the color for all inputs with text types, we can do like this.
input[type=”text”]
{
color: #b2bfc7;
}

Descendant selectors are used when any style to be applied to an element when the element lies inside some element.

For example
ul em
{
color: #FFFFFF;
}

It is not possible to control the styles for multiple documents from one file, using this method.

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

Grouping is mainly used for applying css style for multiple HTML elements and this can be done with single declaration. Example gien below is the example of the grouping –
h2, h3
{
color: #FFFFFF;
}

Child selectors can be used for applying the style for parent element and this will descend to the child elements.
Below is the example –
body > input
{
color: #FFFFF1;
}

Float property is used to allow an HTML element to be positioned horizontally. Float property can take the values either “left” or “right”.
For example:
h1, h2
{
float: right;
}

There are 3 choices, you can validate CSS code by using:

  1. url of the page.
  2. by uploading from your computer.
  3. inserting CSS code.

Below are the list of font attributes –

  • Font-Variant
  • Font-Family
  • Caption
  • Font-Style
  • Font-Size
  • Icon

Block elements will leave a space before and after the element and it uses full width available. Eg: <div>,
Inline elements will take only the required width. Eg: <span>

Below are the list of possible values for attribute – “Position” –

  • Static
  • Inherit
  • Fixed
  • Absolute
  • Relative

Property – “text-decoration” is used for underlining the link.

Yes we can give more than one css class to a HTML element.

Below is the sample style for adding the comments –

/* test comment */

Below is the line to set the wait cursor –

document.body.style.cursor = ‘wait’;

Pseudo classes will allow you to identify the HTML elements. These classes are specified with “:” and pseudo class and element name.
a:hover
{
font-color: green;
}

Properties can be a set in recommended places and the document modified for CSS to mix with user’s personal sheet.

Rounded corners can be given to any element using the property – “border-radius”.

Below are the properties of rounded corners –

  • border-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-top-right-radius
  • border-top-left-radius

For changing the anchor tag color using CSS –
a:link
{
color: #FFFFFF;
}

Word wrapping means breaking the long words to next line. Below is the example for that –
.wordwraptestclass
{
word-wrap:break-word;
}

@Import tag is used to at the top to avoid the rules to override.

We can combine the stylesheets using – “LINK” tag. Below is the syntax for the same –
<LINK REL=Stylesheet HREF=”myfirst.css”>
<LINK REL=Stylesheet HREF=”mysecond.css”>
<LINK REL=Stylesheet HREF=”mythird.css”>

Below are the two CSS list types –
• Ordered list (<ol>) – list items will be marked in numbers.
• Unordered List (<ul>) – list items will be marked in bullets.

Repetitive back ground images can be avoided using – “no-repeat”. Below is the syntax for the same –
Body
{
background-image: url(myImg.gif) no-repeat ;
}

Below is the sample code for aligning the paragraphs next to each other –
<div> style=”float: left; width: 50%”>MyParagraphText1 </div>
<div> style=”float: left; width: 50%”>MyParagraphText2 </div>

Text shadow can be created like this –
text-shadow: 5px 5px 2px #fffff;

Below are the properties of transition in CSS3 –
• Transition-delay
• transition-property
• transition-duration
• transition-timing-function

As images being inline elements are treated same as texts, so there is a gap left, which can be removed by:

CSS:
img
{
display: block ;

}

Below are the types of gradients in CSS3 –
• Radial gradients
• Linear gradients

Below are the list of text properties used in CSS3 –
• word-wrap
• word-break
• text-overflow

Rule, which is applicable in the entire sheet and not partly, is known as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.

You must take personal responsibility.
A hover element is activated when the user moves a pointer over the area where HTML coding is defined. This style is being extensively used for online advertising.

It is appended to;
#elementid:hover
{
color:red
}

You must take personal responsibility.
Use display:block style with span.
<span style=”display:block;” />

Below are the two things to be specified to create a transition effect –
• Duration of the effect
• CSS property to be added for an effect

You can float the HTML element by using CSS.
Example:
To set a DIV element or text/image inside an HTML element

Below are the list of properties of cursor –
• Pointer
• Help
• Wait
• Hand

Below are some of main properties in CSS style sheets –
• Text
• Font
• Border
• Padding
• Table
• List
• Background
• Margin

Below are the some of the properties in CSS3-
• Border Images
• New Web fonts
• Multi Column layout
• Box Shadows
• Text Shadows
• Transform property

Advantages are:
• Bandwidth
• Site-wide consistency
• Page reformatting
• Accessibility
• Content separated from presentation

Benefits:
• One file can be used to control multiple documents having different styles.
• Multiple HTML elements can have many documents, which can have classes.
• To group styles in composite situations, methods as selector and grouping are used.
Demerits:
• Extra download is needed to import documents having style information.
• To render the document, the external style sheet should be loaded.
• Not practical for small style definitions.

Contextual selector addresses specific occurrence of an element.
It is a string of individual selectors separated by white space (search pattern), where only the last element in the pattern is addressed providing it matches the specified context.

There are three ways to integrate CSS into a Web page.
1) Inline : HTML elements may have CSS applied to them via the STYLE attribute.
2) Embedded : By placing the code in a STYLE element within the HEAD element.
3) Linked/ Imported : Place the CSS in an external file and link it via a link element.

1. A web page with large number of images takes a longer time to load. Because each image separately sends out a http request.

2. The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.

CSS consists of two types of CSS rules, first is for ruleset which identifies the style and the selector.
It combines the style and the selector.
1. Ruleset is a combination of CSS rules,

For Example : h1{text-color: 15pt;}, where this is the CSS rule.
2. Ruleset is selector + declaration
For Example : h1 + {text-color: 15pt;}

1. It is possible to create classes for use on multiple tag types in the document.
2. Under complex situations, selector and grouping methods can be used to apply styles.
3. No extra download is required to import the information.

CSS filter solves designers and coders difficulties.
With the help of these filters one can write entirely different code or modify the existing design patterns so that browsers receive CSS specifications which they support, thereby not allowing the browsers to make or create any unnecessary changes.

• RGB: by itself, I don’t use RGB since I usually use a color picker giving me hex triplet. But when I need to edit the alpha-channel, I use RGBa of course.
• Hexadecimal: this is what I use the most in real projects. As said above, any web color picker on the internet will give you at least a hex code. It’s kind of the standard.
• Keywords: I use them either for demos when I don’t care much about the color I pick, or for greyscale like white, black and silver.
• HSL: I never use HSL because I’m not used to it. It’s a really really good representation of the RGB model but it doesn’t look very intuitive to me so I stick with RGB.

1. Visible: Allows the content to overflow the borders of its containing element.
2. Hidden: The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
3. Scroll: The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
4. Auto: The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

Different types media available in CSS:
• all: Suitable for all devices(default).
• aural: Intended for speech synthesizers.The styles should be used with speech synthesizers.
• braille: Intended for braille tactile feedback devices.The styles should be used with braille devices.
• embossed: Intended for paged braille printers.The styles should be used on paged braille printers.
• print: Intended for paged, opaque material and for documents viewed on screen in print preview mode.
• projection: Intended for projected presentations, for example projectors or print to transparencies.
• screen: Intended primarily for color computer screens.The styles should be used on color computer screens.
• tty: Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.The styles should be used on teletype style devices with a fixed-pitch character grid.
• tv: Intended for television-type devices.The styles should be used on television style devices, with low resolution, color and sound.

CSS gives you opportunity to create layers of various divisions.
The CSS layers refer to applying the z-index property to elements that overlap with each other.
The z-index property is used alongwith position property to create an effect of layers.
You can specify which element should come on top and which element should come at bottom.

CSS dimension properties allows us to set various dimension across the HTML elements which includes defining the height, width and space. Various dimension properties are: height, line-height, max-height, min-height, width, min-width and max-width. Each property will be dealt separately.
1.Height: The height property is used to set the height of a box.This property is used to set height of box or any other HTML element.
2.Width: The width property is used to set the width of a box.Width property is used to set width of box or any other HTML element, often used for rendering images. We use following properties for setting width.

em: A relative measurement for the height of a font in em spaces.
Percentage(%): Defines a measurement as a percentage relative to another value, typically an enclosing element.The percent unit is much like the “em” unit, save for a few fundamental differences.
Centimeters (cm): Defines a measurement in centimeters.

If we create superset of CSS, CSS2 than they have contain a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.
CSS3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate recommendations.

Using HTML we can create web pages.
When we attach HTML with CSS than it may modify the design,page content,color,buttons etc on the HTML page.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

1.Position-Relative: This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”.
2.Position-Absolute: This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
3.Position-Fixed: This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself.

Strict : This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
Transitional : This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
• Specify the name of the animation
• Specify the duration of the animation

The variations for CSS are:
• CSS 1
• CSS 2
• CSS 2.1
• CSS 3

World Wide Web Consortium maintains the CSS specifications.

• While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
• Physical tags are newer versions while logical tags are old and concentrate on content.

Control statements and external style sheets are used to overrule underlining Hyperlinks.

Yes, it can be achieved by using a semicolon.

In CSS, you cannot revert back to old values due to lack of default values.
The property can be re- declared to get the default property.

While making the float declaration, 1 pixel is added every time it is used in the form of the border, and even more float is allowed thereafter.

HTML sheet methods is collaborated with CSS and used accordingly.

You can float the HTML element by using CSS.
Example:
To set a DIV element or text/image inside an HTML element

CSS determines the concrete object size using these intrinsic dimensions, the specified size defined by CSS properties like width, height or background-size, and the default object size defined by the kind of property the image is used with:

• background-image: The size of the element’s background positioning area.
• list-style-image: The size of a character of 1em.
• border-image: The size of the element’s border image area.

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
One good usage is in using images for submit buttons on forms.

I. Auto: Shape of the cursor depends on the context area it is over.

.auto{ cursor:auto; }
II. Crosshair: A crosshair or plus sign
.croshair { cursor:crosshair; }
III. Default: An arrow.
.default{ cursor:default; }
IV. Pointer: A pointing hand.
.pointer{ cursor:pointer; }
V. Move: The I bar
.move{ cursor:move; }

1.A huge list of rules is defined for style sheets.
Each rule consists of selectors and declaration block.
2. A declaration block consists of declarations which can be defined and separated by using a semicolon within curly braces.
3.Also each declaration consists of a colon, a property and a semicolon.

A style, that helps in influencing CSS. E.g. FONT. They have corresponding values or properties within them, like FONT has different style like bold, italic etc.

1.It’s an alternative to graceful degradation, which concentrates on the matter of the web. The functionality is same, but it provides an extra edge to users having the latest bandwidth.
2.It has been into prominent use recently with mobile internet connections expanding their base.

As images being inline elements are treated same as texts, so there is a gap left, which can be removed by:
CSS: img { display: block ; }

When a set of images is collaborated into one image, it is known as ‘Image Sprites’.

As the loading every image on a webpage consumes time, using image sprites lessens the time taken and gives information quickly.
img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

A color can be specified in two ways:
1.A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #.
e.g.: g {color: #00cjfi}
2.A color is represented by a mixture of red, green and blue. The value of a color can also be specified.
e.g.: rgb(r,g,b): In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown.

CSS3 have new features like – Model, Selectors, Backgrounds, Text effects, Animators etc. which were not there in CSS.

• “Cell-Padding” – This used to leave the space between the content of cell and wall/border of the cell.
• “Cell-Spacing” – This used to specify the space between the cells.