1. What is CSS ?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

2. List down different version of CSS ?

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

3. What are the Advantage of using CSS ?

CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Offline Browsing − CSS can store web applications locally with the help of an offline catche.Using of this, we can view offline websites.The cache also ensures faster loading and better overall performance of the website.

Platform Independence − The Script offer consistent platform independence and can support latest browsers as well.

4. What does “Cascading” in CSS mean ?

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

5. List down different ways to integrate a CSS into a web page ?

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.

hello world!

2) Internal : By placing the code in a STYLE element within the HEAD element.

 

3) External: Place the CSS in an external file and link it via a link element.

 

6. What are the components of a CSS style ?

A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like

or

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.

 

 

7. What is type selector is CSS ?

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: #FCFCCF;
}

8. What is universal Selector ?

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type −

* {
   color: #FCFCCF;
}

9. What is descendant selector in CSS ?

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;
}

As shown above style applied to element – “” when it lies inside “

• ”.

 

10. What is wrapping in CSS ?

Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.

11. How to place text over image ?

To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.

12. Give some limitation of CSS.

• We cannot perform any logical operation
• Unable to deal with Data Base
• CSS cannot request a web page. 

13. How to rotate objects using CSS3 ?

object-rotation: 30deg; transform: rotate(30deg);
rotate-object: 30deg; transform: rotate-30deg-clockwise;

14. What is CSS filter ?

CSS filter is by far one of the most advantageous characteristic of this language. It enables the coders to write a totally different code or make changes to the existing design patterns that further allow the web browsers to receive the CSS coding specifications that they support, thereby disabling any instances of changes that the browser may make to the code.

15. What is ‘file splitting’ ?

File splitting allows you to split your big files into smaller ones for the sake of helping the program run faster and smoother. To be able to split files, you are going to need a CSS preprocessor.

The files can be split in any way that you want, but it is advisable to keep it tidy and think the splitting through. This will help you manage your website faster, without the need to wait for the excess style sheets to load.

16. Difference between relative and absolute in CSS ?

The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.

It means if we write left:10px then the result will be 10px far from the left edge of the parent element.

 

17. What is Id selector in CSS ?

Id selector is used to apply the style to an element based on the “id” of an element. For example,

#elementId {
 Color: #FCFCCF;
}

In the above code snippet all the elements having id – “elementId” will have the color yellow.

18. What are the benefits of SVG ?

SVG is an image format that is vector based. It’s an efficient format for that (small file sizes). You can scale them and they retain their sharpness at any size (bonus points for mentioning raster might have the upper hand at tiny sizes). You can affect parts of them with CSS and JavaScript as well as SVG specific filters that can do things like blurring.

19. What is the use and syntax of class in CSS ?

Class is a group of attributes and properties that uniquely identify style that can be attached to any element. It also defines instances for different element to which the same style can be attached.

The following example shows the use of class in CSS:

P {color:red} : It will display text color red in all paragraphs. This can be included with each element where the paragraph tag can be used. There can be given one style to one paragraph and another style to other paragraphs. A class may not have any association with the specific element. But any element with which the specific class is attached will have the same style.

For Example:

CSS

H1.prop1 {color: red} /* one class of P selector */
H2.prop2 {color: blue} /* another class of P selector */
.prop3 {color: green} /* can be attached to any element */

HTML

This paragraph will be red

This paragraph will be blue

This paragraph will be green

This list item will be green

 

20. What is class selector in CSS ?

In the above code snippet all the elements having id – “elementId” will have the color white.

.elemenetClassName {
color: #FCFCCF;
}

21. What is a parent-child selector ?

The parent-child selector as the name suggests is used for selecting the direct descendent of a parent element. This selector is represented by using the “~” tilde symbol between two selectors.

For Example:

body ~ li {background: blue; color: blue}

This specifies that the LI element will be declared the above style rules only when the LI would be a descendant of the BODY element.

body ~ li ~ em {background: red; color: black} 

In this example the em will be specified the above properties only when it is a descendant of li which itself is a child of body. The parent child selector can be used to specify a particular element when there are multiple instances of the same element.

22. What is an attribute selector ?

You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text −

input[type = “text”]
{
   color: #000000;
}

The advantage to this method is that the element is unaffected, and the color applied only to the desired text fields.

 

23. How to use grouping in CSS ?

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 –

h3,h4
{
 color:#FCFCCF;
}

24. What is the use of “float” property in CSS ?

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,

h2,h3
{
  float: right;
}

25. What is the purpose of % measurement unit ?

% – Defines a measurement as a percentage relative to another value, typically an enclosing element.

h2{ font-size: 16pt; line-height: 120%}

26. What is the purpose of cm measurement unit ?

cm − Defines a measurement in centimeters.

div {margin-top: 2cm;}

27. What is the purpose of em measurement unit ?

em − A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt.

p {letter-spacing: 10em;}

28. What is the purpose of in measurement unit ?

in − Defines a measurement in inches.

p {word-spacing: .5in;}

 

29. What is the purpose of ex measurement unit ?

ex − This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter.

p {font-size: 24pt; line-height: 3ex;}

30. What is the purpose of pc measurement unit ?

pc − Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.

p {font-size: 15pc;}

31. What is purpose of mm measurement unit ?

mm − Defines a measurement in millimeters.

p {font-size: 15mm;}

32. What is the purpose of px measurement unit ?

px − Defines a measurement in screen pixels.

p {margin: 20px;}

33. What is the purpose of pt measurement unit ?

pt − Defines a measurement in points. A point is defined as 1/72nd of an inch.

p {font-size: 18pt;}

34. What is the purpose of vh measurement unit ?

vh − 1% of viewport height.

h2 { font-size: 3.0vh; }

35. What is the purpose  of vmin measurement unit ?

vmin 1vw or 1vh, whichever is smaller.

p { font-size: 2vmin;}

36. What is the purpose of vw measurement unit ?

vw − 1% of viewport width.

h1 { font-size: 5.9vw; } 

37. What are browser safe colors ?

There is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette.

38. Compare RGB values with Hexadecimal color codes ?

A color can be specified in two ways:

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}

A mixture of red, green and blue represents a color. 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.

 

39. List down various fonts attributes ?

They are:

• Font-style
• Font-variant
• Font-weight
• Font-size/line-height
• Font-family
• Caption
• Icon

40. What is Pseudo – element ?

Pseudo-elements are used to add special effects to some selectors.  CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

EX- selector:pseudo-element {property:value;}
p: first-line {text-transform: lowercase;}

41. What is Box Model ?

A box model is something that allows a web designer/developer to create a layout to the page. This is high in accuracy due to the fact that you can edit right left up and down pixel by pixel. You also have options between margin and padding.

 

Content: Content is the actual image or the text. The content is the centre of the box model and is what it is created to serve. This is because without the content there would be no need to have any spacing or any borders because there would be no item for it to be based on.

Padding

Padding is the distance between the content and the border. This is to add inside space and make your spacing more accurate than just using margin which is the outside. An example of padding would be:

Border:

The border is the outline after the padding. Without padding, the border would take place around the content. It would look like this:

However, to move the border location you would need to add padding. This is due to the fact that padding is inside between the content and the border. If you wanted it to move further outside, you would need to add this line of code in: 

This makes the outcome look like this: padding: 20px

You are also able to change the border style, currently I have the double border style but that can easily be changed my altering the value. For example I could set it to dashed like this:

border: 3px dashed;

With the outcome of this

Margin:

Margins are used to add outside spacing after the border between objects. This is effective because it means that you are able to have some space before the next starts. Without margin you wouldn’t be able to create a spaced website that has borders because the borders would always be touching and padding would be on the outside.

An example of margin would be this:

 

 

42. What is the use of z-index in CSS ?

Z-Index is used to avoid the overlapping of the elements. Default value of z-index is 0 and it will take positive and negative values as well.

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.

43. List down various media type used.

Different media has different properties as they are case insensitive.

They are:

• Aural – for sound synthesizers and speech
• Print – gives a preview of the content when printed
• Projection- projects the CSS on projectors.
• Handheld- uses handheld devices.
• Screen- computers and laptop screens.

44. What is the difference between inline and block elements in CSS ?

Block elements will leave a space before and after the element and it uses full width available.

Eg:

Inline elements will take only the required width.

Eg: , 

45. List down main properties used in CSS style sheets.

Below are some of main properties in CSS style sheets –

• Text
• Font
• Border
• Padding
• Table
• List
• Background
• Margin

46. Difference between “display:none” and “visibility:hidden” in CSS ?

“Display:none” – This will just hide the element and does not take any space of the element.

“visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document.

47. Define image sprites with context to CSS.

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.

CSS coding:

img.add {
width: 60px;
height: 55px;
background: url (image.hello) 0 0;
}

48. How can the dimension be defined of an element ?

Dimension properties can be defined by:

• Height
• Max-height
• Max-width
• Min-height
• Min-width
• Width

49. Define float property of CSS.

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties.

50. List out the possible value of attributes – “position” in CSS ?

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

• Static
• Inherit
• Fixed
• Absolute
• Relative

51. How to give rounded corners in CSS3 ?

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

52. List down some of the properties of rounded corner in CSS3 ?

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

53. How to remove gap under an image.

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

Img { display: block;}

54. Syntax for adding multiple background image in CSS3.

Below is the syntax for adding multiple background images –

background-image: url(test1.gif), url(test2.gif);

55. How to create text shadow and box shadow in CSS3 ?

Box shadow can be created like this –

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

Text shadow can be created like this –

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

56. What is transition ?

CSS transitions allows you to change property values smoothly, over a given duration.

57. How to create transition effects using CSS3?

transition: width 2s; transition-duration: 2s;
transition-effect: width; alpha-effect: transition (width,2s);

58. List down the properties of transition in CSS3 ?

Below are the properties of transition in CSS3 –

• transition-delay
• transition-property
• transition-duration
• transition-time-function

59. List down types of gradients in CSS3 ?

Below are the types of gradients in CSS3 –

• Radial gradients
• Linear gradients

60. Explain opacity in CSS3 ?

Opacity is used to hide or show an element in CSS3. Value – ‘0’ to hide the element and value ‘1’ means showing an element.

Below is the sample for the same –

Hide Text

61. Difference between “cell-padding” and “cell-spacing” ?

“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.

62. Difference between “width:auto” and “width:100%” in CSS ?

“width:auto” reaches to the full width and it will subtract borders, paddings, margins etc. from the available space where as “width:100%” will force the element to be as wide as its parent element and will add additional spacing which can cause some problems.

63. Write down syntax to display an image in anchor tag in CSS ?

a{
      Background-image: url(Image.png);
}

64. How to change the color of anchor tag in CSS?

a:link {
color:  #FFFFFF;
}

65. List down some border properties in CSS ?

Below are the list of properties for border in CSS –

• Border-style
• Border-width
• Border-color
• Border-top-style
• Border-right-style
• Border-left-style etc.

66. Define short hand property in CSS.

Shorthand property is a property which can made up of multiple individual properties. Below is the sample example for the same –

h2
{
 font-weight: bold;
 font-style: italic;
 font-variant: normal;
 font-size: 20%;
}

As shown in the above example to reduce the size and complication of stylesheet file all the properties are merged so this is called shorthand property.

67. What is Tweening ?

It is the short form for in-betweening. It is the process of generating intermediate frames between two images. It gives the impression that the first image has smoothly evolved into the second one. It is an important method used in all types of animations.

In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.

68. Write a code to show usage of all background properties.

With the help of css there are several ways to change the background properties of an html page. For ex. the following code will place the background image at the center of the body element. Also the background would not be repeated and the scroll would be locked.

BODY
{
    font-family : “Verdana, Arial, Helvetica, sans-serif;
    background-image: url(images/background_image.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-color: #000;
    color : #FFF;
    margin: 20px;
}