CSS3 Interview Questions
- 4.6 Rating
- 44 Question(s)
- 50 Mins of Read
- 5217 Reader(s)
Prepare better with the best interview questions and answers, and walk away with top interview tips. These interview questions and answers will boost your core interview skills and help you perform better. Be smarter with every interview.
- 4.6 Rating
- 44 Question(s)
- 50 Mins of Read
- 5217 Reader(s)
Beginner
CSS stands for Cascading Stylesheet. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to HTML documents or web pages. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
CSS3 extends CSS2.2 (or rather CSS 2) and it is the latest upgrade to the Cascading Style Sheets language. It brings a lot of new features and additions. Some of these features include rounded corners on HTML elements, shadows on divs and texts, gradient-fills, animations, as well as new layouts like multi-columns, flexible box or grid layouts.
Let’s have a look at everything new in CSS3.
- CSS3 Selectors - ^, $ and * are introduced. These selectors allow you to select elements having a value that starts with, ends with or has anywhere in it the value provided, respectively.
- Pseudo-classes - CSS3 introduces new pseudo-classes.
One is the :root selector, which allows designers to point to the root element of a document. In HTML, it would be <html>.
Similar to the :first-child selector, the :last-child was added. With it one can select the last element named of a parent element.
A new user interaction pseudo-class selector was added, the :target selector. It can be used to highlight a span or div when it is referred to within the page itself.
The negation pseudo-class selector, :not can be coupled with almost any other selector that has been implemented. - CSS3 allows us to define colors in new ways. With older versions of CSS, we used to declare colours using the hexadecimal format (#FFF, or #FFFFFF for white). It was also possible to declare colours using the rgb() notation, providing either integers (0–255) or percentages. Now, there are 147 new colors “names” added to the list of keywords for colors and along with rgb, other options are added that allow us to define semi-transparent colors.
- The new border-radius property lets you create rounded corners without the need for images or additional markup.
- CSS3 provides the ability to add drop shadows to elements using the box-shadow property. We can specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.
- CSS also allows us to add shadows to the text. This can be done using text-shadow CSS property. It adds shadows to individual characters in text.
- W3C added the syntax for generating linear gradients with CSS3.
- Radial gradients have been added in CSS3. Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.
- In CSS3, we can have multiple background images. There’s no need to include an element for every background image; it provides us with the ability to add multiple background images to any HTML element.
Using HTML5 and CSS3 provides advantages to businesses that develop and deploy web content and web applications, to create refined and accurate web pages and web systems that operate across devices, operating systems and web browsers. Write once, run anywhere. The plethora of devices, operating systems and screen sizes present numerous design, functional and layout considerations and problems if standards are not adhered to. Some of the benefits of using HTML5 and CSS3 standards are explained below.
- Adhering to standards ensures that the website developed will be of high quality and thus will be compatible across devices and platforms. This not only increases the reach of the website but also ensures that the website can be access, in its true form, on multiple platforms, browsers and devices.
- If the page does not follow the specified standards, the page ranking will not be good. Therefore, following standards not only gives better performance but in addition to that, also ensures that the page ranking is high making sure the search engines can easily read and index the pages. HTML5’s new elements can be relied on when sites are being re-indexed on search engines, as specific markup features of HTML5 are of value when search engine results pages (SERPs) are being calculated.
- In a similar way that ‘apps’ can be used offline, without an internet connection, HTML5 supports local storage of web application code and content, through the offline application cache. This is a tremendous advantage to businesses, like publishers, who can provide an offline web experience for readers on the move.
- Implementation of standards ensures that the website delivers same experience to the visitors/users on every browser and platform.
- Future development of HTML5 applications may lead to better access to business intelligence as all devices that are compatible with HTML5 will have the same ability to collect, collate and use data using standard (cross-device) browser-based analytics tools.
- According to TechCrunch nearly two-thirds of web video was already encoded for HTML5 in 2010, and one of the biggest benefits for marketers now is that HTML5 has native video support and can be directly built into the supporting browsers which allow faster, high-quality videos to be distributed.
- HTML5 supports Geolocation and now even Payments. These standards are used by developers to deliver content that makes sense to the users rather than making the same content available to everyone. Users can choose if they want to make their location information accessible to the website.
An HTML document can include an external stylesheet using the <link> tag. Here is an example,
<link rel="stylesheet" type="text/css" href="theme.css">
In the above snippet, the rel attribute specifies the relation between the HTML document and the file linked. Here the value stylesheet means that the refered file is a stylesheet for the HTML document. The type attribute also does the same thing. Finally, the href attribute defines the path to the actual file on the server. Here the filename is theme.css and the path is relative to the current HTML document.
Yes. We can include as many CSS documents within an HTML document as we want. However, it is advised to have as less files as possible. If there are multiple CSS files, they should be combined into one file and then included within the HTML document. More CSS files means more HTTP requests to the server which means that the server will face more load and the user will have to wait more for the page to be completely rendered.
When we included more than one CSS file in an HTML document, the files that are included in the document later will take preference. It means that if two files contain different values for the same styles targeting the same HTML elements, the CSS styles from the file that is included later will overwrite the styles from the former. This is called CSS or Style Overloading.
Inline CSS allows us to add CSS styles to only a particular element in the DOM. These CSS styles only affect the element that they are defined on in the HTML document. The term inline comes from the fact that the styles are written directly within the HTML tag using the style attribute.
Using the style attribute overrides the styles applied by all other CSS files on the same element. Inline CSS styles take precedence over all other styles at the cost of making the HTML document difficult to read and harder to maintain. An example of inline CSS is
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>
In the above example, using the style attribute, some styles are specified on the h1 element but it makes the document dirty. These styles will only affect this h1 element only and all other h1 elements will stay the way they are.
There are three ways of inserting a stylesheet into an HTML document:
- External style sheet
- Internal style sheet
- Inline style
With an external style sheet, you can change the look of an entire website by changing just one file. Each page must include a reference to the external style sheet file inside the <link> element which goes inside the <head> section.
An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page.
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read stylesheet will be used.
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)
A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
In absolute positioning, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none, which then causes that ancestor to take the place of the elements containing block. This can be used to create a "floating" element that stays in the same position regardless of scrolling.
Opacity can be specified using the newly added property called opacity that takes values between 0 and 1. The value 0 means that the element will be completely transparent and the value 1 means that the element will be completely opaque.
div {
opacity: 0.5;
}Internet Explorer, however, does not support this. So a filter has to be used as a polyfill.
div {
opacity: 0.5;
filter: alpha(opacity=50);
} Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled, the user can not display and view long lines that go outside the window boundary and thus become useless.
We can define a pseudo class by listing the selector followed by a colon and finally the pseudo class element. Following is an example.
div:hover {
color: red;
}Pseudo classes can be used to give elements special states—the most common example being a:hover, which is used to change the color of a link when a mouse hovers over it. Other uses include using distinct styling for visited and unvisited links and styling an element differently when focused.
A CSS selector allows us to select the required elements in an HTML document that need to be styled in a certain way. It is also referred to as a connection between the stylesheet and HTML files. There are different types of CSS selectors, however, the simplest ones are element, class and id selectors.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to phone, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
<link rel="stylesheet" href="styles.css" type="text/css"/>
CSS selectors are generally case-insensitive. This includes class and ID selectors.
The exclamation symbol (!) is generally used to denote a style as important. The styles that are marked as !important override the styles that are not. For example, if there are two CSS classes applied on the same element. Class A add a color red to the text but class B adds a green color. Now, generally, the style that is applied later will persist. But if either of the classes has the !important declaration will never be overridden by other styles.
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.
Yes. We can do that using the @import statement but it should be avoided.
ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's 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.
#abc123 {
color: red;
background: black
} A class selector is used to target a CSS class. It allows us to specify elements that have a specific class applied to them using the class attribute in HTML. For example, the following styles definition will only affect the first and the third divs but not the second one.
.red {
color: red;
}
<div class='red'>I will be red</div>
<div class='yellow'>I will not be red</div>
<div class='red'>I will also be red</div>As you can see in the above example, the class selector used a dot (.) before the name of the class to target to specify that it is a class selector.
Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you’ve selected, or you can use it to insert text or shapes before or after an element.
They always start with a double colon - although a single colon is still allowed for backwards compatibility - and they look like this:
p::first-line { ... }
span::first-letter { ... }
::selection { ... }
.header::after { ... }
.tooltip::before { ... }
There are a few attributes that apply to all tags, like class and id, but a lot of tags have their own ones. For example, input tags can have a type (text, number, radio, etc) and a tags can have href.
You can target elements with particular attributes by using square brackets: [attribute="value"].
For example, you can target all input fields that are of type radio like so:
input[type="radio"] {
background-color: #eee;
}
CSS uses the same "block comment" syntax as the C-like languages - you start a comment with /* , and end it with */ . However, CSS is missing the "line comment" syntax that those languages have, where everything from // to the end of the line is commented out.
Advanced
Just like HTML5 is the latest standard rolled out for HTML, similarly, CSS3 is the latest standard rolled out for CSS3 that carries many advanced features and it was under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities.
CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise.. Some of these are listed below.
- Mobile-first mentality
- Modular code
- Support for web fonts
- Faster development and load times
- New Color and Images Effects
- Bug fixes and improvements
!important makes sure that the style marked as important carries the highest specificity and cannot be overridden. This is tempting to use as sometimes things don’t work the expected way and you may want to force them to follow the rules you write. However, if you use it in too many places, you may soon find yourself in a mess that you cannot get out of.
Once you start using them, you’ll almost certainly get into a position where you need to override a rule marked as !important, which forces you to use another one. And so the cycle continues.
/* high specificity */
.large .navigation.navigation-large {
font-size: 2em;
}
/* will override the above, but it's dangerous! */
.navigation {
font-size: 3em !important;
} CSS variables or custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation. For example,
--main-color: black;
And are accessed using the var() function. For example,
color: var(--main-color);
You can use them without the need of a preprocessor. They cascade. You can set a variable inside any selector to set or override its current value. When their values change (e.g. media query or other state), the browser repaints as needed. You can access and manipulate them in JavaScript.
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.
In CSS, if a rule is more specific than other, it will override the less specific rule. The following list displays the order of specificity, from low to high:
- Type selectors (e.g. h1) and pseudo-elements (e.g. ::before)
- Class selectors (e.g. .nav-item), attributes selectors (e.g. [type="radio"]) and pseudo-classes (e.g. :hover)
- ID selectors (e.g. #example)
This is the reason it’s unwise to use IDs to target specific elements, as they are of higher specificity. Using it in too many places can backfire later on, where you end up trying to override those styles, which can be hard to do.
Also, the more selectors you use, the higher it ranks in terms of specificity, e.g.
button.primary[target="_blank"] is more specific than simply button.
/* low specificity */
button { ... }
/* higher specificity */
button.primary[target="_blank"] { ... } To target something that’s next to something else or target something only if it’s inside a particular container, there is a way.
If you’re wanting to style occurrences of a certain class inside another class, you can write the following:
.nav .nav-item { ... }
The above targets any .nav-item inside .nav.
If you only want those that are immediately inside the .nav as opposed to any level deep, you can add the > character, like so:
.nav > .nav-item { ... }
Want to target a button only if it’s next to another button? The + character has got you covered:
.button + .button { ... }
There are two ways to include a stylesheet in your web page. You can use the <link> tag:
<link rel='stylesheet' href='a.css'>
Or you can use the @import rule:
<style>
@import url('a.css');
</style><link> is preferred in all cases over @import, because @import blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
Sencha Animator
Adobe Edge
Tumult Hype (Mac only)
The advantages of Embedded Style Sheets are as follows.
- It is possible to generate classes for use on multiple tag types in the document.
- In comparison to In External Style Sheets, no extra download is compulsory to import the information.
The disadvantages of Embedded Style Sheets are as follows.
- Controlling the styles for multiple files from one file is not possible.
The advantages of external stylesheets are as follows.
- With the help of External Style Sheets, the styles of numerous documents can be organized from one single file.
- In External Style Sheets, Classes can be made for use on numerous HTML element types in many forms of the site.
- In complex contexts, Methods like selector and grouping can be implemented to apply styles.
The disadvantages of External Style Sheets are as follows.
- An extra download is essential to import style information for each file.
- The execution of the file may be deferred till the external style sheet is loaded.
- While implementing style sheets, we need to test Web pages with multiple browsers in order to check compatibility issues.
Depending on the project, we might be looking for a CSS developer who can take advantage of experimental non-standard features that are only available on certain platforms. Vendor prefixes are extensions to CSS standards that can be added to these features to prevent incompatibilities from arising when the standard is extended. CSS vendor prefixes for some common platforms are listed below.
-webkit - Android, Chrome, iOS, and Safari
-moz - Mozilla Firefox
-ms - Internet Explorer
-o - Opera
Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Here is an example.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}However, the above-defined background color will only be applied to the body element when the screen width is smaller than or equal to at most 600 pixel. If the screen or the view-port is wider than that, the style will be ignored.
This allows us to defined differential styles based on the size of the view-port. So, mobile users and desktop users can be presented with content appropriately styles for them.
Media queries are the core of responsive websites and web-interfaces.
A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors.
Like every programming language, pre-processors have different syntax, but hopefully, not too separated. All of them support classic CSS coding and their syntax are like classic CSS. SASS and Stylus have additional styles. In SASS, you can omit curly brackets and semicolon, whereas in Stylus, you can also omit colons. These are optional in both SASS and Stylus.
All the style definitions, whichever pre-processor you may choose, ultimately are compiled down to the vanilla CSS style definitions. Pre-processors only help you to write styles faster with a lot of complexities taken care of for you.
A print-stylesheet needs to make sure that the document looks clean and is easily readable when the document is printed. This requires some fanciness and beauty-elements to be taken away from the document to make it easier on the eyes when printed. Some most common things we do in a print-stylesheet are listed below.
Remove unwanted items - Usually it's just your organisation logo and page content that you'll want to appear on the printed version of the web page. You'll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details. You may also want to remove certain images and adverts, especially animated images as these won't make sense when printed.
Format the page - There's nothing worse than printing off a web page to find the last few words of each line cut off. It's also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.
Generally speaking, the three CSS commands you'll need are: width: 100%; margin: 0; float: none;
These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper.
Change the font - It is personal preference, but some print stylesheets do change the font size (often to 12pt) but this isn't generally a very good idea. If users increase text size on the screen then the text will print in this larger font size... unless you specify a fixed font size in the print stylesheet.
Links - Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the printout.
A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.
It's remarkable that so few websites use print stylesheets as print stylesheets enormously improve usability, especially for pages with a lot of content and they're phenomenally quick and easy to set up.
Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.
A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:
media="print" />
The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed.
- % - Defines a measurement as a percentage relative to another value, typically an enclosing element.cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
- 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.
- 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 x.
- in - Defines a measurement in inches.
- mm - Defines a measurement in millimeters.
- pc - Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.
- pt - Defines a measurement in points. A point is defined as 1/72nd of an inch.
- px - Defines a measurement in screen pixels.
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.
- Items display in a row (the flex-direction property's default is row).
- The items start from the start edge of the main axis.
- The items do not stretch on the main dimension but can shrink.
- The items will stretch to fill the size of the cross axis.
- The flex-basis property is set to auto.
- The flex-wrap property is set to nowrap.
The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.
.box {
display: flex;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three <br> has <br> extra <br> text</div>
</div>Consider the style and html above. We have only defined the minimal code required to configure a flexbox in CSS3. Here is the output.
Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class. Some of the pseudo classes are link, visited, hover, active, focus etc.
Not all operating systems and browsers have the same fonts installed. Web safe fonts are fonts that are commonly pre-installed on many computer systems, such as Arial and Times New Roman. In case the browser or operating system doesn’t recognize the first font you set (e.g. Ubuntu), you should choose a web safe fallback font to display (e.g. Arial), followed by a generic font family (e.g. sans-serif).
If your fallback font doesn’t display either, the browser can pick a generic font in the sans-serif family.
Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.
Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.
They all start with a single colon and look like this:
.link:hover { ... }
.link:active { ... }
.tab:first-child { ... }
.tab:last-child { ... }
.avatar:nth-child(2n) { ... }
Description
Useful links
- Data Science With Python certification in Atlanta
- Mobile Application Testing course in Kolkata
- Hbase certification in Sydney
- Postgresql classroom training in Los Angeles
- Perl 101 online training in Gurgaon
- Ruby Deep Dive online training in Dallas
- Flask classes in Singapore
- Mobile Ui Design Essentials And Ui Design Patterns classes in Chennai
- Big Data Analytics certification in Delhi
- Automation Testing Using Testcomplete course in San Jose