CSS

Question 1

CSS makes a website ___

Answer 1

Pretty (the designer of the website)

Colors, font, spacing

Question 2

CSS stands for ___

Answer 2

Cascading Style Sheet

Question 3

100% when using CSS you need to have this tag

Answer 3

selector (element you want to change {property (color, etc.): value (what you want to change it to);}

IT MUST ALWAYS BE IN THE HEAD

Question 4

Give an example of using color for h1 using css

Answer 4

h1 { color: red; font-family: arial;}

Question 5

How to get more spacing in paragraph lines?

Answer 5

p {line-height: ;}

Question 6

what does:
background-image:url(file.type);
background-repeat: no-repeat;

Answer 6

Background image and no repeat for text/css (mostly used for the body)

Question 7

Four characteristics of elements (box model):

Answer 7

text, padding, margin, border

Question 8

How many styles can a link have?

Answer 8

4 link styles for the different states. the states are:

1) Link
2) visited
3) hover
4) active

Question 9

How do you make a css rule just affect one part of an element?

Answer 9

<span> text </span>

In the head, you give span it’s style properties

Question 10

How do you create unique styles for elements? How to give different styles to div?

Answer 10

using CSS, use ID’s

In header, use #IDNAME to create an ID

Then go to element, and add id = “IDNAME”;

Question 11

What does this represent in CSS: p > a?

Answer 11

paragraph is the parent and a is the child

Question 12

How do you apply style to only a specific part of an element?

Answer 12

You’ll have to use pseudo elements

p: first-letter {}

Question 13

How do you link to an external style sheet?

Answer 13

Note: Useful for multiple pages. GET RID OF STYLE TAGS WHEN USING. Remember the saved file you are referencing should be a .css file.

Question 14

What is the difference between absolute vs relative positioning?

Answer 14

Absolute is from the top left and relative is from the original position relative

Question 15

How to create a basic form>

Answer 15

Name:

Question 16

What are the three ways of attaching CSS to a document?

Answer 16

Inline, Internal, External. Inline and internal CSS are considered to be bad practices.

Question 17

What is a stylesheet?

Answer 17

List of rules. Each rule or ruleset consists of one or more selectors and a declaration block

Question 18

What is the purpose of a CSS selector?

Answer 18

Selectors are used for declaring the HTML elements to which a style will apply

Question 19

What are the most common selectors?

Answer 19

1) All elements with a specific HTML tag (e.g., p,h1)
2) Elements specified by the following attributes:
ID (these are preceded by # in CSS)
class (these are preceded by . in CSS)

Question 20

What is a declaration block and what does it contain?

Answer 20

A declaration block is a list of declarations contained within braces. Each individual declaration consists of a property, a colon :, and a value.

Note: If there are multiple declarations then they must be separated by a semi-colon

Question 21

What is the internal priority for CSS?

Answer 21

element (1 pt)
.class (10 pt)
#id (100 pt)

Question 22

Width and height styling elements can be expressed in ?

Answer 22

Pixels and percentage. If you are working with static content, then px is suitable, but if you are working with responsive design, you will want to use %

Question 23

What is the purpose of styling element overflow?

Answer 23

Content inside of a container is too much for the container size. You can, hide, show no matter what, or scroll bar

Question 24

What are some of the background properties that can be modified?

Answer 24

background-color, background-image, background-position, background-size, background-repeat

Question 25

What does the border property do?

Answer 25

Property adjusts all border elements in one line. The first value is border thickness. Second value is border type. Third value is border color.

border-width, border-style, and border-color
border-top, border-bottom, border-right, border-left

border-radius also makes a change to the roundness of your border and can use px or %

Question 26

What do the following properties do: color, text-align, text-decoration?

Answer 26

Color is the color property, align sets the horizontal alignment of any text, text decoration is used to add and remove underlines, overlines, and line-throughs

Question 27

What are the two types of fonts in font-family?

Answer 27

named-family (such as times, courier) and generic-family (serif, sans-serif, cursive, fantasy, monospace)

Question 28

What are some web safe fonts? What is a web safe font?

Answer 28

Regardless of system, fonts are able to be used. Some of these are: Verdana, Arial, Trebuchet MS, Times New Roman, Georgia, Andale mono, Courier New, Comics Sans, and Impact

NOTE THAT FONTS WITH MORE THAN ONE WORD NEED SURROUNDING QUOTES

Question 29

If a font-style has no italic, what can be used to mimic?

Answer 29

Oblique to control the slanted emphasis

Question 30

What does font-weight do?

Answer 30

This property controls the thickness of a character line. can be set numerically or semantically like ‘bold’

Question 31

What is the difference between inline elements and block elements?

Answer 31

Inline items only take as much space as needed. Block items take up the 100% of the width of the parent element.

Question 32

What are examples inline elements? What are examples block elements?

Answer 32

Inline elements: a, img, span, input, label, select, textarea

Block elements: body, div, form, h1-h6, p, table, ul, ol, li

NOTE: You cannot put block elements inside inline elements

Question 33

What are the possible display property values?

Answer 33

inline, block, none, inline-block

Question 34

What are the three rules for content fitting?

Answer 34

Total area: the space an element occupies and affects
Float, clear and overflow
Nested elements

Question 35

shorthand for content fitting?

Answer 35

padding: top right bottom left

Question 36

What are the elements that do not have their margins collapsed?

Answer 36

Floated elements, absolutely positioned elements, inline-block elements, elements with overflow property set to anything other than visible (They do not collapse margins with their children), cleared elements (They do not collapse their top margins with their parent block’s bottom margins)

Question 37

The position property can also be used to move elements on a page.

Answer 37

USE THE POSITION PROPERTY ONLY WHEN YOU NEED TO. Otherwise, use the display property and the box model to position your elements.

Question 38

What are the main four position specifications?

Answer 38

Static, Relative, Absolute, Fixed

Question 39

Explain the four major positions

Answer 39

Static - Default, will follow flow of DOM
Relative - Relative to where the element should have been initially
Absolute - Position from last item that is not static
Fixed - Position relative to window

Relative is the only one that maintains flow

Question 40

Describe more about the absolute position

Answer 40

An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. If no parent element up the chain meets that condition the absolutely positioned element is positioned relative to the document window.

Question 41

How do you solve many cross-browser issues?

Answer 41

you should RESET and NORMALIZE…also validating your html/css often

Question 42

What is a good example of a reset?

Answer 42

*{ padding:0; margin:0;}

Question 43

Condensed Universal Reset?

Answer 43

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}