Basic CSS

Question 1

How do developers deal with style difference between browsers?

Answer 1

They often use what is called a CSS reset ( most popular of which is the Meyer reset) to zero out default styles and ensure a consistent user experience across browsers.

Another option is normalize.css, which is a CSS library that normalizes a subset of browser elements to be consistent between browsers.

Question 2

What is the difference between CSS and HTML?

Answer 2

Whereas HTML is about structure and content (aka, the “content layer”), CSS is about style and appearance (“presentation layer”).

Question 3

What is CSS?

What is its syntax?

Answer 3

CSS (Cascading Style Sheets) is the language used to control the presentation layer. We use it to control the visual aspects of the content on a page: from fonts to color to size to animations and more.

Syntax: Target a set of elements with a CSS selector, and set properties and values as required by your presentational goal.

Question 4

What is a ruleset?

Answer 4

Describes how input elements should look.

It consists of a selector, which is the elements that will be targeted by the declarations that follow.

Question 5

What is a declaration block?

Answer 5

Follows the selector in a ruleset. It is a set of declarations contained in curly brackets ( {…} ). Within the block, each line is a separate declaration.

Question 6

What is a declaration?

Answer 6

A declaration consists of a property and the value it is to be set to. The property name is followed by a colon, and the value is followed by a semicolon.

Question 7

How do you write comments in CSS?

Answer 7

/* this is a comment */

Question 8

T/F: When writing a ruleset, you want to keep your selectors as specific as possible.

Why?

Answer 8

FALSE.

Keeping selectors as non-specific as possible means that the settings can be reused on other targets if we decide they should have the same rules.

Question 9

What is a pseudoclass?

Answer 9

A pseudo-class is used to target a special state of the element/document.

i.e. div.foo:hover

Question 10

What is a pseudo-element?

Answer 10

A pseudo-element is used to style specified parts of the element/document.

i. e. p::first-letter
* *Note the double colon*

Question 11

How do you link an external styelesheet in an HTML page?

Answer 11

In the head:

<link rel=”stylesheet” type=”text/css” href=”./css/main.css”>

Question 12

What are engineers referring to with the saying “maintaining the separation of concerns” between HTML and CSS?

Answer 12

It’s best practice to AVOID inline styling and use HTML only for describing structure and content and to use CSS to describe presentation.

Question 13

Why should you avoid using inline styles?

Answer 13

Inline styles encode information about how an element should look directly into the HTML. This means you cannot reuse these styles on other elements. One of the advantages of CSS is reusable classes and classes are not possible with inline styles.

Question 14

What is the benefit of isolating presentation into our CSS?

Answer 14

By isolating presentation into our CSS, our code will be more maintainable and extensible (that is, easier to apply presentation rules we’ve set up in one place to new use cases).

Question 15

What would be a reason for using a style element?

Answer 15

Improving page load speed.

Question 16

What is the rule of specificity?

Answer 16

Style rules with higher specificity will trump those with lower specificity if there are conflicting values being set for some property.

Question 17

What is the cascade?

Answer 17

The cascade is a process browsers follow to determine which CSS values get applied for all the properties on a given element.

Question 18

The Cascade: To determine which property-value pairs to apply to a particular element, what does the browser do?

Answer 18

• Determines which rules apply to the element.
• Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment).
• Takes all rulesets that have same origin and importance and sorts them by selector specificity
  .
• If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the ruleset that was declared last.

Question 19

What does the keyword !important allow you to do?

Answer 19

CSS allows you to supply the keyword !importantin order to make a rule that might otherwise be lower in the cascade override others.

Try to avoid using it in your CSS.

There are rare occasions where it’s the right move, but usually, if you have to use !important, it’s a sign that there are problems with the application of your style rules (for instance, you may just need to use a more specific selector).

Question 20

Describe the box model:

Answer 20

The basic idea is that most elements on a web page are really rectangular boxes, even if they appear to be a different shape.

The total space taken up by an element is determined by its width, height, padding, border, and margin, as illustrated below:

Mother Bakes Perfect Cookies

Margin, Border, Padding, Content

Question 21

Given the box model, how do you calculate the measurements for an element?

Answer 21

Add width, plus 2x padding, plus 2x border, plus 2x margin.

Question 22

What does the box-sizing property do?

Answer 22

To have the box model respect the widths we explicitly set, we can use the box-sizing CSS property.

We set its value to border-box.

By putting the following ruleset in your CSS, you can make border-boxthe default for all elements:

* { box-sizing: border-box; }

Question 23

What are webfonts?

Answer 23

To use any font beyond web safe fonts, you have to use webfonts. Webfonts are fonts that you load in the browser using HTML and then can reference in your CSS.

Question 24

Name 8 common selector types. Give examples.

Answer 24

• Element selectors (e.g., p {…})
• Combination selectors (e.g., .foo.bar {…})
• Multi selectors (e.g., .foo, .bar {…})
• Descendant selectors (e.g., .foo li {…})
• Direct child selectors (e.g., .foo > li {…})
• Before and after pseudo-elements selectors (e.g., li::before {…})
• Anchor pseudo-classes (e.g., a:hover {…})
• Attribute selectors (e.g., input[type=”text”] {…})

Question 25

What are **element** selectors?

Answer 25

The element selector just consists of the element you want to target.

Question 26

What are **combination** selectors?

Answer 26

Sometimes to implement a design, you'll need to target elements that have two or more classes, for instance. The rule is: if an element is part of the target, put it first. Then, chain together the classes you want to target. i.e. p.foo.bar { /\* make some rules \*/ }

Question 27

Describe **multiple** selectors.

Answer 27

To target multiple selectors with the same ruleset, just separate your selectors with commas. i.e. .foo, .bar, .bizz.bang { /\* make the rules \*/ }

Question 28

What are **descendant** selectors?

Answer 28

Descendant selectors target children of the parent element whether they're immediate children or further down the hierarchy. i.e. aside p { /\* make rules \*/ }

Question 29

What are **child** selectors?

Answer 29

Sometimes we need to target only elements that are direct children of an element. For that we can use the direct child selector: i.e. aside \> p { /\* make rules \*/ }

Question 30

What do the **::before** and **::after** pseudo-elements allow you to do?

Answer 30

The ::before and ::after pseudo-elements allow you to render content just before or after your element. Writing ::before and ::after style rules can be a good way to handle repeated visual content that surrounds an element.

Question 31

What are the five important **anchor pseudo-classes**?

Answer 31

**a:link** { /\* unvisited link \*/ } **a:visited** { /\* visited link \*/ } **a:hover** { /\* mouse over link \*/ } **a:focus** { /\* keyboard focus on link \*/ } **a:active** { /\* selected link (i.e., you've clicked but not released on the link) \*/ }

Question 32

What are **attribute selectors**?

Answer 32

CSS lets us target elements by attribute value. A common use for this is targeting specific kinds of form inputs (for instance, input[type="radio"] to apply rules exclusively to radio selector inputs).

Question 33

**Attribute selectors**: describe the options for matching attribute values.

Answer 33

* **Exact match**: element[attribute**=**value] * Match pattern **anywhere** in value: element[attribute**\*=**value] * Match pattern at **beginning** of value: element[attribute**^=**value] * Match pattern at **end** of value: element[attribute**$=**value]

Question 34

What is the difference between **ID** & **class** selectors?

Answer 34

In the CSS, a class selector is a name preceded by a **full stop** (“.”) and an ID selector is a name preceded by a **hash character** (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. ID selectors have very high specificity.