Like it, make it a habit


CSS, short for Cascading Style Sheets, is a Style sheet language used to describe the layout of documents written in markup languages such as HTML. It is one of the three main players for designing Web pages, along with HTML and Javascript.


CSS is designed to separate style from content, including layout, color, and font. This separation can improve the accessibility of content, provide more flexibility and control in the specification of style characteristics, enable multiple Web pages to share formats by specifying related CSS in a single.css file, and reduce complexity and duplication in structural content.

It has a simple syntax and uses a large number of English keywords to specify the names of various style attributes.

Now that we’ve covered the basics of CSS, let’s look at important CSS-BASED interview questions.

Question 1: What is CSS?

CSS (Cascading Style Sheets) is a style language that is simple enough for HTML elements. It is very popular in web design, and its application is common in XHTML.

Question 2: Why CSS?

CSS was developed in 1997 as a way for Web developers to design the layout of the Web pages they were creating. Its purpose is to allow developers to separate the content and structure of website code from the visual design.

This separation of structure and design allows HTML to do more than it originally did.

Question 3: What are the major versions of the CSS?

Different versions of CSS:

  1. CSS1
  2. CSS2
  3. This writing
  4. CSS3

Question 4: What are the components of CSS styles?

A style rule consists of three parts:



Selectors – Selectors are HTML tags that select content to style. It selects HTML elements based on their ID, class, and name.

Attribute – An attribute is an attribute of an HTML tag. In short, all HTML attributes are converted to CSS attributes.

Values – Values in CSS define a set of valid values for a CSS property.

Question 5: How many ways can CSS be integrated into a Web page

The CSS can be integrated in three ways

Inline: Used directly on HTML elements 

< p style = "see colour: skyblue;" >hello world</p>Copy the code
External: Create separate CSS files in your workspace and then link them in each Web page you create 

The < head > < link rel = "text/CSS" href = "your_CSS_file_location" / > < / head >Copy the code
  • Internal: The Head element of a Web page implements internal CSS in it. 
head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>Copy the code

Question 6: Who maintains the CSS specification?

The World Wide Web Consortium maintains the CSS specification.

Question 7: What does pseudo-element mean?

Pseudo-elements are keywords added to the selector that allow a style, a specific part of the selected element. CSS is used to apply styles in HTML tags, and it allows additional markup of documents without affecting the actual document. It can be used to:

  1. Styles the first letter, line, or element.
  2. Insert content
Grammar: 

Selector: :pseudo-element {Property1 :value; Property2 :value; }Copy the code

Question 8: What are the advantages of CSS?

The advantages of CSS are:

Consistency – CSS helps build a consistent framework that designers can use to build other sites. As a result, web designers become more efficient.

Easy to use – CSS is very easy to learn and simplifies web development. All the code is on one page, which means that lines of code can be improved or edited without repeated changes to multiple pages.

* Website speed * – Typically, a website can use up to 2 or more pages of code. But with CSS, this is not a problem. It only takes 2-3 lines of code, so the site database stays clean and eliminates any site loading issues.

Device compatibility – Responsive Web design is required because people use different types of smart devices to access the Internet. The role of CSS here is to make Web pages more responsive so that they display the same way across all devices.

Multi-browser support – CSS enjoys multi-browser support and is compatible with all major Internet browsers.

Repositioning – CSS allows you to define changes in the position of Web elements on a page. With its implementation, developers can place HTML elements where they like in order to align with the aesthetic appeal or other considerations of the page.

Question 9: What is a CSS gradient?

Gradient is the process by which we create intermediate frames between two images to get the look of the first image and then evolve into the second image, and it is mainly used to create animations.



10. What is CSS specificity?

CSS specificity is a score or level that determines which style declarations elements must use. There are four classes of CSS that can authorize selector specificity levels:



Inline style

ID

Classes, properties, and pseudo classes

Element and pseudo-element

11. What are the disadvantages of CSS

Disadvantages of CSS include:



Too many versions – There are many versions of CSS compared to other parameters such as HTML or Javascript -CSS1, CSS2, CSS2.1, CSS3. As a result, CSS becomes very confusing, especially for beginners.

Lack of security – Since CSS is an open text-based system, it has no built-in security system to prevent overwriting. With access to its read/write operations, anyone can change the CSS file and change the links.

Fragmentation – With CSS, you may not be able to use one browser in another. Therefore, Web developers must test compatibility by running programs on multiple browsers before a site goes live.

Complexity – Using third-party software such as Microsoft FrontPage can make CSS complex.

Question 12: What is RWD (Responsive Web Design)?

RWD (Responsive Web Design) technology is used to perfectly display design pages on every screen size and on mobile, tablet, desktop, and laptop devices, eliminating the need to create different pages for each device.



13. What are the benefits of CSS sprites?

The benefits of CSS sprites are:

  1. By combining various small images into one image, you reduce the load time of web pages.
  2. Reduce HTTP requests, thereby reducing load time.

14. What is a CSS context selector?

Context selectors, technically called descendant combinatorial selectors, are simply a set of whitespace delimited tag names. Used to select the label that is the descendant of the specified ancestor element. The tag is selected as long as it has such an ancestor “upstream” from its hierarchy. It doesn’t matter how many levels are separated from the tag to the context that is the ancestor.

15. What are progressive enhancement and stationary degradation?

Incremental enhancement is a concept that starts from the most basic usability, while ensuring the usability and accessibility of the site pages in low-level browsers, while gradually adding features and improving the user experience. In essence, some of our daily development habits, such as first writing pages in markup language and then using style sheets to control page styles, are concepts of progressive enhancement; Other more obvious moves include using new technologies such as HTML5 and CSS3 to enrich pages for advanced browsers.

The concept of smooth degradation is to first use the latest technology to build the best functionality and user experience for advanced browsers, and then gradually reduce the functionality and experience that cannot be supported by the limitations of lower-level browsers. In our daily development, a typical example of smooth degradation would be to write page code for Chrome first and then fix exceptions in IE or remove features for IE that could not be implemented.

So, both of these concepts have been around for a long time, but the terms “incremental enhancement” and “smooth degradation” have only become common in recent years. In our current HTML5 and CSS3 actual use, these two concepts are particularly important, how to ensure that the use of constantly changing new technologies to build in the mainstream browser have basic usability site, and for advanced browser experience enhancement, these are we need to clear ideas in the development process.

Question 16: How do we add ICONS to web pages?

We can use icon libraries such as font-awesome or Ali’s Iconfont to add ICONS to HTML pages. We must add the name of the given icon class to any inline HTML element. (< I > or
). ICONS in the icon library are scalable vectors that can be customized using CSS.

Question 17: Which property specifies the width of the border?

Border-width Specifies the width of the border.

Question 18: How do I distinguish physical labels from logical labels?

Physical tags are called presentation tags, while logical tags are useless for appearance. Physical tags are newer versions, while logical tags are older and content focused.

As mentioned, once our tag element is written, the browser will render the result, but it’s not just that simple 

// Physical elements <b> I want to bold with b tags </b> // logical elements </strong> I want to bold with strong tags </strong> // Both text are bold, and the visual effect is exactly the sameCopy the code
It is true that the text is bold, both of which achieve the purpose we want, but we ignore the question, since the B tag can be bold, so the strong tag is also bold, what is the meaning of existence? Now that the W3C defines two, what are the differences between them? What are the similarities between them?

The physical elements

A physical element, also known as an entity tag, is a physical behavior. For example, if I Bold a paragraph of text with the B tag above, it tells the browser to Bold the text. As you can see from the word Bold, it just means Bold, and does nothing else. To sum up, a physical element tells the browser how to display it.

Logic element

The logical element, Strong, can be seen from the English literal meaning of emphasis, so we use this logical element (as Strong) to convey a message to the browser to emphasize the importance of a certain text, indicating that this text is relatively important, but also conducive to search engine inclusion.

The Web standard insists that XHTML does not have a specific form, that “emphasis” can be used in bold or other ways, that you can use CSS to change the appearance of strong, and that you do not use the B tag for bold fonts. By default, the b tag and the strong tag emphasize the same effect. The strong tag can be defined as another style to emphasize the effect, but it is best to conform to the W3C standard, which advocates separation of content and style. Therefore, using the B tag for bold purposes is not recommended. Strong logical tags are more appropriate for XHTML documents from a meaningful and user experience perspective, while SEO is tailored for optimization.

Question 19: How do I define a pseudo class in CSS? What are they used for

CSS pseudo-classes are used to add special effects to some selectors. Syntax for pseudo-classes 

selector:pseudo-class{property:value; }Copy the code

20. What is the difference between CSS and SCSS?

The differences between CSS and SCSS are as follows:

  1. CSS is a style language for designing Web pages, and SCSS is used to compose CSS style sheets for browsers.
  2. SCSS provides variables that you can use to shorten your code, which is a big advantage over CSS.

21. What are the advantages and disadvantages of embedded stylesheets?

Advantages of embedded stylesheets:

You can create multiple label types in a single document.

In complex cases, styles can be applied using selectors and grouping methods.

No additional downloads required.

Disadvantages of embedded stylesheets:

You cannot control multiple documents.

Question 22: List the various media types used.

Different media are case insensitive, so they have different properties. They are:

Aural – Used on speech and audio synthesizers

Print – For printers

Projection – used for project presentations, such as slides

Handheld – Used for small handheld devices

Screen – Used on a computer monitor

23. What are the attributes of font?

Font-style

Font-variant

Font-weight

Font-size/line-weight

Font-family

24. What does “rule set” mean?

This directive tells the browser how to render a particular element on an HTML page. It consists of a selector and a declaration block that follows the rule set. Selectors can be attached to other selectors for identification through rule sets.

25. What is a CSS framework?

The CSS framework is a library that allows easier, more standards-compliant Web design using the CSS language. Most of these frameworks contain at least one grid and many more features and other javascript-based features. Some well-known CSS frameworks are: ACSS, Bulma, YAML, Foundation, etc.



Communication:



Like this article, trouble like, favorites, forward, in the process of learning the web front end, often because there is no information or no one to guide their own do not want to learn, so I specially prepared a group 545667817, supporting information can find management sister to receive! No matter which stage of learning partners can obtain their own corresponding information, like the collection into the group partners have the opportunity to obtain the entity web front-end learning books, thank you for your support!!