What is CSS
Answer: CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.
What are the advantages of CSS?
Answer:
- Bandwidth
- Site-wide consistency
- Page reformatting
- Accessibility
- Content separated from presentation
What is CSS Box Model?
Answer: Box model is used for design and layout. The CSS box model is a box that wraps around every HTML element.It consist of margin, border, padding, and content.
Border
Padding
content
What is CSS selector?
Answer: A CSS selector is a string or pattern which is used to select the element which you want to perform style. It is a part of CSS ruleset.
There are the following types of selectors in CSS.
- Element Selector
- Id Selector
- Class Selector
- Universal Selector
- Group Selector
Why do you need CSS preprocessors?
Answer: CSS preprocessors are the abstraction layer that lies over CSS. These special languages assemble down into CSS. You need them to manage CSS easily in the context of using components like variables and mixins to manage, say for example CSS vendor prefixes. You can utilize CSS preprocessors like Sass, Less and Stylus to do best practices like CSS compression and concatenating is an easier manner.
How do you differentiate CSS3 from CSS?
Answer: CSS3 is essentially the advanced version of the original CSS. Both CSS2 and CSS3 are segmented into modules whereas CSS is an unsegmented language. CSS3 has many additions that help to perform multiple tasks in the swiftest manner.
You can use CSS3 to handle media queries for responsive web design, which is not possible with CSS. You can use CSS3 for different browsers; CSS doesn’t support varied browsers. CSS3 is laced with several new features in a combinator, selectors, pseudo-elements and style properties. You can use new colors like RGBA, HSLA and HSL with CSS3.
What happens if you add float to sibling elements with the same direction?
Answer: If you float multiple elements in the same direction, they’ll stack alongside next to each other.
What is a pseudo-element? Show an example.
Answer: pseudo-elements are special selectors that start with a double-colon (::) syntax. They usually target specific parts of the document. For example ::before and ::after are used to insert content at the beginning or end of an element.
How do we typically center content inside a page?
Answer: We use two nested containers and then set margins on the inner container to position it within the outer one. For example:
.container {
max-width: 960px;
margin: 0 auto;
}
<body class="main">
<div class="container"></div>
</body> Explain the difference between :nth-child and :nth-of-type?
Answer: We use :nth-child to target an element position amongst its siblings starting from 0. For example :nth-child(0) will target the first child, :nth-child(2n) will target every second child, etc. We use :nth-of-type to target an element position amongst its siblings starting from 0 but also of the same type.
What is the default direction of the flex container?
Answer: By default, flex items align side by side, in a row from left to right.
How many axis does a flex-box layout contain?
Answer: Two axis. The main axis and the cross axis.
Name Some frameworks of CSS
Answer:
- Bootstrap
- Foundation
- Bulma
- Ulkit
- Semantic UI
Name the font attributes we use in CSS.
Answer:
- font-style
- font-variant
- font-weight
- font-size/ line-height
- font-family
- caption
- icon
What is Responsive Web Design?
Answer: Responsive web design aka RWD is a method of creating a webpage that can make a perfect display on every platform such as tablets, desktop, mobiles, and laptops. So we do not have to create web-pages for different devices and the display of the web page automatically change according to the display size of the device.
What @import does in CSS?
Answer: @import is used to import one CSS file to another CSS file
For example
@import "style.css"
Where we use the @import?
Answer: We use @import at the top to avoid the overriding of code.
What are comments in CSS and we use it?
Answer: The comment is the special statements in CSS which do not execute to write a comment we use /* comment */
