CSS

Question 1

What is CSS? what are the different ways of styling an html file?

Answer 1

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML
Styling Html file:

• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default

inline style has the highest priority, and will override external and internal styles and browser defaults.

Question 2

What are the different CSS selectors? Write the syntax for each.

Answer 2

unique {

Three simple selectors

Element Selector
Id Selector
Class Selector

Priority of Selectors

Id > Class > Element

Element Example:

h1
{
Color: red;
}

id example:

Color: red;
}

class example:

.group {
Color: red;
}

Question 3

What is a psuedo-class? What is the syntax for selecting that?

Answer 3

A keyword added to a selector that specifies a special state of the selected element(s)

:hover - mouseover
:visited - visited link
:focus - element presently in focus
:enabled - element that can be clicked or selected
:disabled - element that cannot be clicked or selected

Question 4

Explain the concept of specificity and how it relates to styling conflicts

Answer 4

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Question 5

Explain the CSS box model

Answer 5

The CSS box model describes the rectangular boxes that are generated for elements

Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas

The CSS box model is responsible for calculating:
a)How much space a block element takes up.
b)Whether or not borders and/or margins overlap, or collapse.
c)A box’s dimensions.

Question 6

What features did CSS3 introduce?

Answer 6

rounded corners,
box shadows,
RGBA, HSL and HSLA colors,
box sizing,
Opacity,
CSS3 Gradients,
transitions,
transformations,
animations,
multi-column layout,
flex box,
CSS grids,
embedded fonts,
Responsive web design

Question 7

What is Bootstrap? What are some bootstrap classes you can use?

Answer 7

Bootstrap is a free front-end framework for faster and easier web development.

Some classes you can use are:

.btn-block Creates a block level button that spans the entire width of the parent element
.btn-danger Red button. Indicates danger or a negative action
.btn-default Default button. White background and grey border
.btn-group Groups buttons together on a single line

Question 8

How many columns make up the Bootstrap grid system?

Answer 8

twelve

Question 9

What is a CDN? what are the benefits?

Answer 9

Content Delivery Networks (CDN) accounts for large share of delivering content across websites users and networks across the globe.

• Faster content load / response time in delivering content to end users.
• Availability and scalability, because CDNs can be integrated with cloud models
• Redundancy in content, thus minimizing errors and there is no need for additional expensive hardware
• Enhanced user experience with CDNs as they can handle peak time loads
• Data integrity and privacy concerns are addressed

Question 10

When would you choose to use a CDN vs downloading and using the Bootstrap source code in your project?

Answer 10

You would choose to use a CDN when you want faster downloads without impacting the server and bandwidth.