CSS Flashcards
What does CSS stand for?
Cascading Style Sheets
What is the purpose of CSS?
It alters and styles the appearance of a webpage. For example, it changes font, text color, size, spacing, etc.
What are the parts of the CSS syntax rule?
- Selector
- Declaration
- Property
- Value
What is the selector in a syntax?
The selector is the HTML element that is being styled.
What is the declaration in a syntax?
The declaration is a pair of property and value, separated by a colon. It is closed with a semicolon at the end.
What is a declaration block?
It is a structure that begins with an opening brace ( { ) and ends with a closing one ( } ).
What is the property in a syntax?
The specific aspect or characteristic of the selector that is being modified.
What is the value in a declaration?
The setting for the property, such as blue as color, 30px as font-size, or 2px solid black as border.
How can you type a comment in CSS?
By using this text: /*(insert text here)*/
How are colors specified?
With predefined color names (red, yellow, sky blue) or RGB, HEX, HSL, RGBA, and HSLA values.
Which property sets the background color of an element?
background-color
Which property sets the color of a text?
color
What does RGB stand for?
Red Green Blue
How does RGB function?
Each parameter is set from 0 to 255 (0 being the lowest intensity and 255 being the highest). The more intense a color is, the more it will be visible.
How can you make shades of grey with RGB?
By aligning the parameters to be equal.
Ex: rgb(60, 60, 60)
What does the A mean in RGBA and what is its function?
Alpha.
The function of alpha is to adjust the opacity of a color from the value of 0-1. 0 is fully transparent, and 1 is not transparent at all.
What is a HEX color?
A HEX, or hexadecimal color, is specified with #RRGGBB. The RR is red, the GG is green, and the BB is blue. They describe the components of a color.
How are HEX colors measured?
The values are between 00 and ff, which is equivalent to 0 and 255 in RGB.
Ex: #ff0000 is red because red is the highest value.
How can you make shades of grey with HEX?
Use equal values for all three light sources.
Example: 3c3c3c, f9f9f9
What does HSL stand for?
Hue Saturation Lightness
I don’t really care about HSL so I’m not gonna bother to elaborate further
Okay 👍
Which property states the opacity of an element?
opacity
Tip: The value spans from 0.0 to 1.0. The lower the value, the more transparent.
Which property specifies an image to use as a background?
background-image
Which value is used to input an image as a background for the background-image property?
url(“…”)
By default, a background image would repeat both horizontally and vertically. How can you prevent this from happening?
By using the background-repeat: no-repeat; declaration.
Which declaration repeats a background image horizontally?
background-repeat: repeat-x;
Tip: X refers to the x-axis, which is horizontal.
Which declaration repeats a background image vertically?
background-repeat: repeat-y;
Tip: Y refers to the y-axis, which is vertical.
Which property specifies the position of a background image?
background-position
Which property specifies whether the background image would be fixed or scroll (scroll meaning that the image goes down or up with the rest of the content)?
background-attachment
Which property is used for shorthand coding for backgrounds? (by shorthand, I mean without typing the extra properties)
background
Which property specifies the style of a border, or what kind of border to display?
border-style
Which property defines a border’s width? And what predefined values are set for that property?
border-width
thin, medium, or thick
Which order does styling a border (or anything like margins) go?
Clockwise
(top, right, bottom, left)
Which property specifies a border’s color?
border-color
Which property is shorthand for border-style, border-width, and border-color?
border
Which property rounds borders?
border-radius
Which properties sets the characteristics of a border’s sides?
border-right
border-left
border-bottom
border-top
What do margins do?
Margins create space around elements outside of any defined border.
Which properties specify the margin of an element’s side?
margin-top
margin-bottom
margin-left
margin-right
What is the shorthand property for all margin properties?
margin
Which value automatically centers an element horizontally?
auto
What does padding do?
Padding creates space between elements and their borders.
