CSS Deck 1 Flashcards

Question

What is CSS overflow?

Answer 1

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. The overflow contains the following property: visible hidden scroll auto Visible: The content is not clipped and is visible outside the element box. 2. Hidden: The overflow is clipped and the rest of the content is invisible. 3. Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical. 4. Auto: It automatically adds a scrollbar whenever it is required. Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.

Answer 2

Float is a CSS property written in a CSS file or directly in the style of an element. The float property defines the flow of content. Below are the types of floating properties: Float type Usage float: left Element floats on the left side of the container float: right Element floats on the right side of the container float: inherit The element inherits the floating property of its parent (div, table, etc…) float: none Element is displayed as it is (Default).

Answer 3

Inline-block: This feature uses both properties: block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of the block. Basically, this will align the div both in the block and inline fashion.

Answer 4

CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purposes. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators. There are four types of combinators available in CSS which are discussed below: General Sibling selector (~) Adjacent Sibling selector (+) Child selector (>) Descendant selector (space) General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element. This can be used to select a group of elements that share the same parent element. Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is adjacent or the element that is next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag. Child Selector: This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent. Descendant selector: This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.

Answer 5

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. For Example, changing the style of an element when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS. Note that pseudo-class names are not case-sensitive. Syntax: selector: pseudo-class{ property: value; } There are many Pseudo-classes in CSS but the ones which are most commonly used are as follows: :hover Pseudo-class: This pseudo-class is used to add a special effect to an element when our mouse pointer is over it. The below example demonstrates that when your mouse enters the box area, its background color changes from yellow to orange. :active Pseudo-class: This pseudo-class is used to select an element that is activated when the user clicks on it. The following example demonstrates that when you click on the box, its background color changes for a moment. :focus Pseudo-class: This pseudo-class is used to select an element that is currently focused by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it. In the following example, the background color of the input field which is currently focused changes. :visited Pseudo-class: This pseudo-class is used to select the links which have been already visited by the user. In the following example, the color of the link changes once it is visited.

Answer 6

Pseudo Elements: Pseudo-element in CSS is used to add style to specified parts of an element. Example: Using style before or after an element. Syntax: selector::pseudo-element { property:value; } Use of Pseudo-Element: Below is some examples to describe the use of pseudo-element. ::before Pseudo-element: It is used to add some CSS property before an element when that element is called. ::after Pseudo-element: It is used to add some CSS property after an element when that element is called. ::first-letter Pseudo-element: It is used to make changes to the first letter of an element. ::first-line Pseudo-element: It is used to make changes to the first line of an element.

Answer 7

There are two types of Gradients: 1. Linear Gradients: It includes the smooth color transitions to going up, down, left, right, and diagonally. A minimum of two colors are required to create a linear gradient. More than two color elements can be possible in linear gradients. The starting point and the direction are needed for the gradient effect. Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, ...); CSS Radial Gradients: A radial gradient differs from a linear gradient. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified. Syntax: background-image: radial-gradient(shape size at position, start-color, ..., l

Answer 8

Yes, we can, a transformation modifies an element by its shape, size, and position. It transforms the elements along the X-axis and Y-axis. There are six main types of 2D transformations which are listed below: translate() rotate() scale() skewX() skewY() matrix()

Answer 9

Yes, it allows changing elements using 3D transformations. In 3D transformation, the elements are rotated along the X-axis, Y-axis, and Z-axis. There are three main types of transformation which are listed below: rotateX() rotateY() rotateZ()

Answer 10

Transitions in CSS allow us to control the way in which transition takes place between the two states of the element. The transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes and make the changes visually appealing to the user and hence, giving a better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties. There are four CSS properties that you should use, all or in part (at least two, transition-property and transition-duration, is a must),to animate the transition. All these properties must be placed along with other CSS properties of the initial state of the element: transition-property: This property allows you to select the CSS properties which you want to animate during the transition(change). Syntax: transition-property: none | all | property | property1, property2, ..., propertyN; transition-duration: This property allows you to determine how long it will take to complete the transition from one CSS property to the other. Syntax: transition-duration: time; Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes). transition-timing-function: This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc. Syntax: transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear| step-start|step-end; transition-delay: This property allows you to determine the amount of time to wait before the transition actually starts to take place. Syntax: transition-delay: time; Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes). The Shorthand Property You can combine all the four transition properties mentioned above, into one single shorthand property, according to the syntax given below. This saves us from writing long codes and prevents us from getting messy. Note the ordering of property, it has significance. Syntax: transition: (property name) | (duration) | (timing function) | (delay);

Answer 11

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one which contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur. The @keyframes rule: 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.

Answer 12

The box-sizing CSS property defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not. Syntax: box-sizing: content-box|border-box; Property Values: content-box: This is the default value of the box-sizing property. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width. border-box: In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Answer 13

Media query is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. Media queries can be used to check many things: width and height of the viewport width and height of the device Orientation Resolution A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied. Syntax: @media not | only mediatype and (expression) { // Code content }

Answer 14

It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within a container. Flexbox is different from the block model which is vertically biased and the inline which is horizontally biased. Flexbox was created for small-scale layouts and there’s another standard called grids which are geared more towards larger-scale layouts, It works similar to the way to Twitter bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with flexbox firstly create a flex container. To create a flex container set the display property to flex. Syntax: .main-container { display: flex; } Flex Properties: flex-direction flex-wrap flex-flow justify-content align-items align-content

Answer 15

It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning. Syntax: grid: none|grid-template-rows / grid-template-columns|grid-template-areas| grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Answer 16

Dimensionality and Flexibility: Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows. The grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex. Alignment: Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns. CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows. Item Management Flex Container is the parent element while Flex Item represents the children. The Flex Container can ensure balanced representation by adjusting item dimensions. This allows developers to design for fluctuating screen sizes. Grid supports both implicit and explicit content placement. Its inbuilt automation allows it to automatically extend line items and copy values into the new creation from the preceding item.

Answer 17

The External Style Sheet (using HTML Tag) is the best method that is used to link the element. Maintaining and re-using the CSS file across different pages is easy and efficient. The tag is placed in the HTML element. To specify a media type=”text/css” for a Cascading Style Sheet attribute which is used to ignore style sheet types that are not supported in a browser. @import rule: The @import rule is used to import one style sheet into another style sheet. This rule also supports media queries so that the user can import the media-dependent style sheet. The@import rule must be declared at the top of the document after any @charset declaration. Characteristics of @import: The @import at-rule is used to import a style sheet into an HTML page or another style sheet. The @import at-rule is also used to add media queries, therefore import is media-dependent. It is always to be declared at the top of the document. Syntax: @import url|string list-of-mediaqueries;

Answer 18

All CSS style sheets are case-insensitive, except for portions that are not under the control of CSS. For example, the case sensitivity due to values of the HTML attributes “id” and “class”, font names, and URIs lies outside the scope of this specification.

CSS Deck 1 Flashcards

(43 cards)