CSS_AI_KIT

02 November 2023 20:05

What is CSS Specificity?

CSS Specificity is a set of rules used by browsers to determine which CSS

styles should be applied to an HTML element when there are conflicting style
rules. Specificity helps browsers decide the priority of CSS selectors, with
higher specificity selectors overriding lower specificity ones. CSS is used to
style an HTML document. It modifies color, fonts, layout, etc to make the web
page more visually appealing CSS helps us change colors, fonts, layout, etc.
of a website to make it look more attractive and organized.

What is a responsive web design?

Responsive web design is an approach to making web pages suitable for all
the devices. A responsive website will automatically adjust for different screen
sizes and viewports.

Can we add multiple class names to the HTML class attribute?

Yes, we can add multiple class names separated by space to the HTML class
attribute.

What is a Universal selector in CSS?

The universal selector in CSS selects all HTML elements in a document, and
allows you to apply styles globally. It is denoted by an asterisk or a Star
symbol. The universal selector selects all the HTML elements in an HTML
document. It is denoted using the Star symbol in CSS.

What are CSS text properties?

The CSS text properties are used to style the text within HTML elements on a
webpage, Some of the CSS text properties are: color font family text align text
decoration letter spacing text shadow text transform direction

How can we center the text horizontally using CSS?

One of the most common ways to center text horizontally using CSS is using
the text align property with the value center. To center text horizontally using
CSS, apply the text align property with the value center to the desired

New Section 3 Page 1

CSS, apply the text align property with the value center to the desired
element. This will align the text within the element's container.

What are the CSS Background properties?

The CSS background properties are used to style the background of HTML
elements on a webpage, Some of the CSS background properties are:
background color background image background position background size
background repeat background origin background clip background attachment

What is CSS?

CSS stands for Cascading Style Sheets. CSS helps us change colors, fonts,
layout, etc. of a website to make it look more attractive and organized.

How to add CSS to HTML?

CSS can be added to HTML documents in three ways: 1. Inline: Using the
HTML style attribute within individual HTML elements. 2. Internal Using the
HTML style element within the HTML head element. 3. External: Using the
HTML link element to link an external CSS file. Each method has its use
cases, with external stylesheets being the most recommended approach for
maintainability and separation of concerns. CSS can be added to HTML
documents in 3 ways. Inline Using the HTML style attribute in the HTML
elements. Internal Using the HTML style element in the HTML head element.
External Using the HTML link element to link an external CSS file.

Why do we need CSS?

CSS is used to style an HTML document. CSS helps us change colors, fonts,
layout, etc. of a website to make it look more attractive and organized. It
modifies color, fonts, layout, etc to make the web page more visually
appealing.

What are the units of measurement in CSS?

CSS units are used to define the size and spacing of elements on a webpage.
There are two types of units: absolute and relative. Absolute units are fixed
and don't change, like pixels that represent tiny dots on the screen. Relative
units change based on other factors, like the size of the parent element or the
browser window. Examples include percentages , em (based on font size),
and viewport units (based on the screen size).

How to link the CSS file to the HTML file?

New Section 3 Page 2

How to link the CSS file to the HTML file?

The HTML link element is used to link the CSS file to the HTML file. It should
be placed in the HTML head element. (or) To link a CSS file to an HTML file,
add a link element inside the HTML head element . Set rel attribute to
stylesheet and href attribute to the CSS file's location.

What is the Internal Style Sheet and External Style Sheet in CSS?

An internal style sheet is a block of CSS code placed directly within the HTML
file, using the style element. It is used to style a single HTML page. External
style sheets is a separate CSS file, linked to one or more HTML files, using
the link element. They are preferred to style multiple pages, making it easy to
maintain consistent styles across a website.

What are the CSS Styles?

CSS styles are a set of rules that determine the visual appearance of an
HTML document and they can be defined in a separate file with a .css
extension or embedded directly in the HTML code using the style tag. CSS
styles define the presentation of an HTML document and can be in a separate
file or embedded in the HTML.

How would you vertically center align an element using flexbox?

To vertically center align an element using flexbox, you can use the CSS
properties 'display: flex' and 'align-items: center'. The 'display: flex' makes the
container a flex container, and 'align-items: center' aligns the child elements
vertically in the center

How can you create masonary layout using CSS Grid?

Masonry layout can be created using CSS Grid by defining a grid container
and placing items in it. You can use grid-template-columns and grid-auto-rows
to define the grid structure. Then, use grid-column and grid-row to place the
items. Remember, CSS Grid allows for complex layouts with more control.

How can you reorder elements using Flexbox?

You can reorder elements using Flexbox by using the 'order' property. This
property allows you to change the order of individual flex items, regardless of
their source code order. The default value is 0, and you can use positive or
negative integers to change the order.

New Section 3 Page 3

How can you create a responsive grid layout using CSS grid?

You can create a responsive grid layout in CSS by using the grid-template-
columns and grid-template-rows properties. You can specify the number of
columns and rows and their sizes. For responsiveness, you can use media
queries to adjust the grid layout based on the screen size.

Explain Inline styles?

Inline styles are a way to apply CSS styles directly to an individual HTML
element using the style attribute. This approach allows developers to apply
specific styles that override external and internal styles, giving them more
control over the appearance of individual elements. Inline styles are CSS
property values that are directly applied to an HTML element using the HTML
style attribute.

What are CSS Selectors and what are the different types of it?

CSS Selectors are used to select the HTML elements that we want to style.
Common types of CSS Selectors are: 1. Simple Selectors Class Selector ID
Selector Type (tag name) Selector Attribute Selector Universal Selector
Pseudo class 2 Compound Selectors 3. Complex Selectors and many more.

Which has more specificity among Inline Styles and Class Selectors?

Inline styles have higher specificity compared to class selectors. When an

HTML element has both inline styles and class styles applied, the inline styles
will take higher priority due to their higher specificity. Inline Styles

What is the need for CSS Selectors?

CSS Selectors are used to select the HTML elements we want to style. CSS
selectors are used to apply styles to specific HTML elements on a web
page.There are a wide variety of CSS selectors like id, class, type, etc.

Explain the HTML id attribute and the class attribute?

The id attribute provides a unique identifier to an element that can be used by

CSS and JavaScript to style or modify it.The class attribute specifies one or
more class names to an element, which can be used by CSS and JavaScript
to style or modify the elements.

What CSS property values will be applied to an HTML element if it has both

New Section 3 Page 4

What CSS property values will be applied to an HTML element if it has both
HTML id and class selectors?

If an HTML element has both id and class selectors, all CSS properties from
both id and class selectors will be applied. If there are any CSS properties in
common between the id and class selectors, the id selector's values will take
precedence due to its higher specificity. All the CSS properties in both the id
and class selectors will be applied to the HTML element. If there are any CSS
properties in common between the id and class selectors, then CSS property
values in the id selector will be applied to the HTML element because of
higher specificity.

How do you change the style of an HTML element with and without a CSS
Class Selector?

Without CSS Class Selector Using inline styles and other CSS selectors like
type or tag name, id selectors etc. With CSS Class Selector In HTML,
specifying the HTML class attribute and its value as the class name to the
HTML element. In CSS, the . character, followed by the class name has to be
specified as a class attribute value to the HTML element.

How to style a particular HTML element?

We can style a particular HTML element with CSS in many ways. 1. Inline
styles: we can use inline styles to style a particular HTML element by adding a
style attribute to the element and defining the CSS property values within it. 2.
CSS Selectors: CSS selectors apply styles to specific HTML elements and
can be used in internal or external CSS.

What is the default font family?

The default font family used in web browsers can vary depending on the
browser and operating system being used. However, most modern browsers
have a default font family of sans serif The default font family used in web
browsers can vary depending on the browser and the operating system.
However, the most commonly used default font family is called sans serif.

What is the correct syntax for font family?

The CSS font family property specifies the font of an HTML element.

How do we underline the text in an HTML paragraph element?

you can use the CSS text decoration property with the value underline, to
underline the text in an HTML paragraph elements.
New Section 3 Page 5
underline the text in an HTML paragraph elements.

How to apply background color and color for the HTML main heading
element?

To apply a background color and color (text color) to the HTML main heading
element you can use CSS.

How do you prevent a background image from repeating in empty space?

To prevent a background image from repeating, you can use the CSS
property background repeat with the value 'no repeat We can use the CSS
property background repeat with the value no repeat to stop repeating the
background image.

Explain CSS background attachment property?

The CSS background attachment property specifies the behaviour of the

background image when the page is scrolled. Values of the CSS background
attachment property are: scroll background image scrolls along with the HTML
element. fixed background image doesn't scroll with the HTML element. It will
be fixed with the viewport.

What is a CSS Gradient?

CSS Gradient is a special type of background Image formed by the transition

between two or more colors. There are mainly two types of gradients:Linear
Gradient and Radial Gradient 1. Linear Gradient is the most basic type of
gradient. 2. Radial Gradient radiates out from a central point.

What is the CSS box shadow property?

The CSS box shadow property attaches one or more shadows to an HTML
element. It accepts either the none value that indicates no shadows or a
comma separated list of shadows ordered front to back. To define a box
shadow, we need to consider the following parameters: If only two values are
given, they are interpreted as offset x and offset y values. If a third value is
given, it is interpreted as a blur radius. If a fourth value is given, it is
interpreted as a spread radius. Optionally, the inset keyword can be used to
create an inner shadow. Optionally, a color value can be specified to
determine the shadow's color. Value Description none Default value. No
shadow is displayed h offset (Required) It specifies the horizontal distance. A
positive value puts the shadow on the right side of the box, a negative value
puts the shadow on the left side of the box v offset (Required) It specifies the

New Section 3 Page 6

puts the shadow on the left side of the box v offset (Required) It specifies the
vertical distance. A positive value puts the shadow below the box, a negative
value puts the shadow above the box blur It specifies the blur radius. The
higher the number, the more blurred the shadow will be spread The spread
radius. A positive value increases the size of the shadow, a negative value
decreases the size of the shadow color It specifies the color of the shadow
inset If not specified (default), the shadow is a drop shadow. If specified, the
shadow is an inset shadow (shadows are drawn inside the border, above the
background, but below content)

How to set the border style as dotted?

To set the border style as dotted using CSS, you can use the border style
property with the value dotted. The CSS border style property with the value
dotted sets the border style of an HTML element as dotted.

What are the parts of CSS box model?

The CSS box model is essentially a box that wraps around every HTML
element. It has four parts: content, padding, border, and margin. These parts
define the size, position, and spacing of an element on a web page. It consists
of four distinct parts, the content, padding, border, and margin. Content The
content of the box, where text and images appear. It represents the blue color
in the above image. Padding A transparent space between the content and
the border. It represents the green color in the above image. Border A
borderline that goes around the padding and content. It represents the yellow
color in the above image. Margin A transparent space outside the border. It
represents the orange color in the above image.

What are the CSS Box properties?

The CSS box properties define the layout and sizing of HTML elements. The
box model consists of five primary properties: Width Height Padding Border
Margin height width border style border width border color margin padding

How to hide the container div element on mobiles and show it on iPad and
desktop?

Using Media Queries or Bootstrap, we can hide the container div element in
mobile and show it on iPad and desktop.

How to align the two HTML container (div) elements in a single row?

There are two common ways to align two HTML container elements in a
single row. We can either make them inline elements by applying the CSS
display property with the value inline, (or) we can make them flex items by
New Section 3 Page 7
display property with the value inline, (or) we can make them flex items by
wrapping them in a parent element and applying the CSS display property
with the value flex.

What is CSS Flexbox?

Flexbox is a layout method that helps in arranging the HTML elements in rows
(horizontally) or columns (vertically).

How to align the HTML elements inside the container element in a row using
the CSS flexbox properties?

To align HTML elements in a row, we can make the container element a

Flexbox container. Specifying the flex direction as row to the HTML container
element.

What is the CSS display property in Flexbox?

The CSS display property in Flexbox is used to define the layout of child
elements. By setting the display property to flex for a parent element, it
becomes a Flexbox Container, and its direct child elements become flex
items, Css display property can be used in Flexbox to set the layout of child
elements. To achieve this , you can set the value flex for display property, and
the parent element becomes a Flexbox Container and its direct child elements
become flex items.

What are the CSS Flexbox properties?

CSS Flexbox properties are used to create flexible and responsive layouts.
display flex direction justify content align items flex wrap flex flow align content
align self flex grow flex basis flex shrink order, etc.

What is CSS flex property?

The flex property specifies how a flex item will resize within its flexbox
container. It combines three individual properties: flex grow, flex shrink, and
flex basis.

What is the CSS display property?

The CSS display property is responsible for determining the layout behavior of
HTML elements on a webpage we can use it to convert an HTML element into
an inline or block level element and control the layout of its child elements.
New Section 3 Page 8
an inline or block level element and control the layout of its child elements.
The values of the CSS display property are: block inline flex inline flex grid
none, etc.

What is a CSS Gradient?

CSS Gradient is a special type of background Image formed by the transition

between two or more colors. There are mainly two types of gradients:Linear
Gradient and Radial Gradient 1. Linear Gradient is the most basic type of
gradient. 2. Radial Gradient radiates out from a central point.

What is the CSS box shadow property?

The CSS box shadow property attaches one or more shadows to an HTML
element. It accepts either the none value that indicates no shadows or a
comma separated list of shadows ordered front to back. To define a box
shadow, we need to consider the following parameters: If only two values are
given, they are interpreted as offset x and offset y values. If a third value is
given, it is interpreted as a blur radius. If a fourth value is given, it is
interpreted as a spread radius. Optionally, the inset keyword can be used to
create an inner shadow. Optionally, a color value can be specified to
determine the shadow's color. Value Description none Default value. No
shadow is displayed h offset (Required) It specifies the horizontal distance. A
positive value puts the shadow on the right side of the box, a negative value
puts the shadow on the left side of the box v offset (Required) It specifies the
vertical distance. A positive value puts the shadow below the box, a negative
value puts the shadow above the box blur It specifies the blur radius. The
higher the number, the more blurred the shadow will be spread The spread
radius. A positive value increases the size of the shadow, a negative value
decreases the size of the shadow color It specifies the color of the shadow
inset If not specified (default), the shadow is a drop shadow. If specified, the
shadow is an inset shadow (shadows are drawn inside the border, above the
background, but below content)

How to set the border style as dotted?

To set the border style as dotted using CSS, you can use the border style
property with the value dotted. The CSS border style property with the value
dotted sets the border style of an HTML element as dotted.

What are the parts of CSS box model?

The CSS box model is essentially a box that wraps around every HTML
element. It has four parts: content, padding, border, and margin. These parts
define the size, position, and spacing of an element on a web page. It consists
of four distinct parts, the content, padding, border, and margin. Content The
content of the box, where text and images appear. It represents the blue color

New Section 3 Page 9

content of the box, where text and images appear. It represents the blue color
in the above image. Padding A transparent space between the content and
the border. It represents the green color in the above image. Border A
borderline that goes around the padding and content. It represents the yellow
color in the above image. Margin A transparent space outside the border. It
represents the orange color in the above image.

What are the CSS Box properties?

The CSS box properties define the layout and sizing of HTML elements. The
box model consists of five primary properties: Width Height Padding Border
Margin height width border style border width border color margin padding

How to hide the container div element on mobiles and show it on iPad and
desktop?

Using Media Queries or Bootstrap, we can hide the container div element in
mobile and show it on iPad and desktop.

How to align the two HTML container (div) elements in a single row?

There are two common ways to align two HTML container elements in a
single row. We can either make them inline elements by applying the CSS
display property with the value inline, (or) we can make them flex items by
wrapping them in a parent element and applying the CSS display property
with the value flex.

What is CSS Flexbox?

Flexbox is a layout method that helps in arranging the HTML elements in rows
(horizontally) or columns (vertically).

How to align the HTML elements inside the container element in a row using
the CSS flexbox properties?

To align HTML elements in a row, we can make the container element a

Flexbox container. Specifying the flex direction as row to the HTML container
element.

What is the CSS display property in Flexbox?

The CSS display property in Flexbox is used to define the layout of child
elements. By setting the display property to flex for a parent element, it
becomes a Flexbox Container, and its direct child elements become flex
items, Css display property can be used in Flexbox to set the layout of child

New Section 3 Page 10

items, Css display property can be used in Flexbox to set the layout of child
elements. To achieve this , you can set the value flex for display property, and
the parent element becomes a Flexbox Container and its direct child elements
become flex items.

What are the CSS Flexbox properties?

CSS Flexbox properties are used to create flexible and responsive layouts.
display flex direction justify content align items flex wrap flex flow align content
align self flex grow flex basis flex shrink order, etc.

What is CSS flex property?

The flex property specifies how a flex item will resize within its flexbox
container. It combines three individual properties: flex grow, flex shrink, and
flex basis.

What is the CSS display property?

The CSS display property is responsible for determining the layout behavior of
HTML elements on a webpage we can use it to convert an HTML element into
an inline or block level element and control the layout of its child elements.
The values of the CSS display property are: block inline flex inline flex grid
none, etc.

What is CSS display property with the value inline block?

The CSS display property with the value inline block is used to display the
HTML element as an inline block container. The inline block container doesn't
start on a new line but height and width can be applied to it.

What are the differences between display: none and visibility: hidden in CSS?

Display: none and visibility: hidden are both used to hide HTML elements, but
they work differently: Display: none completely removes the element from the
layout, so it takes up no space on the page. Visibility: hidden makes the
element invisible, but it still takes up space in the layout, as if it were still
visible. Display: none hides the HTML element and doesn't allocate space for
it in the layout, while visibility: hidden hides the element but allocates space
for it.

How can we layout the page for large screens and small screens?

New Section 3 Page 11

We can build different layouts for large screens and small screens using
Bootstrap Grid System, Media Queries, Flexbox, etc. or Use CSS media
queries to apply different styles for large and small screens. Set breakpoints
based on screen size. Design mobile first, then add styles for larger screens.

When do we use the CSS percentages?

To define the size of a child element relative to its parent element, we use
CSS percentages. or In CSS, percentages are used to set relative sizes and
positions for elements, making them responsive to different screen sizes.
They're commonly used for widths, heights, paddings, margins, font sizes, and
positioning, helping create fluid layouts that adapt to various devices.

What is the CSS border radius property?

The CSS border radius property specifies the roundness of the four corners of
an HTML element.

How to create a circular HTML button element using CSS?

To create a circular HTML button, set the same height and width for the button
and use the CSS property border radius with a value of 50%.

What is the sequence of CSS margin properties?

The sequence of CSS margin properties is margin top, margin right, margin
bottom, margin left.

What is the CSS box model?

The CSS box model is essentially a box that wraps around every HTML
element. It consists of margin, border, padding, and the actual content.
Content The content of the box, where text and images appear. It represents
the blue color in the above image. Padding A transparent space between the
content and the border. It represents the green color in the above image.
Border A borderline that goes around the padding and content. It represents
the yellow color in the above image. Margin A transparent space outside the
border.

What is the CSS box sizing property?

The CSS box sizing property sets how the total width and height of an

New Section 3 Page 12

The CSS box sizing property sets how the total width and height of an
element is calculated. The values of the CSS box sizing property are: content
box: (Default) The width and height properties include only content, but they
do not include the padding, border, or margin. border box: The width and
height properties include the content, padding, and border, but they do not
include the margin.

What is the order of specificity of CSS Selectors?

The CSS Selectors in the lowest to highest order by specificity are Universal
Selector type or tag name Selector class Selector id Selector

What are the advantages of CSS?

Advantages of CSS CSS helps keep the website's design consistent across
multiple pages. It allows you to create designs that adapt to different screen
sizes and devices. It offers various visual effects and animations without
JavaScript. Optional CSS can improve website performance by reducing
HTML file sizes and leveraging browser caching. CSS works well across all
major browsers, ensuring a consistent user experience.

New Section 3 Page 13