CSS

Question 1

general syntax

Answer 1

selector {properties; }

ex. h2, p {color: blue;}

Question 2

meaning of css

Answer 2

cascading style sheets
(more specific styles override more generic one)

browser > external > embedded > in-line > user-defined

embedded is part of an html document, in-line is part of an html element

Question 3

units in css

Answer 3

relative length (em, rem, %, vw, vh, vmin, vmax)
absolute length (cm, mm, pt, px, in)

relative for screens; absolute for print

1 inch is 96px

Question 4

selectors in css

Answer 4

• wild card *
• single (h1)
• group (h1, h2)
• class .class_name
• id #123
• attribute a[attribute=value]

class, and id are assigned to tags, attributes are part of tags

class ex. < img class=”img”>; id ex. < h2 id=”123”>

Question 5

advanced selectors in css

Answer 5

• pseudo classes a:hover
• pseudo elements p::first-letter
• combinators

combinators are: descendant( ), child(>), adjacent/general sibling(+/~)

Question 6

inheritance in css

Answer 6

font, color, list, and text styles are inherited

border/layout/margin/padding are not, unless specified

Question 7

html boxes

Answer 7

from outermost to innermost box:
- margin
- border
- padding
- content

Question 8

box border styling

Answer 8

border-style/color/width/radius/image

shortcut: border: 2px solid green; for width/style/color

Question 9

box background styling

Answer 9

background-attachment/color/image/position/repeat/size

Question 10

position property

Answer 10

absolute/relative/fixed/static

absolute is from the perimeter of the box, rel is from its normal spot

Question 11

shortcut for centering in css

Answer 11

display: block;
margin: 0 auto;

Question 12

float property

Answer 12

left/right/none

has clear and overflow properties

Question 13

text styling

Answer 13

font-style/weight/variant/family/stretch/size

Question 14

what is rwd

Answer 14

responsive web design

requires viewport in html: < meta name=”viewport”>

also in meta tag after viewport: content=”device-width, initial-width=1.0”>