Locate Nearest Digital Marketing Institute
Call us Today for Demo
CSS interview questions and answers for students who have completed web development training or css training. All the interview questions for css are prepared by experienced professionals. with adequate knowledge of CSS and web development technologies.
Answer: 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.
Answer: Standard Generalized Markup Language marked the beginning of style sheets in 1980s.
Answer: The variations for CSS are:
CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4
Answer: 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
Answer: Advantages are:
Bandwidth
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation
Answer: It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.
Answer: cm − Defines a measurement in centimeters.
div {margin-bottom: 2cm;}
Answer: World Wide Web Consortium maintains the CSS specifications.
Answer: 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.
Answer: 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.
Answer: 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.
Answer: 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.
Answer: 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.
Answer:
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.
Answer: While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.
Answer: Ruleset : Selectors can be attached to other selectors to be identified by ruleset.
It has two parts:
Selector, e.g. R and
declaration {text-indent: 11pt}
Answer: 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.
Answer: A catalogue of directions within braces consisting of property, colon and value is called declaration block.
e.g.: [property 1: value 3]
Answer:
They are:
Font-style
Font-variant
Font-weight
Font-size/line-height
Font-family
Caption
Icon
Answer: 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.
Answer: 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>
Answer: 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.
Answer: Yes, it can be achieved by using a semicolon.
Answer: 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.
Answer: % – Defines a measurement as a percentage relative to another value, typically an enclosing element.
p {font-size: 16pt; line-height: 125%;}
Answer: 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.
Answer: 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.
Answer: 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.
Answer: 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.
Answer: 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}
Answer: 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 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
Answer:
Following is the rule to override any Style Sheet Rule −
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.
Any rule defined in <style>…</style> tags will override rules defined in any external style sheet file.
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.
Answer: There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
Embedded CSS − The <style> Element: You can put your CSS rules into an HTML document using the <style> element.
Inline CSS − The style Attribute: You can use style attribute of any HTML element to define style rules.
External CSS − The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document.
Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element.
Answer: Dimension properties can be defined by:
Height
Max-height
Max-width
Min-height
Min-width
Width
Answer: 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.
Answer: 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.
Answer: 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.
Answer: 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.
Answer: HTML sheet methods is collaborated with CSS and used accordingly.
Answer: p[lang|=”en”] – Selects all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“.
Answer: @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.
Answer: CSS is more precedent over HTML procedures. Browsers, which do not have CSS support, display HTML attributes.
Answer: The Inline style in a CSS is used to add up styling to individual HTML elements.
Answer: The comments in CSS can be added with /* and */.
Answer: It is defined by a set of elements, value and its parts.
Answer: 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.
Answer: 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.
Answer: Quotes are optional in URL’s, and it can be single or double.
Answer: 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.
Answer: In the past few years, browsers have come a long way. Modern browsers update automatically and provide pretty good feature coverage. There are still differences between browsers, and while some support certain features (like certain CSS styles), others don’t or display them differently.
Your biggest concern is legacy browsers. You may have seen jokes about Internet Explorer, and while the newer versions aren’t as bad, there are still a lot of people using older versions. These days it’s not uncommon to still support IE9, sometimes even IE8.
This can severely limit the kind of styles you can use, though most can be approximated using fallback styles. The @supports query in CSS can be very useful to scan if the user’s current browser has a certain feature. If they do, you can apply those styles without worry. If not, you can have some fallback styles as a backup.
For more information, have a look at the Mozilla documentation about @supports.
Answer: One of my favourite online tools is caniuse.com. It’s a website that tells you exactly which browsers support which features, including CSS and JavaScript, which can be extremely helpful in finding out what you can and can’t use!
Answer: Recently we’ve seen the rise of Flexbox and even more recently, CSS Grid. While these aren’t well supported in older browsers, support for them in newer browsers is continuously growing and now is the time to look into them and see if you can start using them. Make sure you check browser support!
Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.
CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!
CSS preprocessors
Answer: If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.
The main players are Sass (also referred to as SCSS), LESS and Stylus, although arguably Sass is the biggest. I’ll be using Sass in the following examples.
Answer: File splitting helps organize your CSS into multiple files, decreasing page load time and making things easier to manage. If you’re working with any of the preprocessors above, you can start splitting up your files.
How you decide to split them up is up to you, but it can be useful to separate files by component. For example, you can have all your button styles in a file called _buttons.scss or all your header-specific styles in a file called _header.scss. Then, in your main file, say _app.scss, you can import those files by writing @import ‘buttons’;
This way you can also create separate stylesheets for separate areas of your website, where you might not need all styles. For example, if you have a web app, you probably don’t need to load all styles when people land on your homepage, when they haven’t even logged into your app yet. Simply create another file and import only those styles you need.
Answer: The width property is used to set the width of a box.
Answer: The height property is used to set the height of a box.
Answer: The outline property is used to set all the outlining properties in a single statement.
Answer: The outline-color property is used to set the color of the outline.
Answer: The outline-style property is used to set the line style for the outline.
Answer: The outline-width property is used to set the width of the outline.
Answer: Yes! set the url as the source of a cursor image file.
Answer: help − A question mark or balloon, ideal for use over help buttons.
Answer: wait − An hour glass.
Answer: move or text − The ‘I’ bar.
Answer: pointer − A pointing hand (in IE 4 this value is hand).
Answer: default − An arrow.
Answer: crosshair − A crosshair or plus sign.
Answer: auto − Shape of the cursor depends on the context area it is over. For example, an ‘I’ over text, a ‘hand’ over a link, and so on.
Answer: The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
Answer: The padding serves as shorthand for the all the padding properties.
Answer: The padding-right specifies the right padding of an element.
Answer: The padding-left specifies the left padding of an element.
Answer: The padding-top specifies the top padding of an element.
Answer: The padding-bottom specifies the bottom padding of an element.
Answer: The marker-offset specifies the distance between a marker and the text in the list.
Answer: The list-style serves as shorthand for the styling properties.
Answer: The list-style-image specifies an image for the marker rather than a bullet point or number.
Answer: The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
Answer: The list-style-type allows you to control the shape or appearance of the marker.
Answer: The margin-right specifies the right margin of an element.
81. Which property specifies the left margin of an element?
Answer: The margin-left specifies the left margin of an element.
Answer: The margin-top specifies the top margin of an element.
Answer: The margin-bottom specifies the bottom margin of an element.
Answer: The margin specifies a shorthand property for setting the margin properties in one declaration.
Answer: The border-width specifies the width of a border.
Answer: The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
Answer: The border-color specifies the color of a border.
Answer: The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
Answer: The empty-cells specifies whether the border should be shown if a cell is empty.
Answer: The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
Answer: The border-spacing specifies the width that should appear between table cells.
Answer: The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
Answer: The :active signifies an element on which the user is currently clicking.
Answer: The :hover signifies an element that currently has the user’s mouse pointer hovering over it.
Answer: The :visited signifies visited hyperlinks.
Answer: The :link signifies unvisited hyperlinks.
Answer: The -moz-opacity property is used to set the opacity of an image.
Answer: The width property is used to set the width of an image.
Answer: The height property is used to set the height of an image.
Answer: The border property is used to set the width of an image border.
Answer: The text-shadow property is used to set the text shadow around a text.
# 138, 3rd Floor, 6th C Main Road, 4th Block, Jayanagar, Bengaluru, Karnataka 560011
099866 78681
info@idigitalacademy.com
Acquire IT and Digital Marketing Skills from Experienced Professionals and Real-Time Consultants. Demonstrate your skills on Live Projects and get placement support.
i Digital Academy © 2015-19 | All Rights Reserved
0 Comments