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;}
Select a link
Select a link that’s been visited already
a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}
Select the state of being hovered over
a:hover {
color: deeppink;
text-decoration: underline;}
Select the state of being clicked (whether a button or not)
a: active {
color: darkcyan;}
Select the state of ‘focussed’ (tabbed to, text box clicked on etc)
a: focus {
color: darkcyan;}
Select an element if it has a specific attribute
[ ] for all elements
or:
p[class]
p[id]
p[class]
Targets any <p> element with an
attribute called clas</p>
Select an element if it has a specific attribute with a specific value
= p[class="dog"] Targets any <p> element with an attribute called class whose value is dog</p>
Select an element if it has a specific attribute with a value that contains this string (separated by spaces)
p[class~="dog"] Targets any <p> element with an attribute called class whose value is dog</p>
Select an element if it has an attribute that begins with a specific string
p[attr^”d”]
Targets any <p> element with
an attribute whose value begins
with the letter “d</p>
Select an element if it has a specific attribute with a value that contains this substring
p[attr*“do”]
Targets any <p> element with an
attribute whose value contains
the letters “do
Select an element if it has an attribute that ends with a specific string
p[attr$”g”]
Targets any <p> element with an
attribute whose value ends with
the letter “g”</p>
