Exam 2 Review

Cascading Style Sheet

What CSS stands for

change appearance of a website

Main usage of CSS

• maintainability (separate form from content)

• code verbosity (only one file)

• efficiency (styles for multiple devices)

Three benefits of CSS

• External

• Internal

• In-line

Three ways to style HTML from least to most specific

The most specific

If using multiple ways of styling an HTML file, which will get priority?

External styling

written in files that end in .css, can affect multiple HTML files, least specific

Internal styling

Written inside the HTML file, only effects one HTML file, uses the <style> tag, medium specificity

In-line styling

Written inside a single HTML tag, only effects that tag, uses a style=”” attribute, has the most specificity

<link rel="stylesheet" type="text/css" href="something.css">

(Coding) How to link HTML to a CSS file

• rel

• type

• href

<link> three required attributes

selectors

In HTML, they are called tags, in CSS, they are called:

properties

In HTML, they are called attributes, in CSS, they are called (ex. height, width):

*{
	margin: 0;
	box-sizing: border-box;
}

(Coding) The universal selector, what goes at the start of every CSS file

Override browser’s spacing

Purpose of margin: 0; in universal selector

Prevent styling distortions

Purpose of box-sizing: border-box; in universal selector

margin

refers to the spaces outside of an HTML tag

padding

refers to the spaces inside of an HTML tag

All directions are affected

For margin and padding, 1 value in a property means:

Up-down, left-right

For margin and padding, what is the order of property modification with 2 values?

Up, left-right, down

For margin and padding, what is the order of property modification with 3 values?

Up, right, down, left

For margin and padding, what is the order of property modification with 4 values (hint: clockwise)?

display: block;

How to make an inline element display as a block element

display: inline;

How to make a block element display as an inline element

margin: auto;

How to center block level elements

text-align: center;

How to center inline elements (only works from a parent tag)

ul li a{
}

(Coding) How to target specifically the <a> tag of a navigation menu

• color names

• hex codes

• rgb and rgba codes

• hsl and hsla codes

4 methods of adding color to CSS

#??????

Format of a hex code

rgb(redness[0-255], greenness[0-255], blueness[0-255], opacity[0-1])

Format of rgb/rbga code

hsl(hue[0-360], saturation[0-100%], lightness[0-100%])

Format of hsl codes

/*...*/

(Coding) how to leave comments in CSS

nav{
	padding: 1%;
}

nav ul{
	padding-left: 0;
	list-style: none;
}

nav li{
	display: inline;
	padding: 1%;
	border: 2px solid black;
}

nav a{
	text-decoration: none;
}

(Coding) How to turn a ul nav into what looks like buttons

text-transform: lowercase;

Property and value that will allow you to change all letters to lowercase

text-transform: capitalize;

Property and value that will allow you to capitalize the first letter of every word

• serif

• sans-serif

• monospace

• cursive

• fantasy

Five generic font families

False

(T/F) When using the font-family attribute, you only need to reference one font.

Font stack

A list of fonts separated by commas, needed to provide options to users if their computers don’t support certain fonts

font-family: Arial, "Helvetica Neue", Helvitica, sans-serif;

(Coding) Example of a fonts stack

font-style, font-variant, font-weight, font-size, font-family

Shorthand of font property order

#

How to target an id in CSS

.

How to target a class in CSS

selector, parent/child, class, id

Order of selector specificity

• create a clear visual hierarchy of contrast

• define functional regions of the page

• group the page elements that are related

Three purposes of graphic design

Usability

Making sure that something works well for people of average to below average ability

Whitespace

Should maybe be called empty space, area between elements

Responsive design

Website design changes when you change the size of the screen

img{
	max-width: 100%;
}

(Coding) How to make an image responsive

@media screen and (max-width: 900px) {
	#container{
		display: flex;
		flex-direction: column;
	}
	nav{
		width: 100%;
	}
	nav li{
		display: inline;
	}
	main{
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: space-around;
		align-items: center;
	}
}
		

(Coding) A website is designed with a flex row layout, which does not look good on mobile devices. What is an example of a media query to change it to look good on mobile (assuming use of container and page-wrapper ids)?

%, vw, vh

Responsive units for values

calc(_px + _vw)

How to make font size responsive