CSS Flashcards
What is the full form of CSS?
CSS stands for Cascading Style Sheets. It is a technology developed by the World Wide Web Consortium or W3C. It was developed to streamline the styling of webpages into a separate technology.
Why was CSS developed?
CSS was first developed in 1997 as a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow developers to separate the content and structure of a website’s code from the visual design, something that had not been possible prior to this time.
The separation of structure and style allows HTML to perform more of the function that it was originally based on — the markup of content, without having to worry about the design and layout of the page itself, something commonly known as the “look and feel” of the page.
What is the meaning of cascading? How do style sheets cascade?
CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. This was changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:
Elements – The same CSS style can be applied to multiple elements to achieve the same style.
Multiple Style One Element – Multiple styles can be applied to a particular HTML element to achieve a unique style.
Same style, Multiple Pages – The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.
What are the advantages of using CSS?
Following are the advantages of using CSS:
The style of several documents can be controlled from a single site by using them.
Multiple HTML elements can have many documents, where classes can be created.
To group styles in complex situations, selector and grouping methods are used.
What are the disadvantages of using CSS?
Following are the disadvantages of using CSS:
Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behaviour
Rules, styles, targeting specific text not possible
Name a few prominent CSS frameworks.
Below are the prominent CSS frameworks in the web development industry today:
Bootstrap
Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. Bootstrap 4 is the newest version of Bootstrap
Foundation
Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions.
Semantic UI
Semantic UI is a modern front-end development framework, powered by LESS and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience.
Ulkit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces
What is the difference between the usage of an ID and a Class?
ID – An ID is unique. A particular ID can be only assigned to a single element. IDs are used when specific styling is being tried to be achieved over a single element. Below is a pictorial example of how to use an ID.
Class – Just like the word suggests, a class is a collective way of targetting HTML elements for styling. Classes are not unique and multiple elements can have the same class. In fact, multiple classes can also be added to the same element to achieve the desired style and look. Below is an example of the usage of classes.
What is the RGB stream?
RGB is a system of representing a certain colour in CSS. There are three streams in this nomenclature of representing a colour, namely the Red, Green and Blue stream. The intensity of the three colours is represented in numbers ranging from 0 to 256. This allows CSS to have a wide range of colours spreading across the entire spectrum of visible colours.
These conclude the easy section. Things are going to get a much more particular now. It’s time for intermediate CSS interview questions.
What are the ways to assign a certain colour to an element in CSS?
CSS can assign a wide range of colours to elements using different notations. There are three notations as of now that are used that are explained below:
Hexadecimal notation
A colour in hexadecimal string notation always begins with the character “#”. After that, the hexadecimal digits of the colour code is written. The string is case-insensitive.
RGB functional notation
RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colours using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the colour is defined using the CSS function RGB(). This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.
HSL functional notation
Designers and artists often prefer to work using the HSL (Hue/Saturation/Luminosity) colour method. On the web, HSL colours are represented using HSL functional notation. The HSL() CSS function is very similar to the RGB() function in usage otherwise
Explain the CSS Box Model and its different elements.
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas.
The CSS box model is responsible for calculating:
How much space a block element takes up.
Whether or not borders and/or margins overlap, or collapse.
A box’s dimensions.The box model has the following rules:
The dimensions of a block element are calculated by width, height, padding, borders, and margin.
If no height is specified, a block element will be as high as the content it contains, plus padding.
If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
The height of an element is calculated by the content’s height.
The width of an element is calculated by the content’s width.
By default, padding and border are not part of the width and height of an element.
What is the z-index in CSS?
The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
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.
What are CSS Sprites?
CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). This is how you could implement it:
Use a sprite generator that packs multiple images into one and generates the appropriate CSS for it.
Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
To use that image, add the corresponding class to your element.
Mention a few benefits of using CSS Sprites.
CSS sprites come with their own advantages. Here are a few of them –
Reduce the number of HTTP requests for multiple images (only one single request is required per sprite sheet). But with HTTP2, loading multiple images is no longer much of an issue.
Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn’t be seen.
What are pseudo-elements in CSS?
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: …) without having to modify the markup (:before, :after).
:first-line and :first-letter can be used to decorate text.
Triangular arrows in tooltips use :before and :after. This encourages separation of concerns because the triangle is considered a part of styling and not really the DOM. It’s not really possible to draw a triangle with just CSS styles without using an additional HTML element.
How will you target an h2 and h3 with the same styling?
You can target multiple elements by separating the separators with a comma (,)
h2, h3 {
color: blue;
}
What is the float property used for in CSS?
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (in contrast to absolute positioning). Below is the usage of float
float: none;
float: left;
float: right;
What are the different modules used in the current version of CSS?
There are several modules in CSS. Below are a few of them:
Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface
What are the different media types allowed by CSS?
There are four types of @media properties (including screen):
all – for all media type devices
print – for printers
speech – for screenreaders that “reads” the page out loud
screen – for computer screens, tablets, smart-phones etc.
Here is an example of print-media type’s usage:
@media print {
h1 {
background-color: yellow;
}
}
