12 Text Flashcards
What are some basic CSS text modifiers? (7 things) (excluding color)
Font family Weight Style (italic/oblique) Size, also height/width Spacing Casing Uppercase/Lowercase Decoration Underline/Strike
What are some paragraph control properties? (2 things)
Alignment
Indent
Control font type
Have backup fonts
font-family: Georgia, Times, serif
The first fonts take precedence. The proceeding fonts are used in the preceding ones are not present.
Control text size
What are the options for units?
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)
What’s the best font size option(s)? why?
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.
Set a font assuming the user doesn’t have it installed
@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;}
Upload a font that can be linked to for use in an @font-face
https://www.fontsquirrel.com/tools/webfont-generator
Set bold or normal
.credits {
font-weight: bold;}
font-weight: normal;
Set italic, oblique or normal
What is oblique?
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.
Make text all lower case, all upper case, or force capilization of first letter of each word.
h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}
.credits {
text-transform: capitalize;}add underline, overline, link through or animation that makes it blink.
text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;
can something be underlined and struck through?
no,
The text-decoration property can only have 1 value.
control leading (vertical space between lines).
line-height: 1.4em;
or px
name for part of letter that drops below the baseline
Name for highest part of the letter
descender
ascender
Line height is from baseline to ascender
t or f
false
It’s from ascender top to descender bottom
What’s a good standard distance between lines?
What’s a good rule of thumb?
1.4 to 1.5 em
should be more than the space between each word
What is kerning
spacing between letters
control spacing between words
control spacing between letters (kerning)
word-spacing: 0.2em;}
letter-spacing: 1em
Align text left, right, center, or justify
h1 {
text-align: left;}
p {
text-align: justify;}
.credits {
text-align: right;}
text-align: center;
Align text with an inline element ( top, bottom, etc) similar to align attribute in HTML
#six-months {
vertical-align: text-top;}
#one-year {
vertical-align: baseline;}
#two-years {
vertical-align: text-bottom;}
Top, middle and bottom also work
Add an indent
.credits {
text-indent: 20px;
or ems
Keep an element in HTML but push it out of view
text-indent: -9999px;
Add a shadow
What is the order of parameters
text-shadow: 1px 1px 3px #666666;} how far to left or right how far to top or fottom amount of blur color
select the first letter or first line
p.intro:first-letter {
font-size: 200%;}
p.intro:first-line {
font-weight: bold;}
element with an attribute called clas
element with an attribute called class whose value is dog
```element with an attribute called class whose value is dog
```element with an attribute whose value begins with the letter "d
element with an attribute whose value ends with the letter "g"
