Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

HTML & CSS > CSS Basics > Flashcards

CSS Basics Flashcards

1
Q

How do you make CSS comments?

A

Comments in CSS begin with a forward slash and an asterisk, and end with an asterisk and a forward slash. And everything that’s in-between those opening and closing characters is ignored by the browser.

Ex. /* Words here */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Why write comments in CSS?

A

Writing comments in CSS allows the coder to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How do you wholescale remove comments from CSS?

A

Command plus / on a Mac will remove all comments.

Command + /

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are CSS data types?

A

CSS data types are typical values (including keywords and units) accepted by CSS properties and functions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are the six absolute units in CSS when defining length?

A 
px - pixels
mm - millimeters
cm - centimeters
inch - one inch
pt - point (which is 1/72 of an inch)
pica - which is 12 points

Pixels (px) is the most common.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the difference between absolute units and relative units?

A

Absolute units don’t scale. Relative units and percentage units are more flexible, and will allow developers to lay out content independent of screen size and resolution, to scale with browser and screen size.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do pixel lengths display on a standard display versus a high-density display?

A

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the advantages of using percentage units?

A

Percentages are relative to something else… so when you use percentages in CSS, the percentage value is measured relative to a parent element’s length.

SO, percentages are most useful when it comes to defining LAYOUT, especially when you want items to scale based on browser size or window size, per say.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the most commonly used unit for relative unit for font sizes?

A

It is the em unit. The em unit is a font relative unit that is calculated based on the parent element’s font size.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the default font size value for most browsers?

A

The default font size value is 16px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

For most font sizes, how much will 1em equal to?

A

16px

2em = 32 px

3em = 48px

and so on and so forth

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does it mean that em-based values compound?

A

Em-based values are relative to their parent’s font-size value. This causes a compounding issue that makes their font-size values larger than the desired values.

For example, if I had a header that was font-size: 1.5em and an h1 within the header that was font-size: 2em, then the h1 would actually compound to 1.5emx2em=3em.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a rems? How does it help?

A

REM stands for root-m, and it is similar to an em unit, the only difference is that it is relative to the root element of the page, NOT THE PARENT element like EMs.

By root element, we are referring to the HTML element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the three most common ways to describe color in CSS?

A

A predefined keyword, a hexadecimal value (#ff105e), or RGB function like rib(10, 13, 105).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you abbreviate hex values?

A

If the letters or numbers in a hex value duplicate, you can eliminate the duplicate letter or number.

ffccee

can become

fce

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is rgba?

A

RGBA has the ALPHA added to account for the alpha channel … the alpha channel sets the opacity of a color.

Alpha is added as a fourth value to the RGB value list and is added as a decimal. The higher the alpha, the higher the transparency.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you write hex values in CSS?

A

ff120e

You start with the hashtag and then follow with the 6 digit code of letters and numbers.

Ex.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you write RGB values in CSS?

A

You start with the letters RGB and then follow with parenthesis. Inside the parenthesis write a comma separated list with three numerical values.

Ex.

rgb(255, 107, 0)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How do you write RGB values in CSS with alpha?

A

You start with the letters RGB and then follow with parenthesis. Inside the parenthesis write a comma separated list with three numerical values. Add the alpha value as a fourth value, but add as a decimal point.

Ex.

rgba(255, 173, 59, .4)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What property allows us to control the horizontal alignment of text?

A

The text-align property.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are the most commonly accepted values for the font-weight?

A

BOLD and NORMAL.

Note: All headings by default are set to bold.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are web-safe fonts?

A

Web-safe fonts are fonts that can be displayed by all browsers on all computers.

You can define a webpage font as a fall-back font in case your original font doesn’t work on a person’s browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is a CSS font stack?

A

A CSS font stack is a prioritized list of fonts that the browser will cycle through until it finds a font that is installed on a user’s system.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

How do you write a font stack?

A

You write a font stack as a comma separated list of fonts.

A generic font-family name is always a good idea to include at the end of the font stack, just in case. So something like sans-serif or monospace.

25
Q

How do you write out a font-family name that is more than one word?

Note: This is a specific font family name, not a generic family name.

A

You will need to write it inside quotation marks within the font-stack.

For example, you would write

“Helvetica-Neue”

26
Q

What is a line height in CSS?

A

The line-height property defines the amount of space above and below inline elements (vertical space between lines). It is basically the LEADING for lines of text.

27
Q

What values can the line-height property accept?

A

The line-height property can accept the keyword values normal or none as well as a number, length, or percentage.

28
Q

Why are unit-less line heights recommended?

A

Unitless line heights are recommended due to the fact that child elements will then inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.

29
Q

How can you remove underlines from links?

A

You can use the text decoration property to remove some text decorations.

Ex.
a:link {
text-decoration: none
}

30
Q

What is a unitless line height relative to?

A

A unitless line height is relative to the font-size given the element.

31
Q

What property allows us to specify the font for an element?

A

The font-family property lets us specify the font for an element.

32
Q

What is the CSS box model?

A

The box model is what describes the amount of space each element takes up on the page.

33
Q

What is the difference between the span element and the div element?

A

The difference between span and div is that a span element is in-line and usually used for emphasizing something (like text inside a paragraph).

A div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

34
Q

What are the span element and div element useful for ?

A

They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

Div elements are block elements. Span is an inline element.

35
Q

How do block elements render (vs inline elements)?

A

Block elements form a separate block; they take up an entire line of content. They also force a new line of content before and after the element.

36
Q

What are the four parts of the CSS box model?

A

Content, padding, borders, and margins.

37
Q

What is the display property used for?

A

The display property is used for controlling layout (HOW and IF an element is displayed). With the display property, you can override the default display settings of an element.

The default display value for most elements is block or inline.

38
Q

What are some of the most common values for the display property?

A

The most common types of display values are the keyword values none, block, inline, and inline block.

39
Q

How does the browser calculate width?

A

The browser calculates the div element with padding.

Padding is added to the overall calculation of a div element, including for width.
So if it is 100px in width, but there is padding of 10 on top and bottom, the overall width as calculated by the browser is 120px.

40
Q

How do you override the manual calculations that the browser will do for calculating width?

A

You override the manual calculations by using the box-sizing property.

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. The default calculations includes only the content. Border and padding are not included.

i.e. box-sizing: border-box

41
Q

How do you limit the width of your content on really big screens (when you are defining width as a percentage?)

A

You can use the max-width property.

42
Q

What does background-image do?

A

Every HTML element has a background layer that is transparent by default. Background-image is a property that sets one or several background images.

43
Q

What does background-size do (for an image)?

A

It sets the size of a background image.

44
Q

What does background-repeat do (for an image)?

A

Controls whether or not the image is tiled and how it gets tiled both vertically and horizontally.

The value repeat-y repeats the image vertically, while repeat-x repeats the background image horizontally. No-repeat will ensure that the background image does not repeat.

45
Q

How do you define a background image?

A

You need to use the URL function to tell the browser where to find the image. You write URL, and then follow with open and closed parentheses that contain the path to the image we want to display.

EX:

background-image: url ()

46
Q

What values do you use to define background size for an image?

A

We can define it using any length values or percentages.

Also you can use the value COVER to display everything at scale size.

47
Q

What does background-position do for an image?

A

Controls the background position of a background image. By default, a background image’s initial position is the top-left corner of the containing element.

48
Q

What values does the background-position property accept?

A

The background-position property accepts key words, length units, and percentages. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Length values (e.g. 100px 5px)
Percentages (e.g. 100% 5%)
Keywords (e.g. top right)

The default values are 0 0. This places your background image at the top left of the container. The first value determined the horizontal position and the second value determines the vertical position.

49
Q

What is the float property?

A

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

When an element is floated, the element is taken out of the normal flow of the page and placed along the left or right side of its container, and allows for things to wrap around it.

50
Q

What values can the float property have?

A

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

51
Q

If a block element contains floated children, what happens?

A

If a block element contains floated children, its height will collapse.

52
Q

How can you apply several classes to an element?

A

You can apply several classes by naming each of them with a space between (no comma needed).

Ex. for three classes below:

class=”orange cardboard alligator”

53
Q

What are the two methods for fixing collapsed space from floats?

A

The two methods are overflow and clearfix.

Overflow is easiest to use, but can result in browsers displaying a scroll for that div area of content.

Clearfix requires applying a class to your element.

54
Q

What is a CSS pseudo-class?

A

A pseudo-class targets elements dynamically by selecting elements in a certain state.

For example, it can be used to:

  1. Style an element when a user mouses over it
  2. Style visited and unvisited links differently
  3. Style an element when it gets focus
55
Q

What is the rel attribute for?

A

The rel attribute specifies the relationship between the current document and the linked document/resource.

The red attribute will help provide information when linking an external CSS document to an HTML document.

56
Q

How do you add multiple class names to an html declaration?

A

You can list them all with a space in-between each.

i.e.
class = “special information relay”

57
Q

How can comments be used to debug?

A

You can comment out sections of code.

58
Q

Among the three different sources of CSS, which of the three has the most importance?

A

By default, author styes sheets have more important than user agent (browser default) and user style sheets (settings for accessibility, for example).

59
Q

What are the three concepts that browsers use to determine what to present?

A

The three concepts are cascade (order), specificity (declarations used), and inheritance (whether there is any inheritance of parent element information).

HTML & CSS (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions