CSS questions with examples cover almost all of the basic and advanced CSS categories. CSS is one of the most important aspects of web development. It is a language for describing the appearance of web pages. As a result, it is critical to cover all of the CSS\’s basic and advanced features. You must learn CSS in order to become a good web developer and pass the web developer interview.
Q. What exactly is CSS?
CSS defines the style of an HTML webpage. It is a language that allows us to control the behaviour of an HTML webpage. It specifies how the HTML content will be displayed on the screen.
CSS governs the layout of many HTML web pages. CSS is an abbreviation for Cascading Style Sheet.
Q. List all of the CSS modules that are currently in use.
CSS has several modules, which are listed below:
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface.
Q. Differentiate between CSS2 and CSS3.
The following are the distinctions between CSS2 and CSS3:
- CSS3 is divided into two sections, each of which is referred to as a module. In CSS2, however, everything merges into a single document containing all of the information.
- CSS3 modules are supported by almost all browsers, whereas CSS and CSS2 modules are not supported by all browsers.
- Many graphics-related characteristics, such as border-radius and box-shadow, have been introduced in CSS3.
- A user can specify multiple background images on a webpage in CSS3 by using properties such as background-image, background-position, and background-repeat.
Q. Describe the various types of CSS.
CSS is classified into three types, as listed below:
- External: These are written in their own files.
- Internal: These are referenced at the top of the web page code document.
- Inline: These are written inside to tag.
Q. What is the purpose of the external style sheet?
Answer: An external style sheet is very useful because it contains all of the styling codes in a single file that can be used anywhere by simply referring to the link to that external style sheet file.
So, if we make changes to that external file, the changes will be reflected on the webpage. As a result, we can conclude that it is extremely useful and simplifies your work when working on larger files.
Q. What is the purpose of an embedded style sheet?
Answer: An embedded style sheet allows us to define styles in a single location in an HTML document.
We can generate multiple classes to use on multiple tag types of a web page using an embedded style sheet, and there is no additional downloading required for importing the information.
Q. How do I use a CSS selector?
Answer: We can choose which content to style by using the CSS selector, which acts as a link between the style sheet and the HTML files.
CSS selector syntax is \”select\” HTML elements based on their id, class, type, and so on.
Q. Describe the concept of Tweening.
Tweening is the process of creating intermediate frames between two images in order to achieve the appearance of the first image, which develops into the second image.
It is primarily used to create animation.
Q. Describe CSS image scripts.
CSS image scripts are a collection of images that are combined into a single image. While projecting multiple images into a single web page, it reduces the load time and number of requests to the server.
Q. Define the term Responsive web design.
Answer: It is a method in which we design and develop a web page based on user activities and conditions that are based on various components such as screen size, portability of the web page on different devices, and so on. It is accomplished through the use of various flexible layouts and grids.
Q. What exactly are CSS counters?
CSS counters are variables that can be incremented by CSS rules to keep track of how many times a variable has been used.
Q. What exactly is CSS specificity?
CSS specificity is a score or rank that determines which style declaration must be applied to an element. (*) While ID selectors have high specificity, this universal selector has low specificity.
CSS authorises the specificity level of the selector through four categories.
- IDs
- Inline style
- Classes, Attributes, and pseudo-classes.
- Elements and pseudo-elements.
Q. How do we calculate specificity?
To calculate specificity, we will begin with 0, then add 1000 for each ID, and then add 10 to the attributes, classes, or pseudo-classes with each element name or pseudo-element, and finally add 1 to them.
Q. How do we create a rounded corner with CSS?
Answer: Using the \”border-radius\” property, we can create a rounded corner. This property can be applied to any element.
Q. How will you insert border images into an HTML element?
Answer: We can use the CSS property \”border-image\” to set the image to be used as the border-image alongside an element.
Q. In CSS, what are gradients?
It is a CSS property that allows you to display a smooth transformation between two or more specified colours.
Gradients are classified into two types in CSS. They are as follows:
- The Linear Gradient
- Gradient Radial
Q. What exactly is CSS flexbox?
It enables you to create a flexible responsive layout structure without using any CSS float or positioning properties. To use CSS flexbox, you must first define a flex container.
Q. List all of the flexbox\’s properties.
Answer: The flexbox has several properties that are used in the HTML webpage.
They are as follows:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Q. How do I align an image vertically in a division that spans the entire width of the webpage?
Answer: We can use the syntax verticle-align: middle in the div1> element, as well as bind the two text spans around with another span and then use verticle-align: middle in the content #icon.
Q. What is the distinction between padding and margin?
Answer: The margin property in CSS allows us to create space around elements. We can even create space outside of the defined borders.
The margin property in CSS is as follows:
- margin-top
- margin-right
- margin-bottom
- Margin-left
As shown below, the Margin property has some defined values.
Auto – The margin is calculated using this property browser.
Length – It specifies the margin values in px, pt, cm, and so on.
% – It specifies the element\’s width%.
Inherit – We can inherit the margin property from the parent element using this property.
Padding is a CSS property that allows us to create space around an element\’s content as well as inside any known border.
CSS padding has additional properties such as,
- Padding-top
- Padding-right
- Padding-bottom
- Padding-left
Padding cannot contain negative values.
Q. What is the Box Model in CSS used for?
The box model in CSS is a box that binds all HTML elements and includes features such as margins, border, padding, and the actual content.
We will have the authority to add borders all around the elements if we use a box model, and we will also be able to define the space between the elements.
Q. How do we add icons to our website?
Answer: We can use an icon library such as font-awesome to add icons to an HTML webpage.
Any inline HTML element must contain the name of the given icon class. I or span>). Icons in icon libraries are vector scalable images that can be styled with CSS.
Q. What exactly is a CSS pseudo-class?
It is a class used to define a specific state of an HTML element.
This class can be used to style an element when a user hovers over it, as well as to style an HTML element when it receives focus.
Q. Explain the concept of CSS pseudo-elements.
It is a CSS feature that is used to style the specified parts of an element.
We can, for example, style the first letter or line of an HTML element.
Q. What exactly is CSS opacity?
It is the property that elaborates on an element\’s transparency.
We can use this property to make an image transparent, with values ranging from 0.0 to 1.0. The image is more transparent if the value is lower. IE8 and earlier browser versions can accept values ranging from 0-100.
Q. List all of the CSS position states.
In CSS, there are four position states, as shown below:
- Static(default)
- Fixed
- Relative
- Absolute
Q. What are CSS navigation bars?
Answer: Using navigation bars, we can transform a standard HTML page into a more user-specific and dynamic web page. Because it is essentially a list of links, the use of the ul> and li> elements makes perfect sense.
In CSS, what is the difference between relative and absolute?
The main distinction between relative and absolute is that \”relative\” is used for the same tag in CSS, which means that if we write left:10px, the padding will shift to the left by 10px, whereas absolute is completely relative to the non-static parent.
That is, if we write left:10px, the result will be 10px away from the parent element\’s left edge.
Q. Define \’important\’ CSS declarations.
Answer: An important declaration is a declaration that is more important than a normal declaration.
During execution, these declarations take precedence over less important declarations.
For example, if two users have important declarations, one of them will override the declaration of the other user.
As an example:
Body {background: #FF00FF !important; color: blue}
In this body, the background is more important than the colour.
Q. Describe the various cascading methods that can be used within the cascading order.
Answer: Cascading order is a sorting method that allows for a variety of other sorting methods:
a) Sort by origin: There are some rules that can provide an alternate way, which are as follows:
The increased weight of the user\’s style sheet will override the normal weight of a specific provider\’s style sheet.
The normal width of the provider\’s style sheet will override a specific user\’s stylesheet rules.
b) Sort by the specificity of the selector: The less specific selector is overridden by the more specific selector.
For example, a contextual selector is less specific than an ID selector, which is more specific, and the ID selector overrides the contextual selector.
c) Sort by specified order: This occurs when the two selectors have the same weight and other properties than the specification that will be seen for overriding.
Example:
If the style attribute is used for inline style, all other styles will be overridden.
Furthermore, if the link element is used for external styling, the imported style will be overridden.
Q. Distinguish between inline and block elements.
Answer: An inline element does not have a width and height element, nor does it have a line break.
For instance, em, strong, and so on.
Block element definition:
- They have a line break.
- They define width by specifying a container and also allow for height customization.
- It may also include an element that appears in the inline element.
Example:
width and height max-width and max-height\\smin-width and min-height\\shi (i=1-6)- heading element\\sp- Paragraph element.
Q. How does the concept of inheritance play a role in CSS?
Answer: Inheritance is the concept of a child class inheriting the properties of its parent class. It is a concept used in many languages and is a quick way to define the same property again.
In CSS, it is used to define the hierarchy from the top to the bottom. If the child uses the same name as the inherited property, the children\’s class can override it.
Q. Distinguish between the ID and the class.
Answer: ID and class are both used in HTML to assign values from CSS.
Please see the differences below:
- The ID is a type of element that uniquely assigns a name to a specific element, whereas the class is an element with a specific set of properties that can be used for the entire block.
- The ID can be used as an element because it can uniquely identify it, whereas class is defined to block elements and apply excessive tags wherever it is used.
- ID restricts the use of its properties to a single element, whereas class applies inheritance to a specific block or group of elements.