12 Text

Question 1

What are some basic CSS text modifiers? (7 things) (excluding color)

Answer 1

Font family 
Weight
Style (italic/oblique)
Size, also height/width
Spacing
Casing Uppercase/Lowercase
Decoration Underline/Strike

Question 2

What are some paragraph control properties? (2 things)

Answer 2

Alignment

Indent

Question 3

Control font type

Have backup fonts

Answer 3

font-family: Georgia, Times, serif

The first fonts take precedence. The proceeding fonts are used in the preceding ones are not present.

Question 4

Control text size

What are the options for units?

Answer 4

font-family: Arial, Verdana, sans-serif;
font-size: 12px;

px, (the # of pixels text takes up)
% (% of 16 px, the default size of text in browsers)
em (‘m’ lengths. Number of lengths of the letter m. relative to size in parent element)

Question 5

What’s the best font size option(s)? why?

Answer 5

px is great for alignment to images.

em makes the font size change when system font sizes change and when parent element font size changes.

Question 6

Set a font assuming the user doesn’t have it installed

Answer 6

@font-face {
font-family: ‘ChunkFiveRegular’;
src: url(‘fonts/chunkfive.eot’) format(‘embedded-opentype’);}
}
font-family to specify the name to be used in the font-family value later

src to specify path. (you will have to offer many with different types so they can be used by all browsers. Just offer then separated by commas under src)

format to specify font type

h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}

Question 7

Upload a font that can be linked to for use in an @font-face

Answer 7

https://www.fontsquirrel.com/tools/webfont-generator

Question 8

Set bold or normal

Answer 8

.credits {
font-weight: bold;}

font-weight: normal;

Question 9

Set italic, oblique or normal

What is oblique?

Answer 9

font-style: italic;
font-style: oblique;
font-style: normal;

Oblique is the font slanted. Italic is created.
When it can’t find italic, it just makes it oblique. The average person can’t tell the difference.

Question 10

Make text all lower case, all upper case, or force capilization of first letter of each word.

Answer 10

h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}
.credits {
text-transform: capitalize;}

Question 11

add underline, overline, link through or animation that makes it blink.

Answer 11

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

Question 12

can something be underlined and struck through?

Answer 12

no,

The text-decoration property can only have 1 value.

Question 13

control leading (vertical space between lines).

Answer 13

line-height: 1.4em;

or px

Question 14

name for part of letter that drops below the baseline

Name for highest part of the letter

Answer 14

descender

ascender

Question 15

Line height is from baseline to ascender

t or f

Answer 15

false

It’s from ascender top to descender bottom

Question 16

What’s a good standard distance between lines?

What’s a good rule of thumb?

Answer 16

1.4 to 1.5 em

should be more than the space between each word

Question 17

What is kerning

Answer 17

spacing between letters

Question 18

control spacing between words

control spacing between letters (kerning)

Answer 18

word-spacing: 0.2em;}

letter-spacing: 1em

Question 19

Align text left, right, center, or justify

Answer 19

h1 {
text-align: left;}
p {
text-align: justify;}
.credits {
text-align: right;}

text-align: center;

Question 20

Align text with an inline element ( top, bottom, etc) similar to align attribute in HTML

Answer 20

#six-months {
vertical-align: text-top;}
#one-year {
vertical-align: baseline;}
#two-years {
vertical-align: text-bottom;}

Top, middle and bottom also work

Question 21

Add an indent

Answer 21

.credits {
text-indent: 20px;

or ems

Question 22

Keep an element in HTML but push it out of view

Answer 22

text-indent: -9999px;

Question 23

Add a shadow

What is the order of parameters

Answer 23

text-shadow: 1px 1px 3px #666666;}
how far to left or right
how far to top or fottom
amount of blur
color

Question 24

select the first letter or first line

Answer 24

p.intro:first-letter {
font-size: 200%;}
p.intro:first-line {
font-weight: bold;}

Question 25

Select a link

Select a link that’s been visited already

Answer 25

a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}

Question 26

Select the state of being hovered over

Answer 26

a:hover {
color: deeppink;
text-decoration: underline;}

Question 27

Select the state of being clicked (whether a button or not)

Answer 27

a: active {
color: darkcyan;}

Question 28

Select the state of ‘focussed’ (tabbed to, text box clicked on etc)

Answer 28

a: focus {
color: darkcyan;}

Question 29

Select an element if it has a specific attribute

Answer 29

[ ] for all elements
or:
p[class]
p[id]

p[class]
Targets any <p> element with an
attribute called clas</p>

Question 30

Select an element if it has a specific attribute with a specific value

Answer 30

=
p[class="dog"]
Targets any <p> element with
an attribute called class whose
value is dog</p>

Question 31

Select an element if it has a specific attribute with a value that contains this string (separated by spaces)

Answer 31

p[class~="dog"]
Targets any <p> element with
an attribute called class whose
value is dog</p>

Question 32

Select an element if it has an attribute that begins with a specific string

Answer 32

p[attr^”d”]
Targets any <p> element with
an attribute whose value begins
with the letter “d</p>

Question 33

Select an element if it has a specific attribute with a value that contains this substring

Answer 33

p[attr*“do”]
Targets any &ltp> element with an
attribute whose value contains
the letters “do

Question 34

Select an element if it has an attribute that ends with a specific string

Answer 34

p[attr$”g”]
Targets any <p> element with an
attribute whose value ends with
the letter “g”</p>