CSS Flashcards

Category sponsor

CSS (Cascading Style Sheets) is a style sheet language used to describe the appearance and formatting of a document written in a markup language, created by Håkon Wium Lie. It is a key technology of the World Wide Web, designed to separate the presentation from the structure of the document. CSS is characterized by flexibility and powerful styling capabilities, enabling precise control over the layout, colors, fonts, and animations of page elements. This language offers advanced selectors and properties, providing developers with tools to create responsive, visually appealing interfaces. CSS also supports modularity and reusability of styles, maintaining performance and enabling the creation of consistent designs across different browsers and devices.

Our flashcard app includes carefully selected CSS interview questions with comprehensive answers that will effectively prepare you for any interview requiring CSS knowledge. IT Flashcards is not just a tool for job seekers - it's a great way to reinforce and test your knowledge, regardless of your current career plans. Regular use of the app will help you stay up-to-date with the latest CSS trends and keep your skills at a high level.

Sample CSS flashcards from our app

Download our app from the App Store or Google Play to get more free flashcards or subscribe for access to all flashcards.

What are the differences between classes and IDs in CSS?

Classes and identifiers are CSS tools that allow you to style specific HTML elements. Although both methods for selection are almost identical, there are some differences.

1. Uniqueness: Classes are non-unique, which means you can use the same classes on many different elements. On the other hand, identifiers are unique to a page, which means that each identifier can only be used once per page.

2. Specificity: Identifiers are more specific compared to classes. This means that if styles are conflicting, identifier styles will override class styles.

3. JavaScript Application: Identifiers are often used to manipulate HTML elements using JavaScript, while classes are less often used for this purpose.

4. Scalability: Class styles can be re-used by many elements on the page. Identifiers are less flexible and are more likely to be used to style very specific sections.

Please note that one of the best practices is to use classes for CSS styles and identifiers for JavaScript.

How can a CSS stylesheet be linked to an HTML document?

A CSS stylesheet can be attached to an HTML document in one of the following ways:

1. **In-line style:** Styles are attached directly to HTML elements using the `style` attribute. For example:

<p style="color:red;">This text is red</p>

This method is rarely used, typically for "one-off" style changes.

2. **Internal CSS:** Styles are included within the `<style>` tags in the `<head>` section of the HTML document. Example:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

This method is useful for single-page HTML documents.

3. **External CSS:** The most commonly used method to attach CSS. The CSS sheet is written in a separate file (usually with a .css extension) and attached to the HTML document using a link in the `<head>` section. Example:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

This method is most commonly used as it allows for easy updating, maintenance, and sharing of style sheets across different HTML documents.

What are pseudo-classes in CSS and give an example of their use.

Pseudo-classes in CSS are keyword additions to selectors that define a particular state of a given element. They allow for the styling of HTML elements not only based on information contained directly in the code, but also on a certain context or state of the element.

For example, the :hover pseudo-class allows for visual changes to an element when hovered over with a mouse. Other useful pseudo-classes include :active (when the element is active or clicked), :visited (when a link has been visited), or :first-child (styles the first child of a given element).

The sample code shows how the :hover pseudo-class can be used to change the background color of a given element when it is hovered over with a mouse:

button:hover {
  background-color: red;
}

In this case, the button's background color will change to red when the user hovers over it with the mouse. Such an interaction would not be possible without the use of a pseudo-class.

What are the methods for positioning elements in CSS and what limitations do they have?

In CSS, we have several methods of positioning elements to choose from:

1. Static: This is the default setting in which elements stack one after the other as determined by the HTML structure. The position of the element is irrelevant and cannot be changed using the top, right, bottom, or left properties. The limitation is the lack of control over the placement of the element.

2. Relative: Allows you to change the position of an element relative to its original location. The position is determined by the top, right, bottom, left properties, but does not affect the layout of other elements. The limitation is that elements are simply shifted, not removed from the normal document flow.

3. Absolute: The position of an element is determined relative to the nearest higher structure element positioned differently than statically (relative, absolute, fixed, sticky). If there is no such element, the position is determined relative to the document itself. The element is removed from the normal document flow and does not affect the layout of other elements. The limitation is the need to control the positioning context.

4. Fixed: The position of an element is determined relative to the browser edges. Such an element does not move even when scrolling the page. It is removed from the normal document flow and does not affect the layout of other elements. The limitation is the possibility of obscuring other elements by the permanently placed one.

5. Sticky: This is a combination of relative and fixed positioning. The element behaves like a static one until its top edge reaches a specific place (e.g. the top edge of the screen), then the element behaves as if it was fixed positioned. The limitation is the necessity of browser support.