CSS Flashcards Preview

Front End Develop > CSS > Flashcards

Flashcards in CSS Deck (157):
1

What does a h1 {color: black; text-align: center;} tell my computer?

CSS is telling my computer that wherever there is a HTML

tag to color it black and align its text in the center.
2

What does a p {font-family: “Arial”; font-size: 14px;} tell my computer?

For all the HTML paragraphs

, let’s use the font family Arial, and let’s make the text 14px.

3

The primary way to write CSS is to _____ HTML tags.

DESCRIBE

4

The BIG idea with CSS is that you use it to tell your web browser how to _____ all that HTML you’ve been busy writing.

DISPLAY

5

CSS selector tells the computer what?

The HTML element it is describing.

6

Why are the greater-than and less-than HTML brackets <> missing from CSS?

…if they were there, the CSS wouldn’t work!

7

Each CSS property has two parts:

1. NAME
2. VALUE

8

Each CSS property has its own _____.

LINE

9

For every HTML element you use, you should create a little bit of _____ to go with it.

CSS

10

What does CSS stand for?

Cascading Style Sheets

11

Anatomy of a CSS Block?

HTML tag {
property1: value;
property2: value;
property3: value;
}

12

What are the 3 BASIC levels of styling my HTML text with CSS?

1. font-family
2. font-size
3. color

13

Web safe fonts are _____ on your browser and cover a lot of _____ fonts like Times New Roman, Arial & Verdana.

PRELOADED
COMMON

14

What are pixels?

Measurements based on the height of your text as pixels, or one of the tiny dots that make up the image on your screen.

15

What are EM's?

Relative text size measurement

16

What are the 2 ways to designate color with CSS?

1. Web Safe Color names
2. Hexadecimal values

17

Hexadecimal values begin with what?

Hashtag #

18

How would I change the alignment of my text with CSS?

With TEXT-ALIGN to left, right, center, or justify

19

How would I italicize text with CSS?

Using FONT-STYLE is oblique or italic

20

How would I change my HTML text's weight?

Using FONT-WEIGHT is bold, normal, bolder, lighter, or numbers 100 through 900.

21

CSS's TEXT-TRANSFORM allows you to make all your HTML text what?

capitalized, uppercase or lowercase using properties capitalize, uppercase and lowercase.

22

FONT-VARIANT puts your text into, well, _____-_____ or SMALLER SCREAMING.

SMALL-CAPS

23

CSS TEXT-DECORATION lets you do what?

add lines over, under and through your text using underline, overline and line-through.

24

LINE-HEIGHT allows HTML text to have more _____ _____.

BREATHING ROOM

25

LINE-HEIGHT accepts what values?

pixels, em, numbers, and percentages

26

CSS TEXT-INDENT allows one to indents at the _____ of your paragraphs,

BEGINNING

27

What values does CSS TEXT-INDENT take?

pixels, ems, or percentages

28

WORD-SPACING sets the space between what?

WORDS

29

What values do WORD-SPACING AND LINE-SPACING accept?

pixels and ems, as well as negative values

30

How do CSS selectors and HTML tags differ?

CSS selectors are just like HTML opening tags, but without any brackets <>

31

What is the right way to set the color of my p tags to red?

p{
color: red;
}

32

What property do I use to make a line through some text?

text-decoration: line-through;

33

CSS is required to make websites.

False

34

What are 2 ways to use fancy web safe fonts?

1. embed the fonts using the CSS property @font-face

2. Use a service like Google Web fonts or Typekit.

35

2 steps to add a font to your CSS using the @font-face CSS property?

1. Download your font file

2. Save it in a "font" folder inside the folder where your site files are located.

36

What are the 3 font file type formats one can use?

1. OpenType (.otf)
2. Embedded OpenType (.eot)
3. Web Open Font Format (.woff)

37

Make sure to always put your @font-face CSS properties at the _____ or close to the _____ of your style.css document.

TOP
TOP

38

Example of how you might add a Bemio OpenType font (OTF) file to your CSS?

@font-face {
font-family: Bemio;
src: url('fonts/Bemio.otf') format('opentype');
}

39

Adding a font variant?

@font-face {
font-family: Bemio Italic;
src: url('fonts/Bemio-Italic.otf') format('opentype');
}

40

Adding an Embedded OpenType font file (EOT)?

@font-face {
font-family: DIN;
src: url('fonts/DINRoundWeb.eot') format ('eot');
}

41

Adding an Web Open Font Format font file (WOFF)?

@font-face {
font-family: DIN;
src: url('fonts/DINRoundWeb.woff') format('woff');
}

42

Fancy font will not work without what?

Single quotes around the font name.

43

How do I tell the tag that it needs to use the separate font family of Bemio Italic?

p.fancyfont em {
font-family:'Bemio Italic';
}

44

What are the 2 parts of a CSS property?

1. Name
2. Value

45

Computer screens work in what type of color?

RGB

46

What does RGB stand for?

Red
Green
Blue

47

The variety of colors you see on your screen right now are produced by _____ that appears through your screen.

light

48

How are different colors created on a computer screen?

Each pixel is turned on and off to create different colors

49

RGB is an _____ color model, meaning it mixes colors by light passing through them.

additive

50

Why do we see different colors when there is only three?

Because the eye blends the colors together due to pixels being so small.

51

_____ colors are used within the RGB color model to tell your screen what percentage of Red, Green, and Blue to turn on.

Hexadecimal

52

The _____ symbol signifies that we are defining a hex color.

#

53

00 means _____ and FF means _____

dark
light

54

How can one set the color of the entire website?

Use BACKGROUND CSS property for the HTML tag.

55

The default value for the
CSS background property is _____.

transparent

56

Does the CSS BACKGROUND property support images as well?

Yes

57

An example of a CSS BACKGROUND using an image?

div {
background:
url('img/my-background.jpg') repeat 10px 20px white;
}

58

What are the 2 ways to write a CSS BACKGROUND image?

1. Relative URL
2. Hard link

59

What is a RELATIVE URL?

Reference to where the image is relative to its location in your code files.

60

What is a HARD LINK?

A regular web link

61

What does the REPEAT command do for an image?

Repeats it covering the body from left to right, top to bottom.

62

What are the 4 options for REPEAT image?

1. no-repeat
2. repeat
3. repeat-x
4. repeat-y

63

On a webpage, the x and y axis begin in the top _____ hand corner of the webpage.

left

64

As a default, that x and y axis values default to _____.

zero

65

An image starts in the top _____ hand corner.

left

66

The width attribute only accepts _____.

pixels

67

What are the 5 border styles?

1. solid
2. dashed
3. dotted
4. grooved
5. ridge

68

Example of BORDER instructions in CSS?

header {
border:
4px
dashed
#dddddd;
}

69

What’s the CSS property you need to add a fancy font to your CSS?

@font-face

70

Do you have to load font files to your local folders to make them work on your website?

No, you can use Google Fonts or another hosted web font provider, and then link their fonts.

71

You can add color to your CSS using what kinds of color property values?

Web safe color names & hex values

72

To set a border for an HTML block, you need to specify which of the following?

Border thickness, border style, & border color

73

Which property do you need to set a color inside a div?

CSS BACKGROUND property

74

Is there a way to make the background of your site an image using CSS?

Yes, using the background property with an image URL.

75

One of your HTML divs needs a repeating background image. What’s the correct way to write that CSS?

background: url(‘img/flower.jpg’) repeat 10px 10px #ffffe0;

76

Setting your height and width using pixels creates a _____ size for your HTML block elements, meaning they stay the same size no matter what sized screen you're looking at.

fixed

77

What is RESPONSIVE WEB DEVELOPMENT?

The creation of FLEXIBLE elements that change with different screen sizes.

78

What is the best way in CSS to handle overflow text?

leave height blank so it can adjust automatically according to the text width.

79

The space between content and border is known as what?

padding

80

What is the space between two bordered paragraphs known as?

margin

81

Margin is for _____ the HTML element.

Padding is for the _____ the HTML element.

outside

inside

82

The 4 values that margin and padding properties take?

1. Pixels
2. Ems
3. Percentages
4. Auto

83

All HTML elements can be thought of as _____.

boxes

84

The term “box model” is used in CSS when talking about HTML _____ and _____.

design
layout

85

The CSS BOX MODEL is essentially a box that wraps around HTML _____ .

elements

86

The CSS BOX MODEL consists of what 4 things?

1. margins
2. borders
3. padding
4. content

87

Example of CSS Box Model?

div {
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
}

88

What order to margin and padding values follow?

clockwise from top, right, bottom, left.

89

Example of adding multiple margin and padding values?

div {
margin: 0px 20px 0px 10px;
padding: 0px 12px 30px 15px;
}

90

What type of HTML tag are you most likely to set a width and height on?

91

These are the parts of an HTML element as described in the CSS Box Model, from the inside out:

Content, Padding, Border, Margin

92

I can set different margins and padding on each side of my HTML element.

TRUE

93

For margin: 0px 10px 10px 20px;, what side of the HTML element do the pixel values relate to?

Top, Right, Bottom, Left

94

What can I use in CSS to give different HTML elements (

,

, etc) different styles?

Class OR ID

95

A class is a group of HTML elements (

,

, etc) that are the _____ or _____.

same
similar

96

An ID is a _____ identifier that applies to _____ HTML tag.

singular
ONE

97

How many HTML elements in a CSS Class can I have?

As many elements in a class as you want

98

How many classes can an HTML elements (

,

, etc) have?

Multiple

99

Example of a CSS Class with different elements?

CSS Class = Car
HTML Element = Mitsubishi
HTML Element = White
HTML Element = 2001

100

You can only have _____ of each CSS ID on a webpage.

one

101

Each HTML elements (

,

, etc) can only have _____ CSS ID.

one

102

Example of a CSS ID for ONE HTML element (

,

, etc)?

Serial number for your gray 2001 Honda

103

If I want more than one HTML element to have the same or similar format then use what CSS?

Class

104

If I want only one HTML element to have a unique format then use what CSS?

ID

105

How would you indicate a CLASS in CSS?

Place a period in front of the selector name.

106

How would I add the newly designated CSS CLASS to my HTML?

Add the CLASS attribute inside the opening HTML element (

,

tag.

Ex:

107

T/F: You can add that class attribute .big-idea to any paragraph that that calls out one of your big ideas!

true

108

How would one indicate a ID in CSS?

Place a hashtag in front of the selector name.

109

How would I add the newly designated CSS ID to my HTML?

Add the ID attribute inside the opening HTML element (

,

tag.

Ex:

110

Can I use CSS CLASS and ID together?

YES!

Ex:

111

3 Features of CSS CLASS?

1. Can have an unlimited number of elements within that class

2. Each element can have more than ONE class

3. All elements in a class share the same CSS styles

112

3 Features of CSS ID?

1. There can only be ONE element with a given ID per page

2. Each element can only have ONE ID

3. Think of it like a social security number or serial number for that element

113

What are some CSS CLASS and ID naming rules?

1. I can name whatever I want
2. I cannot start a name with a number
3. Name according to what it IS not what it LOOKS like

114

I should be able to read a class name or ID and immediately _____ the purpose of that element.

understand

115

What happens if I make CSS ID's work as navigation links?

When the navigation link is clicked on it will take me to the part on the page the link is destined for....this is in lieu of taking me to a NEW page.

116

Example of CSS ID as a navigation link?

117

2 Steps to make a navigation work with ID's?

1. In the index.html window, give each section ID a name.

2. In the code, add a hashtag and then the ID to the href.

118

Example of making a navigation working with an ID:

if , then
  • Home
  • .

    119

    In an article, I’m using a a bunch of famous quotes – one of which is, as far as I’m concerned, the most important quote. What is the right way to use classes and IDs in this instance?

    All the quotes get a class called "quotes", while the most important quote gets an ID of "most-important-quote".

    120

    What is the right way to add a class name to an HTML element?

    < p class="class-name" >

    121

    What is the right way to add an ID name to your CSS?

    #id-name

    122

    A layout is simply what?

    How one would arrange HTML elements on a webpage.

    123

    One thing that all GOOD layouts have in common is they follow some sort of _____.

    grid

    124

    What 3 things do grid's help with when designing a webpage?

    1. Keep ELEMENTS in line
    2. Organize a site's SECTIONS
    3. Divide a page up according to desired emphasis

    125

    BEFORE I start coding it is important to take some time to do what?

    Decide what layout I am going to use.

    126

    What are 2 ways I can preplan a websites layout?

    1. Photoshop
    2. Piece of paper

    127

    Describe a RESPONSIVE LAYOUT.

    A website's layout that changes based on the device it is being viewed on.

    128

    What is a STATIC LAYOUT?

    A website layout that maintains its size no matter what device one views it on.

    129

    What are the 5 most common website layouts?

    1. One column
    2. Two column
    3. Three column
    4. Gridded
    5. Masonry

    130

    What does CSS's FLOAT property tell my HTML elements?

    To float up next to each other instead of stacking in a block on top of each other.

    131

    What does a CSS FLOAT property code look like?

    p {
    float: none;
    }

    132

    What are the 4 CSS FLOAT property choices?

    1. None (default)
    2. Left
    3. Right
    4. Inherit

    133

    What does CSS's INHERIT FLOAT property tell my HTML element to do?

    Inherit the float property from the element that is wrapped around it, or its parent element

    134

    if you float things left, they will sidle up alongside one another 1, 2, 3 from _____ to _____.

    left
    right

    135

    If you float things right, they will stack next to each other 1, 2, 3, from _____ to _____.

    right
    left

    136

    How do I get 30px between a website's elements that have a width of 960px, a left-hand column of 630px, and a right-hand column of 300px?

    1. Float both elements to the right
    2. Give them their perspective widths
    3. Apply a margin-right: 30px to the left-hand column

    137

    What is the set of rules that make block elements stack on top of each other and inline elements display inline.

    Document flow

    138

    When you float something, you are literally _____ it from the document flow.

    removing

    139

    When an element is floated, the other HTML elements no longer realize it’s there and are acting as if it _____

    disappeared

    140

    What is DOCUMENT FLOW?

    Dictates how HTML elements are positioned on a page.

    141

    How do I get elements to line up next to one another?

    Break the HTML document flow by floating them

    142

    What is the BEST way to avoid FLOATING issues?

    FLOAT as few elements as possible

    143

    The less HTML elements you _____, the fewer elements are removed from the _____ flow, the easier things will be.

    FLOAT
    DOCUMENT

    144

    What is the BEST strategy to float elements to avoid issues?

    FLOAT the biggest element rather than a bunch of little ones.

    145

    What CSS properties can I use if I run into FLOATING issues?

    1. CLEAR property
    2. OVERFLOW property

    146

    What does the following do?

    div {
    overflow: auto;
    }

    Tells the HTML element what to do if it’s contents don’t fit into its container.

    147

    Why would a
    with a bunch of floated elements inside of it have NO height?

    Because all of its CHILD elements are floated so it thinks it is empty.

    148

    How can I use CSS to help a HTML element "remember" it has children that are being floated within it?

    By adding the CSS OVERFLOW property to the HTML element it will help the element "remember" the child elements and its height will expand to the size it needs to be to fit all of the elements inside of it.

    149

    What does the CLEAR property do for HTML?

    Tells an element

    1. Whether other floating elements are allowed to float next to it (and if so, on which sides of the element

    2. Whether the element needs to be moved down (or cleared) below any other floating elements.

    150

    What does “overflow: auto;” allow one to do?

    Adding this to a parent container causes the container to come back (if missing)

    151

    If I apply the float:left; property to a div, what will happen?

    It will float to the left, meaning it will allow other elements to the float alongside it to its right

    152

    Why can floating elements cause problems?

    When an element is floated it is removed from the document flow

    153

    What does overflow:auto; do?

    It makes the parent element grow to the size it needs to be to contain all of it’s floated child elements

    154

    What does clear:both; do?

    It makes sure that the element it is applied to doesn’t float up next to a floated element

    155

    If I want to add a color to the background of a div, what property do I use?

    background

    156

    What’s the difference between a class and an ID?

    A class applies to style settings for a group of elements, and an ID only applies a single HTML element on a page

    157

    Margins do not affect how well my divs fit and line up inside a fixed-width container.

    FALSE