CSS Properties And Values Flashcards
You want to underline text and make it red
Text-decoration : underline red ;
OR
Border-bottom : 2px solid red ;
Why is border - bottom a good way to do underlining?
More control. You can use padding to push away the underlining.
Change color of text?
Color: ___
Two groups of properties to change texts
Font
Text
Font - family : “ Helvetica Neue” , helvetica, Arial;
Why is helvetica Neue in quotation marks and not the others?
Any font family with 2+ words need quotation marks.
What property to italicize a font? What other values in this property group?
Font - style : italic (oblique, normal, inherit)
What declaration to make all texts capitalized but small? (What other values in this property?
Font - variant : small - caps (normal, inherit)
How to change thickness of font?
Font - weight : bold (or normal, bolder, lighter, inherit)
Font weights start at 100, 200, 300, up to 900. Which number is normal thickness? Which is bold? When can we use them?
Normal = 400 Bold = 700
Only can use if typeface comes in those weights.
How to control spacing between lines of text? What is the normal spacing value?
Line - height : ___ px ;
Normal = 150% or 1.5
You have a box or button with a text in it. How to vertically center that text?
Height : 22px ;
Line - height : 22 px ;
Make height & line height the same value.
When writing shorthand for font properties, what do the letters mean below:
Font: A B C D / E F, F, F ;
Which letters are required? Why the / and the commas?
A = font - style B = Font - variant C = Font - weight D = font - size E = line - height F = all font family options
Only D & E are required. ? Separates them. Commas separate font families.
What’s a CSS pseudo-class. Ex?
Add to end of a selector to style an element in SPECIFIC CONDITIONS
Ex. Hover = content changes style when you hover over it.
You want to change the style of an element when you float your mouse over it. How?
Type : hover after your selector + your style rules
You want your text to be all the way right, or left, or centered… what property? What other values in this property group?
Text - align : left, center, right, justify, inherit.
Text align left vs float left?
Text align = moves text inside element
Float = moves ENTIRE ELEMENT
What property to underline your text? What other values are in this property group?
Text - decoration: underline, none, overline, line - through, inherit.
How to code MULTIPLE text decorations in the same element?
Separate with a space
How to indent text? What property?
Text - indent :
Text - indent : 20px
Vs
Text - indent : - 20px
20 px = indents inward (to the right)
- 20 px = opposite direction
How to make a shadow for your text? What property? What values?
Text - shadow : A B C D
A = horizontal distance B = Vertical distance C = blur radius D = color
You want to put a shadow on your text that goes down 10 px and to the right 5 pixels . It will be a little blurry, and have an rgba of 2, 3, 9, .5. How to code?
Text - shadow : 5px 10px 3px rgba(2, 3, 9, .5) ;
How to change space between letters of a text?
Letter - spacing :
What does letter - spacing : relative ; mean?
Relative = keeps correct space between letters even as font-size changes
How to control space between text words? What property?
Word - spacing : __ ;
What are web-safe fonts?
Every gadget and computer has these fonts installed in them. 100% guarantee they will work if you use them.
How do you use fonts that you created by yourself?
You can embed them into your CSS with @ font - face selector
Make background of element a different color
Background - color : ____ ;
How to code a backup background color or property in your CSS? Give example
Write the backup above the first choice:
Div {
_ background - color : backup value (choose most accessible option)
_ background - color : first choice
}
What color values aren’t supported by all browsers?
Rgba and HSLa
Use an image as a background
Background - image : url ( “name of file “ ) ;
What happens if you use a back ground image and ONLY code the image location? How to stop this?
Image will repeat from top Left to right and down until all element is filled.
Stop w/ background - repeat : no - repeat ;
What are all the values of the background - repeat property? How are they different?
Repeat - x = horizontally repeat
Repeat - Y = vertically repeat
No - repeat = only show x1
You coded a background image and want to control it’s position in the element. How?
Background - position : A px B px ;
A = horizontal distance from top L corner
B = vertical distance from top
- if you only write 1 value = A, B will default to 50%
What are other ways to position a background image besides pixels?
Background - position : Left/Right top or Left/Right bottom or percentages
What does the shorthand for background property mean?
Background : A B C D E
A = color
B = url
C & D = position
E = repeat value
Are gradients accessible in all browsers? How to make them?
Not all browsers. Only modern.
Create with background or background - image properties.
How to make sure your background gradient shows in all browsers?
Use vendor prefixes:
- WebKit -
- moz -
What are two different types of gradients you can make? How are they different?
Linear = color change from one side to the other
Radial = color change from center to outside.
How do you code a linear gradient?
Background : linear - gradient ( color A, color B )
What is the default direction of a linear gradient? How do you change it?
Default = top to bottom
Change = put the final direction before your colors ex:
Background : linear - gradient ( to right bottom OR degree 0 to 360, color A, color B ) ;
How to make a radial gradient?
Background : radial - gradient ( color A, color B ) ;
What if you want to use more than 2 colors for a gradient?
Write all you want but separate with commas
You added multiple colors to a gradient but want to control their position on the gradient. How?
Background : linear - gradient ( to right, color A distance (ex. 85%), color B distance, color C distance…. ) ;
How to use multiple background images on a page? How are they organized?
Background: image 1, image 2, image 3 ;
Separate with commas
Image 1 in front, 2 in the middle, 3 in the back.
How to control size of your background image? What values?
Background - size : width height ;
Px, % , or auto, or cover, contain
Background - size: cover vs contain?
Cover = all element will be covered by image (can crop) Contain = image will stretch until reaches element borders
You want a background image to extend to just the padding. How? What about to the border?
Background - clip : padding - box (or border - box)
You want the background image to start from inside the border, not the content. How?
Background - origin : border - box
For an ordered list, you want to the list to start from a number DIFFERENT than 1. How?
< ol start = “ start number “ >
You want your ordered list to have reverse numbers. How?
< ol reversed >
For an ordered list, how to change the list order number in the middle of the list? What would happen after?
< ol >
< li > …
< li > …
< li value = “ new number “ >
- all subsequent numbers will go from the new number value.
How do you change the marker style on your list items?
List - style - type : ex. Square ;
How to use an image as your list item markers ?
Very complicated but possible:
Li {
Background: url ( image path) o 50% no-repeat ;
List - style - type : none ;
Padding - left : 12 px ;
How to control the position of your list markers?
List - style - position: outside, inside, or inherit.
Inside = texts will wrap around the marker.
What is the short hand for styling your list markers?
List - style: A B ;
A = type B = position
How to make a list appear horizontally?
Display : inline (or inline - block )
Inline block = better control
What’s the difference between floating vs making list items inline/inline block
Changing list displays will remove the marker.
Float if you want to keep the marker.
How to code an image?
< img src = “ location “ alt = description >
How to change the size of an image?
Img {
Height : value ;
Width : value ;
}
What are the different ways to position an image on a page?
- Change display: block , inline, inline - block
- Float
When to use image as a background in CSS or as a tag in HTML?
HTML if image has semantic value
CSS if image only for styling
You want to style the inline frame in your html. How?
Iframe {
Border, width, height…
}
When you use em for font size, where does the value come from? Why is this good?
EM’s get their font size from the parent font size. Great for responsiveness and easy updates.
Em vs REM in font size? Benefits of each?
EM = the font size of the closest parent
REM = font size of the ROOT element (the html element). Great for accessibility
How to write the structure of a media query?
@ media (minimum value) and (maximum value) {
You want to make a media query for content between 0 and 600 pixels. How?
@ media screen and ( max - width : 600 px ) {
Screen = 0
You want to write a media query for a screen between 600px and 900. How?
@ media (min - width : 601 px ) and ( max - width : 900 px ) {
What must you add to your HTML, to ensure that all your media queries work?
< meta name = “ viewport “ content = “ width = device - width, initial - scale = 1 “ >
Add into the head of HTML
How to make a really accessible font size?
Use a % value for your HTML font size. Then use only REMs
What two properties are used to style table borders?
Border - collapse
Border - spacing
Your table cells have a border that is super thick between them. How to fix it?
Table {
Border - collapse : collapse ;
You want all the cells in your table to be separated by a 2 px space. How?
Table {
Border - spacing: 2px ;
How to put a border around a table row?
No direct way. Put bottom borders under all th’s and tr’s and td’s
You want to color your table rows to make them easier to read. How?
2 methods:
- Put a class in every OTHER tr & set background color.
- Tr : nth - child (even or odd ) {
Background : color ;
How to align table text vertically? Horizontally?
Vertical = vertical - align : top, middle or bottom ; Horizontal = text - align : \_\_\_ ;
You want to select the first section ONLY in a main.
Main section : first - child {
