CSS

Question 1

Advantages of seperate CSS stylesheet

Answer 1

• Much easier site maintance
• Greater typography and page layout control (general pro)
• Potentially smaller documents
• Can act as template for many webpages

Question 2

Anatomy of CSS selectors

Answer 2

Stylesheets are composed of “Rules” that describe the styling to be applied.

Each rule has the following composition:

Question 3

types of CSS selectors

Answer 3

– HTML element name selector

– class selector

– id selector

– contextual selector

Question 4

block vs inline elements (+ examples)

Answer 4

block elements
— start on a new line
— take full width available
— browser sets margin between block elements
— < div >, < p >, < h1 >, < form >

inline elements
— do not start on a new line
— take only necessary width
— must be nested inside a block element
— < span >, < img >, < a >

Question 5

float property

Answer 5

• a floating element is removed from the document flow
• it hovers inside a container; can be left, right, or none
• floating elements should have a width property, otherwise content may be unable to wrap around the floating element

Question 6

clear property

Answer 6

disallows floating elements from overlapping this element; can be left, right, both, or none (default)

Question 7

definiton of overflow property + 4 values

Answer 7

specifics what to do when element’s content is too large; can be auto, visible, hidden, or scroll

Question 8

how to set up a multi-column layout

Answer 8

Question 9

4 types of CSS positioning

Answer 9

static position: no special position; positioned according to the normal flow of the page and is unaffected by top, bottom, left, and right properties; the default

relative position: relative to its normal static position. Setting the top, right, bottom, and left properties of a relatively-positioned element will displace it from its normal static position.

absolute position: fixed position within containing element (nearest positioned ancestor). If no positioned ancestors, it uses the document body, and moves along with page scrolling.

fixed position: fixed position within browser window; sticky; element stays same place if page scrolled; can be top, right, bottom, and left; relative to viewport

Question 10

what is optimal hierarchy in the process of layout

Answer 10

1. alignment
2. float
3. position

Question 11

Details about inline boxes

Answer 11

use it sparingly, because it can radically alter you webpage

Question 12

how can we control the viewpoint and what is the effect

Answer 12

Question 13

one tool for CSS troubleshooting

Answer 13

Online CSS Validation

Question 14

What is Bootstrap?

Answer 14

A free front-end framework for faster and easier web development

Includes HTML and CSS based design templates, as well as optional JavaScript plugins

Easily create responsive designs

Question 15

Why Use Bootstrap?

Answer 15

Easy to use: only basic HTML and CSS required

Responsive features: adjusting to phones, tablets, and desktops

Mobile-first: mobile-first styles are part of the core framework

Browser compatibility: Bootstrap is compatible with all modern browsers

Question 16

How can you apply styles to multiple elements?

Answer 16

grouping styles using commas

or

using classes in html

Question 17

What is the vertical-align property?

Answer 17

specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element’s box

Question 18

how to assign multiple classes to one element

Answer 18

by using spaces

< p class=”food pizza” >

Question 19

define pseudo-classes + 3 examples

Answer 19

• Selectors that target an element under specific conditions
• Defined by the state of the element

Question 20

what is this

selector1 selector2 {properties}

selector1 > selector2 {properties}

Answer 20

selectors seperated by spaces are contextual selectors

Question 21

properties of the CSS Box Model

Answer 21

every element is composed of:

• the actual element’s content
• padding between the content and the border (inside)
• a border around the element
• a margin between the border and other content (outside)

Question 22

Where does the border line go in the box model?

Answer 22

between the padding and the margin

Question 23

what are the following values for the border property

h2 { border: value1 value2 value3; }

Answer 23

value1 = thickness (1px, 2em, …)

value2 = style (solid, dotted, …)

value3 = color

Question 24

How to center a block element and an inline element?

Answer 24

to center inline elements within a block element: text-align: center;

recommended to set width (otherwise, may occupy entire width of page)

Question 25

display property + 3 examples

Answer 25

specifies the display behavior (the type of box model) of an element

inline - displays an element as an inline element. Any height and width properties will have no effect

block - displays an element as a block element. It starts on a new line, and takes up the whole width

inline-block - displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

Disclaimer: use it sparingly because it can radically alter layout

Question 26

Embedded Fonts and Alternatives

Answer 26

Question 27

one use of < span >

Answer 27

an inline element used for applying styles

Question 28

3 ways to glue the style to HTML

Answer 28

1) External Stylesheets (separate document - best way)
2) Internal Stylesheets (inside html < style > - hard to maintain)
3) Inline style (inside tag - very hard to maintain)

Question 29

Hierarchy Rules

Answer 29

• Tag values will be inherited by descendants.
• when styles conflict, the latter style takes precedence
• more specific rules override a more general inherited rule