css Deck 2 Flashcards
What does CSS Animations allow?
CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, and end a number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times. We will be using a basic example such as the animation of a battery charging.
The @keyframes property has the option to divide the animation time into parts/percentage and perform an activity that is specified for that part of the whole duration of the animation. The @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.
What is @keyframes used for?
Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.
What are CSS counters?
Counters in CSS are basically variables that can be used for numbering and values of CSS counters may be incremented by CSS rules. For example, CSS counters can be used to increment the numbering of the headings automatically. In HTML, the <ol> tag is used to give the ordered numbers to list items but CSS contains a counter to give order elements in some other fashion.
CSS counters properties: CSS counters contains the following properties:
counter-reset: It is used to reset a counter.
counter-increment: It basically increments a counter value.
content: It is used to generate content.
counter() or counters() function: The value of a counter can be displayed using either the counter() or counters() function in a content property. These two functions basically used to add the value of a counter to the element.
Initialization of the CSS Counter: To use the CSS counter property firstly it must be created with the counter-reset property and the first step is resetting the counter. The counter by default initialized to a value 0(zero) with the counter-reset property.
Syntax:
counter-reset: myCounter;
Incrementation and Use of CSS Counter: To increment the counter use the CSS counter-increment property.
Syntax:
counter-increment: myCounter;
The counter() or counters() function in content is used to display the content in a particular order.
Syntax:
content: counter(myCounter);
What is meant by universal selector?
The * selector in CSS is used to select all the elements in an HTML document. It also selects all elements which are inside under another element. It is also called the universal selector.
Syntax:
- {
// CSS property
}
Whatnis RWD?
Responsive Web Design comprises two words i.e., responsive and web design. Responsive means to respond and web design means to design a website. Therefore, responsive web design generally means the website that responds to or resizes or adjusts itself depending upon the screen size it is being seen through. It automatically adjusts to fit the user’s screen whether it’s desktop, laptop, mobile, tablet, etc. It only uses one layout for a web page and it can be done either using CSS and HTML or CSS3 and HTML5.
What is the difference between class and id selector?
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.
Syntax:
#element_id_name{
// CSS properties
}
The class selector selects HTML elements with a specific class attribute. It is used with a period character “.” (full stop symbol) followed by the class name.
Syntax:
.element_class_name{
// CSS properties
}
What is CSS Image reflection?
The box-reflect property is used to create an image reflection.
Attributes:
below: to create a reflection below the original image
above: to create a reflection above the original image
left: to create a reflection on the left side of the original image
right: to create a reflection on the right side of the original image
How can we create multiple columns of text-like newspaper using CSS?
The multiple columns are used to create column layouts on the web pages. There are many column properties in CSS which are listed below:
–You can also used flexbox
column-count
column-gap
column-rule-style
column-rule-width
column-rule
column-span
column-width
How can we give a shadow effect to our text in CSS?
The approach of this article is to add a shadow using the text-shadow property in CSS. This property accepts a list of a comma-separated list of shadows to be applied to the text. The default value of the text-shadow property is “none”.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|
What is !important?
The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.
In other words, it adds importance to all the sub-properties that the shorthand property represents.
In normal use, a rule defined in an external style sheet which is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
Defining a rule with the !important attribute that discards the normal concerns as regards the later rule overriding the earlier ones.
So, it is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.
Syntax:
element {
color: blue !important;
font-size: 14px !important;
…
}
What is specificity in CSS?
When more than one set of CSS rules applies to the same element, the browser will have to decide which specific set will be applied to the element. The rules the browser follows are collectively called Specificity
Specificity Rules include:
CSS style applied by referencing external stylesheet has the lowest precedence and is overridden by Internal and inline CSS.
Internal CSS is overridden by inline CSS.
Inline CSS has the highest priority and overrides all other selectors.
Specificity Hierarchy: Every element selector has a position in the Hierarchy.
Inline style: Inline style has the highest priority.
Identifiers(ID): ID has the second-highest priority.
Classes, pseudo-classes, and attributes: Classes, pseudo-classes, and attributes have come next.
Elements and pseudo-elements: Elements and pseudo-elements have the lowest priority.
What are the attribute selectors?
The CSS Attribute Selector is used to select an element with some specific attribute or attribute value. It is an excellent way to style the HTML elements by grouping them based on some specific attributes and the attribute selector will select those elements with similar attributes.
There are several types of attribute selectors which are discussed below:
[attribute] Selector: This type of attribute selector is used to select all the elements that have the specified attribute and applies the CSS property to that attribute. For example, the selector [class] will select all the elements with the style attribute.
[attribute = “value”] Selector: This selector is used to select all the elements whose attribute has the value exactly the same as the specified value.
[attribute~=”value”] Selector: This selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
[attribute|=”value”] Selector: This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.
[attribute^=”value”] Selector: This selector is used to select all the elements whose attribute value begins with the specified value. The value doesn’t need to be a whole word.
[attribute$=”value”] Selector: This selector is used to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word.
[attribute*=”value”] Selector: This selector selects all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word.
What are Grouping and Nesting in CSS?
Grouping is used for giving the same properties to different selectors without repeating them. It is useful for reducing code by grouping selectors that have the same properties or values. You can separate them with a comma for grouping them.
Nesting can be used for nesting elements inside other elements.
What can you tell us about the CSS frameworks?
Read more: https://www.java67.com/2022/07/tailwind-css-interview-questions-answers.html#ixzz8O6YhPhOF
A CSS framework is basically a library that is made up of several CSS style sheets that can be used by web developers and web designers. It can be used for creating user-friendly and browser-compatible websites. It saves your time as you don’t need to begin from scratch. Some of the most popular CSS frameworks are Bootstrap, Foundation, Bulma, Tailwind CSS, Milligram, Gumby, Semantic UI, Materialize, and Ulkit.
