CSS(Cascading Style Sheet)

1) What is CSS?

Ans)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.


2) What is the origin of CSS ?

Ans) Standard Generalized Markup Language marked the beginning of style sheets in 1980s.


3) What are the different variations of CSS ?

Ans)Different css variations are

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

    • 4) What are the limitations of CSS ?

    Ans) Limitations are:

  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible


    • 5) What are the advantages of CSS ?

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


    • 6) What are CSS frameworks?

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


    7) How block elements can be centered with CSS1?

    Ans) Block level elements can be centered by:

    The margin-left and margin-right properties can be set to some explicit value:

    BODY { width: 40em; background: fluorescent; } P { width: 30em; margin-right: auto; margin-left: auto }


    8) In how many ways can a CSS be integrated as a web page?

    Ans) CSS can be integrated in three ways:

  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The Head element can have a Style element within which the code can be placed.
  • Linked/ Imported: CSS can be placed in an external file and linked via link element.


    • 9) Who maintains the CSS specifications?

    Ans)World Wide Web Consortium maintains the CSS specifications.


    10)What benefits and demerits do External Style Sheets have?

    Ans) 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.


    • 11) What does CSS selector mean?

    Ans) 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.


    12) Discuss the merits and demerits of Embedded Style Sheets?

    Merits of Embedded Style Sheets:

  • Multiple tag types can be created in a single document.
  • Styles, in complex situations, can be applied by using Selector and Grouping methods.
  • Extra download is unnecessary.
    • Demerits of Embedded Style Sheets:
  • Multiple documents cannot be controlled.


    • 13) Differentiate logical tags from physical tags?

    Ans)Differences are:

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


    • 14) Enlist the media types CSS allows?

    Ans) The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.

    15) Differentiate Style Sheet concept from HTML?

    Ans) While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.


    16) Comment on the Case-sensitivity of CSS ?

    Ans) Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.


    17) Describe ‘ruleset’?

    Ans) Ruleset : Selectors can be attached to other selectors to be identified by ruleset. It has two parts: 1.Selector, e.g. R and 2.declaration {text-indent: 11pt}


    18) Define Declaration block?

    A catalog of directions within braces consisting of property, colon and value is called declaration block. e.g.: [property 1: value 3]


    19) Enlist the various fonts’ attributes?

    Ans) They are:

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

    • 20) Why is it easy to insert a file by importing it?

    Ans)Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:

    @import notation, used with <Style> tag.


    21)Differentiate Class selector from ID selector?

    Ans) While an overall block is given to class selector, ID selector prefers only a single element differing from other elements. In other words, ID are uniques while classes are not. Its possible that an element has both class and ID.


    22) Can more than one declaration be added in CSS?

    Ans) Yes, it can be achieved by using a semicolon.


    23) What is the usage of Class selector?

    Ans) Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. Syntax:

    Classname it can be A-Z, a-z or digits. .top {font: 14em ;}, class selector <Body class= “top”> this class is associated with element </body>


    24) What is Pseudo-elements ?

    Ans) 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.


    25) How to overrule underlining Hyperlinks?

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

    B { text-decoration: none; } <B href="career.html" style="text-decoration: none">link text</B>


    26) Can default property value be restored through CSS? If yes, how?

    Ans) 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.


    27) What happens if 100% width is used along with floats all across the page?

    Ans) 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.


    28) What is CSS Box Model and what are its elements?

    Ans)This box defines design and layout of elements of CSS. The elements are:

  • Margin: the top most layer, the overall structure is shown
  • Border: the padding and content option with a border around it is shown. Background color affects the border.
  • Padding: Space is shown. Background colour affects the border.
  • Content: Actual content is shown.


    • 29) Enlist the various Media types used?

    Ans) 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.


    • 30) What is contextual selector?

    Ans) Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For e.g.: TD P TEXT {color: blue}


    31) Compare RGB values with Hexadecimal color codes ?

    Ans) 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.


    32) Define Image sprites with context to CSS ?

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


    33) How can the dimension be defined of an element ?

    Ans) Dimension properties can be defined by: 1.Height 2.Max-height 3.Max-width 4.Min-height 5.Min-width


    34) Define float property of CSS??

    Ans) 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.


    35) What is graceful degradation?

    Ans) In case the component fails, it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.


    36) How does Z index function?

    Ans) 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.


    37) How can the gap under the image be removed?

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

    <div class = "dropdown"> <a data-toggle = "dropdown" href = "#">Dropdown trigger</a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div> If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href="#" img { display: block ; }


    38)How can backward compatibility be designed in CSS?

    Ans) HTML sheet methods is collaborated with CSS and used accordingly


    39) What is progressive enhancement?

    Ans) 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. It has been into prominent use recently with mobile internet connections expanding their base./p>

    40)Why is @import only at the top?

    Ans) @import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.


    41) How comments can be added in CSS?

    Ans) The comments in CSS can be added with /* and */.


    42)What is Inline style?

    Ans) The Inline style in a CSS is used to add up styling to individual HTML elements.


    43) Which among the following is more precedent: CSS properties or HTML procedures?

    Ans) CSS is more precedent over HTML procedures. Browsers, which do not have CSS support, display HTML attributes.


    44) Define property?

    Ans) 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.


    45) Define Attribute Selector ?

    Ans)It is defined by a set of elements, value and its parts.


    46)Are quotes mandatory in URL’s?

    Ans)Quotes are optional in URL’s, and it can be single or double.


    47)What is Alternate Style Sheet?

    Ans) Alternate Style Sheets allows the user to select the style in which the page is displayed using the view>page style menu. Through Alternate Style Sheet, user can see a multiple version of the page on their needs and preferences.


    48) What is bootstrap breadcrumb?

    Ans) Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy.

    A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css).


    49 )What is at-rule?

    Ans)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.


    50)How can CSS be cascaded to mix with user’s personal sheet?

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


    51) What is External Style Sheet? How would you link to it?

    Ans) External Style Sheet is the sheet which comprises of style information and can be connected with one or more HTML documents. With the help of External Style Sheet entire website can be formatted and styles just by editing one single file. The file is connected with HTML documents with the help of the LINK element which resides inside the HEAD element.


    52) What is Tweening?

    Ans) Also Known as in-betweening, it is the process of creating intermediary frames among two images to provide the appearance that the first image develops efficiently into the second image. It is a key process which is used in all types of animations. Refined animation software permits you to find particular objects in an image and describe how they will be able to move and change throughout the tweening process.


    53) What is Responsive Web design?

    Ans) Responsive Web design is the method that recommends that design and development should reply to the user’s activities and situation based on various components such as size of the screen, the platform and the orientation. The preparation comprises of a mix of flexible layouts and grids, images and an intellectual use of CSS media queries.


    54) What is the syntax to link external style sheet?

    <HTML> <HEAD> <LINK REL=STYLESHEET HREF="Test.css" TYPE="text/css"> </HEAD> </HTML>


    55) How embedded style can be linked with HTML documents?

    Ans) Embedded style can be implemented within HTML code. It is written using the


    56) Why imported is an easy way to insert the file?

    Imported style sheet permits you to import the files which are external or combine one style sheet with another. There can be created many files, different style sheets to have different functions. Import function gives the provision to combine many elements or functionality into one. The syntax to import any file is @import notation, which is used inside the <Style> tag. There is a one rule that implies that the last imported sheet will override the previous ones.

    The syntax is shown by coding as :

    <Link Rel=Stylesheet Href=”Main.Css” Type=”Text/Css”> <STYLETYPE=”text=css”> <!– @import url(http://www.xyz.css); …. your code –> </STYLE>


    57) What is the difference between class selectors and id selectors?

    Ans) An overall block is given to class selector while id selectors take only a single element differing from other elements.


    58) What is RWD?

    Ans) RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don't need to create a different page for each device.


    59) What are the benefits of CSS sprites?

    Ans) If a web page has large no. of images that takes a longer time to load because each image separately sends out an http request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.


    60) What is the CSS Box model and what are its elements?

    Ans)The CSS box model is used to define the design and layout of elements of CSS.

    The elements are:

  • Margin
  • Border
  • Padding
  • Content


    • 61) How to restore the default property value using CSS?

    Ans)In short, there is no easy way to restore to default values to whatever a browser uses. The closest option is to use the 'initial' property value, which will restore the default CSS values, rather than the browser's default styles.


    62) Explain the difference between visibility: hidden and display: none?

    Ans)Differences are:

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


    • 63) What do you understand by W3C?

    Ans) W3C stands for World Wide Web Consortium.


    64) What is universal selector?

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

    * { color: #000000; }


    65) What is Descendant Selector?

    Ans) Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag. ul em { color: #000000; }


    66) Can you make a class selector particular to an element type?

    Ans) You can make it a bit more particular. For example −

    h1.black { color: #000000; } This rule renders the content in black for only <h1> elements with class attribute set to black.


    67) What is a child selector?

    Ans) Consider the following example − body > p { color: #000000; } This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.


    68) What is id selector?

    Ans)You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule. #black { color: #000000; } This rule renders the content in black for every element with id attribute set to black in our document.


    69) Can you make a id selector particular to an element type?

    Ans)Yes,we can make it a bit more particular. For example − h1#black { color: #000000; } This rule renders the content in black for only <h1> elements with id attribute set to black.


    70) How to select all paragraph elements with a lang attribute?

    Ans) p[lang] : Selects all paragraph elements with a lang attribute.


    71) How to select all paragraph elements whose lang attribute has a value of exactly "fr"?

    Ans) p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".


    72) How to select all paragraph elements whose lang attribute contains the word "fr"?

    Ans) p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr"


    73) How to select all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-"?

    Ans) p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".


    74)How CSS style overriding works?

    Ans)Following is the rule to override any Style Sheet Rule − 1.Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file. 2.Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. 3.Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.


    75) What is the purpose of % measurement unit?

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

    p {font-size: 16pt; line-height: 125%;}


    76)What is the purpose of cm measurement unit?

    Ans)cm − Defines a measurement in centimeters.

    div {margin-bottom: 2cm;}


    77) What is the purpose of em measurement unit?

    Ans) 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.


    78) What is the purpose of ex measurement unit?

    Ans) 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.


    79) What is the purpose of in measurement unit?

    Ans)in − Defines a measurement in inches.

    80) What is the purpose of pc measurement unit?

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


    81) What is the purpose of pt measurement unit?

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


    82) What is the purpose of px measurement unit?

    Ans) px − Defines a measurement in screen pixels.


    83) What is the purpose of vh measurement unit?

    Ans)vh − 1% of viewport height.


    84) What is the purpose of vw measurement unit?

    Ans) vw − 1% of viewport width.


    85) What is the purpose of vmin measurement unit?

    Ans)vmin 1vw or 1vh, whichever is smaller.


    86)What are browser safe colors?

    Ans) 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.


    87) Which property is used to set the background color of an element?

    Ans)The background-color property is used to set the background color of an element.


    88) Which property is used to set the background image of an element?

    Ans) The background-image property is used to set the background image of an element.


    89) Which property is used to control the repetition of an image in the background?

    Ans)The background-repeat property is used to control the repetition of an image in the background.


    90) Which property is used to control the position of an image in the background?

    Ans) The background-attachment property is used to control the scrolling of an image in the background.


    91) Which property is used as a shorthand to specify a number of other background properties?

    Ans) The background property is used as a shorthand to specify a number of other background properties.


    92) Which property is used to change the face of a font?

    Ans) The font-family property is used to change the face of a font.


    93) Which property is used to make a font italic or oblique?

    Ans) The font-style property is used to make a font italic or oblique.


    94) Which property is used to create a small-caps effect?

    Ans) The font-variant property is used to create a small-caps effect.


    95) Which property is used to increase or decrease how bold or light a font appears?

    Ans) The font-weight property is used to increase or decrease how bold or light a font appears.


    96) Which property is used to set the color of a text?

    Ans) The color property is used to set the color of a text.


    97) Which property is used to set the text direction?

    Ans) The direction property is used to set the text direction.


    98) Which property is used to add or subtract space between the letters that make up a word?

    Ans) The letter-spacing property is used to add or subtract space between the letters that make up a word.


    99) Which property is used to control the flow and formatting of text?

    Ans) The white-space property is used to control the flow and formatting of text


    100) Which property of a hyperlink signifies an element that currently has the user's mouse pointer hovering over it?

    Ans) The :hover signifies an element that currently has the user's mouse pointer hovering over it.