1) What is CSS?
The full form of CSS is Cascading Style Sheets. CSS is a styling language that is used to add styles on HTML elements. CSS is very popular in web designing to create the layout of web pages and it is also used to create responsive designs.
2) What are the advantages of CSS?
The advantages of CSS are:
i) CSS allows us to write less code.
ii) CSS is also used to create user-friendly web page layouts and to make easy to read format of the web pages.
iii) Using CSS we will write less code so it makes fast-loading web pages.
iv) In CSS we can write code once and then reuse the same on multiple HTML pages. Which saves a lot of time and effort.
v) If we want to make make a global change, then simply change the style in the CSS file, and all elements in all the web pages will be updated automatically.
3) What is a CSS selector?
CSS selector provides the link between the HTML tags and CSS styles. CSS selectors are like a string that identifies the element to which the style declaration applies. Different CSS selectors are:
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
4) What is a CSS framework?
CSS framework is a pre-planned library, which allows easier and more standards-compliant webpage styling, using CSS language. Some CSS frameworks are:
- Bootstrap
- Foundation
- Semantic UI
- Gumby
- Ulkit
5) What is the difference between CSS2 and CSS3?
The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements.
6) How can the background color of an element be changed?
The background-color property is used to specify the background color of the element.
7) What are the ways to integrate CSS as a web page?
There are three ways to integrate CSS in a web page.
i. Inline CSS: style attribute is used to add Inline CSS in HTML elements.
ii) Internal CSS: <style> tag is used to add internal CSS. And the style tag is placed within the head element.
iii) External CSS: CSS is placed in an external file and the CSS file is linked via link element.
8) Name some CSS-style components.
The component of CSS style are:
Selector: Selectors in CSS are the class name, id name, or element name that is targeted.
Attribute: It is the name of the attribute which you want to style. For example: color, background, position etc.
Value of Property: value that will be assigned to attribute.
9) What are the limitations of CSS?
Limitations of CSS are:
- Ascending by selectors in CSS is not possible
- There is no column declaration
- Styles, Rules, and targetting specific text are not possible
- We cannot request a webpage through CSS.
10) What is RWD in CSS?
Responsive Web Design is a web page creation approach that uses flexible images, flexible layouts, and CSS media queries. The responsive design approach aims to build web pages that detect the screen size of the visitor's device and changes the layout accordingly.
11) What is the difference between class selectors and id selectors?
CSS class selector is used to access the overall block which have the same class and id selector is used to prefer only a single element with a unique id.
12) What is the CSS Box model and what are its elements?
This box defines the design and layout of elements of CSS. The elements are:
Margin: Margin is used to remove the area around the border of any element.
Border: It represents the area around the padding of any element.
Padding: Padding is used to remove area around the content.
Content: It represents the actual content(text, image, etc.).
13) What is the float property of CSS?
The float property in CSS is used to move the image to the left or right along with the text to be wrapped around it. It doesn't change the property of the elements used before it.
14) Explain the difference between visibility: hidden and display: none?
display:none removes the element from the layout and changes the layout and on the other hand visibility:hidden hides the elements from the layout without changing the complete layout
15) What are CSS media queries and what are they used for?
Media queries are used to style the web pages for different screen sizes and devices. Media queries are used to create responsive designs, where the layout of a website or application can adapt and respond to different screen sizes,
16) What is the purpose of the z-index and how is it used?
The z-index property in CSS is used for ordering the different elements that can overlap each other. And the default value of z-index is zero. We can use positive and negative numbers as z-index value.
The element with higher z-index value has a higher position than other elements. z-index can have the following values:
- Auto: It sets the order to its parent.
- Number: Sets the order of the element by a number value.
- Initial: Set for a default value.
- Inherit: It inherit the property from its parent.
17) Name the property for controlling the image scroll in the background.
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Example for a fixed background-image:
18) Why is @import only at the top?
In CSS @import is preferred only at the top, to avoid any overriding rules.
19) Differentiate logical tags from physical tags?
- Logical tags are used to tell the meaning of the enclosed text.
- Physical tags are used to tell the browser that how to display the text enclosed in the physical tag.
20) What is Pseudo-elements ?
Pseudo-elements are used to add some special effects to some selectors. In some cases when extra styling is not possible for the elements, then CSS pseudo-elements are used. CSS pseudo-elements will allow extra mark-up to the document without disturbing the actual document.
21) What are the different variations of CSS?
Different variations in CSS are:
- CSS 1
- CSS 2
- CSS 2.1
- CSS 3
- CSS 4
22) Does margin-top or margin-bottom have an effect on inline elements?
No, margin-top or margin-bottom does not have an effect on the inline elements. Because inline elements flow with content on the page.
23) What CSS property is used for changing the font-face?
The font-family property is used for changing the font face that is applied to the element in the DOM.
24) Difference between CSS grid vs flexbox?
1. CSS Grid Layout is a two-dimensional system along with rows and columns. It is used for large-sized layouts.
2. Flexbox is a Grid layout with a one-dimensional system either within a row or a column. It is used for the components of an application.
25) What are the advantages and disadvantages of External Style Sheets?
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.
26) What is the embedded style sheet? And how is it used?
An embedded style sheet is one of the popular and mostly used CSS style specification methods with a markup language. We can embed the whole stylesheet using <style> tag in HTML.
27) What is cascading in CSS?
Cascading is defined as the process of style declaration and its weight that will help the browser in selecting the styling rules with respect to time.
28) How to center align a div inside another div?
A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.
29) What does the :root pseudo-class refer to?
The: root selector pseudo-class refers to the CSS selector level 3. It helps to target the highest-level parent element present in the DOM.
30) What does !important mean in CSS?
The style “!important” in the CSS has the highest precedence. Also, the cascaded property will be overridden with it.
