The CSS setup
There's a special selector that can instantly select every single element on the web page: the *universal selector*. What's an example of the *universal selector* being used?
* { font-family: Arial; }
What does the CSS property line-height do?
*Specifies the space between the lines in two paragraphs*. You can use *percentages, pixels, or numbers* as the values.
(CSS) To modify a background image's size, you can use the __________ _ ____ property.
*background-size*
(CSS) In the *default box model*, box dimensions are affected by border __________ and ________.
*border thickness* and *padding*
(CSS) If you'd like to be even more specific about the width of different sides of the border, you can use the following properties:
*border-top-width* border-right-width *border-bottom-width* border-left-width
(CSS) The *visibility* property can be set to one of the following values:
*hidden* - hides an element. *visible* - displays an element.
All HTML elements can be classified as one of the following: ______ ________ or ___________ ________
*inline elements* or *block-level elements*.
(CSS) If you want to be even more specific about the amount of *margin* on *each side of a box*, you can *use the following properties*:
*margin-top* margin-right *margin-bottom* margin-left
(CSS) If you want to be even more specific about the amount of padding on each side of a box's content, you can use the following properties:
*padding-top* padding-right *padding-bottom* padding-left
(CSS) Each *declaration includes* a CSS _________ ____* and a _____, separated by a colon.
*property name* and a *value*
(CSS) A border's style can be set with the *border-style* property. This property can take on one of the following values:
*solid* dashed *dotted* double *groove* inset *outset* ridge *hidden* or *none*
You can control the thickness, or width, of borders with the *border-width* property. You can change the thickness using these three values.
*thin* medium *thick* px
(CSS) How do you change the *box-model* for all elements on the webpage?
*{ box-sizing: border-box; }
How do you reset the default *user agent stylesheet* in a browser?
*{ margin: 0; padding: 0; }
(CSS) this value accepts two arguments: the two colors the linear gradient will transition to and from. The colors are usually specified as hex color codes.
-webkit-linear-gradient()
(CSS/HTML) To style elements of the same class, you can use a _____ ________ ( . ) in the stylesheet.
.class-selector{ };
CSS comments begin with __ and end with __, like so:
/* This is a comment in CSS! */
It's not enough to simply select an HTML element in a CSS file. To actually *style the element*, you need to *specify two things inside* the *body of the selector*:
1. *Property* - the property you'd like to style of that element (i.e., size, color, etc.). 2. *Value* - the value of the property (i.e., 18px for size, Blue for color, etc.).
The *overflow* property controls what happens to content when it spills, or overflows, outside of its box. It can be set to one of the following values:
1. *hidden* - when set to this value, any content that overflows be hidden from view. 2. *scroll* - when set to this value, a scrollbar will be added to the elements box so that the rest of the content can be viewed by scrolling
A CSS stylesheet can be linked to an HTML file using the <link> element, which requires three attributes:
1. *href* - set equal to the path of the CSS file. 2. *type* - set equal to text/css. 3. *rel* - set equal to stylesheet.
The *text-align* property can be set to one of the following three values:
1. *left* (aligns text to the left hand side of the browser.) 2. *center* (centers text) 3. *right* (aligns text to the right hand side of the browser)
When all of that CSS code is placed within a <style> element in an HTML file, you risk the following two things:
1. Creating a large HTML file that is difficult to read and maintain (by you and other developers). 2.Maintaining a clear distinction between web page structure (HTML) and web page styling (CSS).
The *float* property can be set to one of two values:
1. Left 2. Right
(CSS) There are three units of measurement for font size:
1. px 2. percentages 3. ems
(CSS) When an image *communicates important information*, you can use the <___> element and style the image using CSS, if needed.
<img>
If the *CSS file* is *stored in the same directory* as your *HTML file*, then you can *specify a relative path instead of a URL*, like so:
<link href="/style.css" type="text/css" rel="stylesheet">
What's an example of linking your CSS file to your HTML webpage?
<link href="style.css" type="text/css" rel="stylesheet">
You can use the <____> element to link the HTML and CSS files together.
<link>
The <_____> element allows you to write CSS code between its opening and closing tags. To use the <_____> element, it must be placed inside of the head.
<style> </style>
A *CSS declaration always ends with a _________*, and *declaration blocks* are surrounded *by _____ ______*.
A *CSS declaration always ends with a semicolon*, and *declaration blocks* are surrounded *by curly braces*.
What does CSS stand for?
Cascading Style Sheets
What does *HSL* stand for?
Hue, Saturation, and Lightness
(CSS/HTML) No two HTML elements should ever share the same __ that would defeat the purpose of a unique identifier!
ID
(CSS/HTML) To style a specific element labeled with an ID, you can use an __ ________ in the stylesheet.
ID selector
The extra *a* character in the *rgba*() value is known as the _____ _____ . It represents the opacity of a color. The alpha value can be a number between 0 or 1, inclusive.
alpha value
(CSS) When an image is *intended to style* a web page, you can use the __________ property and further style it with CSS.
background
(CSS) With the __________ _ __________ property, you can specify whether or not a background image should *remain at one position* on the web page or whether it should *move up and down* as the user scrolls through a web page.
background-attachment
(CSS background-attachment property) this value pins the image's position on the page.
background-attachment: fixed;
(CSS background-attachment property) this value allows the image to move up and down as a user scrolls on the web page (this is the default value).
background-attachment: scroll;
(CSS) Images can also be added to the backgrounds of HTML elements with the __________ _ _____ property.
background-image
(CSS) What's an example of the *background-image* property being used with the *-webkit-lenear-gradient()* value?
background-image: -webkit-linear-gradient(#666CCC, #BC1324);
(CSS) You can control how a *background image repeats* with the __________ _ ______ property.
background-repeat
(CSS background-size property) expands the image as large as possible, but the image will be *letterboxed*, which means it won't cover the full width or height of a container.
background-size: contain;
(CSS background-size property) expands the image as large as possible to cover the full width or height of a container. If the dimensions of the container (say, a div) are larger than the dimensions of the image, the image will become distorted. This value is best for images that don't communicate important content to the user, like background images.
background-size: cover;
(CSS) For images to center properly, they must behave as _____ _ _____ elements.
block-level
(CSS) The value for the *new box model* is ______ _ ___
border-box
(CSS) The color of a border can also be customized with the ______ _ _____ property.
border-color:
(CSS clear property) neither side of the element will touch any other element within the same containing element.
both
(CSS) Using the *offset* property , how would you *move a element* up?
bottom:
(CSS) The ___ _ ______ property controls the box model used by the browser.
box-sizing
(CSS) When the margin property is set to auto, the element being styled will ______ __ ___ ____.
center in the page
(CSS/HTML) For multiple elements that should share the same styling, _______ can be used to label them.
classes
(CSS) The _____ property specifies how elements should behave when they bump into each other on the page.
clear
(CSS) The default value of the *box-sizing* property is _______ _ ___
content-box
In CSS, you can change the default behavior of elements with the _______ property.
display
(CSS) What *display: value* that allows us to easily align multiple page elements vertically or horizontally.
display: *flex*;
(CSS) If you're simply interested in *moving an element* as *far left* or as *far right* as possible *on the page*, you can use the ______ property.
float
(CSS float property) this value will move, or float, elements as *far left* as possible
float: left;
(CSS float property) this value will move, or float, elements as *far right* as possible
float: right;
(CSS) To use fallback fonts, the following syntax is required:
font-family: Garamond, Times, serif;
You can italicize words with the ____ _ _____ property.
font-style:
In CSS, the ____ _ ______ property turns bold on or off.
font-weight:
In CSS *multiple element selectors* can be used to *style multiple elements at once*. What's an example of this?
h1, h2, p { color: Green; }
What's an example of using the *HSL color value* in your CSS?
h1{ color: hsl(10, 20%, 20%); }
(CSS) Another version of the *padding property* lets you specify exactly ___ ____ padding there should be on each side of the content.
how much
The alpha value can also be used for HSL colors, using ____():
hsla()
(CSS/HTML) To label an element with an ID, we can use the __ _________ on an HTML element.
id attribute
(CSS) When the *line-height* of an element is modified, you are manipulating the _______ of the font.
leading
(CSS clear property) the left side of the element will not touch any other element within the same containing element.
left
(CSS) Using the *offset* property , how would you *move a element* right?
left:
The technical term for adjusting the spacing between letters is called "kerning". Kerning can be adjusted with the ______ _ _______ property in CSS.
letter-spacing:
(CSS) The ______ refers to the space directly outside of the box. You can adjust this spacing with the ______ property.
margin
This CSS property ensures a *maximum height* for an element's box.
max-height:
This CSS property ensures a *maximum width* for an element's box.
max-width:
This CSS property ensures a *minimum height* for an element's box.
min-height:
This CSS property ensures a *minimum width* for an element's box.
min-width:
(CSS background-repeat property) the background image will not be repeated at all and will appear only once
no-repeat
(CSS clear property) the element can touch either side.
none
(CSS) The *border-box* model is ___ ________ by *border thickness* or *padding*.
not affected
(CSS) The space between the contents of a box and the borders of a box is known as _______.
padding
(CSS) When an element's position is set to ________ all other elements on the page will ignore the element and act like it is not present on the page.
position: absolute;
(CSS) We can fix an element to a specific position on the page (regardless of user scrolling) by setting its *position* to _____.
position: fixed;
(CSS) When *margin: auto* is used, an element will center ________ __ ___ _________.
relative to its container
(CSS background-repeat property) the default value -- the image will repeat horizontally and vertically
repeat
(CSS background-repeat property) the background image will be repeated only along the x-axis (horizontally)
repeat-x
(CSS background-repeat property) the background image will be repeated only along the y-axis (vertically)
repeat-y
In CSS to use *RGB colors*, you can use the rgb() value when styling a color. What's an example of this?
rgb(10,10,10)
(CSS clear property) the right side of the element will not touch any other element within the same containing element
right
(CSS) Using the *offset* property , how would you *move a element* left?
right:
A CSS rule-set consists of a _________ and a ____________ block:
selector and a declaration block.
(CSS) The *position* property can take one of four values:
static - the default value (it does not need to be specified) *relative* absolute *fixed*
CSS, or Cascading Style Sheets, is a language that web developers use to _____ the HTML content on a web page.
style
(CSS) Text can be styled to appear in *all uppercase or lowercase* with the ____ _ __________ property.
text-transform:
(CSS) Using the *offset* property , how would you *move a element* down?
top:
IDs label HTML elements that are ______ to the web page (an element that appears only once).
unique
All major web browsers have a *default stylesheet* they use in the *absence of an external stylesheet*. These default stylesheets are known as ____ _____ ___________
user agent stylesheets.
(CSS) Elements can be hidden from view with the __________ property.
visibility
(CSS) In order to center an element using margin:, a _____ must be set for that element.
width
(CSS) You can also increase the spacing between words in a body of text, technically known as ____ _ _______.
word-spacing:
(CSS) The _______ property controls how far "back" or how far "forward" an element should appear on the web page.
z-index
