Text - indent : 20px Vs Text - indent : - 20px

20 px = indents inward (to the right) - 20 px = opposite direction

CSS Properties And Values Flashcards by David Blackthorne

You want to underline text and make it red

Text-decoration : underline red ;

Border-bottom : 2px solid red ;

How well did you know this?

Not at all

Perfectly

Why is border - bottom a good way to do underlining?

More control. You can use padding to push away the underlining.

How well did you know this?

Not at all

Perfectly

Change color of text?

Color: ___

How well did you know this?

Not at all

Perfectly

Two groups of properties to change texts

Font

Text

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

What property to italicize a font? What other values in this property group?

Font - style : italic (oblique, normal, inherit)

How well did you know this?

Not at all

Perfectly

What declaration to make all texts capitalized but small? (What other values in this property?

Font - variant : small - caps (normal, inherit)

How well did you know this?

Not at all

Perfectly

How to change thickness of font?

Font - weight : bold (or normal, bolder, lighter, inherit)

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

How to control spacing between lines of text? What is the normal spacing value?

Line - height : ___ px ;

Normal = 150% or 1.5

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

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.

How well did you know this?

Not at all

Perfectly

Text align left vs float left?

Text align = moves text inside element

Float = moves ENTIRE ELEMENT

How well did you know this?

Not at all

Perfectly

What property to underline your text? What other values are in this property group?

Text - decoration: underline, none, overline, line - through, inherit.

How well did you know this?

Not at all

Perfectly

How to code MULTIPLE text decorations in the same element?

Separate with a space

How well did you know this?

Not at all

Perfectly

How to indent text? What property?

Text - indent :

How well did you know this?

Not at all

Perfectly

Text - indent : 20px

Text - indent : - 20px

20 px = indents inward (to the right)

20 px = opposite direction

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

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 well did you know this?

Not at all

Perfectly

How to change space between letters of a text?

Letter - spacing :

How well did you know this?

Not at all

Perfectly

What does letter - spacing : relative ; mean?

Relative = keeps correct space between letters even as font-size changes

How well did you know this?

Not at all

Perfectly

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: 1. Put a class in every OTHER tr & set background color. 2. 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 {

CSS Properties And Values Flashcards

(77 cards)