Beginner CSS Flashcards
What does CSS stand for?
Cascading Styles Sheets
How does CSS differ from HTML?
HTML is the meaning or content
CSS is the presentation (style) of that document
What is the standard format of CSS?
property: value
What are the three ways to apply CSS?
- ) Inline
- ) Internal
- ) External
______ styles are plonked straight into the HTML tags using the style attribute.
Inline styles
How to use the color red?
color: red
True or False? Inline styles should be avoided wherever possible
True: HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible
_______ styles are used for the whole, multiple-page website. There is a separate CSS file.
External
What tag is used to include a CSS file in an HTML document?
link along with the attributes rel=”stylesheet” and href=”style.css”
Whereas HTML has tags, CSS has _________
Selectors
What are CSS selectors?
Selectors are the names given to styles in internal and external style sheets.
What are HTML selectors?
HTML selectors are simply the names of HTML tags and are used to change the style of a specific type of element
For each selector there are ________
Properties
A _______ is given to the property following a colon
Value
px
The unit for pixels: 12px
em
The unit for the calculated size of a font: 2em is two times the current font size.
pt
The unit for points, for measurements typically in printed media: 12pt
%
The unit for percentages: 80%
pc
The unit for picas
True or False: When a value is zero, you do not need to state a unit.
True: if you wanted to specify no border, it would be border: 0;
CSS has 24-bit color which provides how many colors?
16,777,216 colors
What are the four ways you can specify color in CSS?
- ) By name
- ) RGB (red / green / blue)
- ) Hex code
- ) HSL (hue, saturation and lightness)
The three values in the RGB value are from ______
0 to 255
0 being the lowest (no color)
255 being the highest (full color)
What is the compressed version of the hex value #ff0000
f00
What is the difference between the 3 and 6 digit version of a hex number?
The 3 digit version is easier to understand (RBG), but the 6 digit version provides more control over the exact color.
What two properties can be used to apply color?
color and background-color
font-family
This is the font itself, such as Times New Roman, Arial, or Verdana.
_________ sets the size of the font
font-size
font-weight
States whether the text is bold or not
font-weight: bold or font-weight: normal
States whether the text is italic or not
font-style
font-style: italic or font-style: normal
text-decoration
States whether the text has got a line running under, over, or through it
text-decoration: underline
text-decoration: overline
text-decoration: line-through
_______ will change the case of the text
text-transform
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none
True or False
Underlines should only really be used for links?
They are a commonly understood web convention that has lead users to generally expect underlined text to be a link.
The ______________ properties are for spacing between letters or words.
letter-spacing and word-spacing
The value can be a length or normal
line-height
The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.
The _______ property will align the text inside an element to left, right, center, or justify.
text-align
The _______ property will indent the first line of a paragraph, for example, to a given length or percentage.
text-indent
This is a style traditionally used in print, but rarely in digital media such as the web.
What are the two most commonly used properties for spacing-out elements?
margin and padding
Margin?
A margin is the space outside something
______ is the space inside something
padding
The four sides of an element can also be set individually with which type of properties?
margin-top
margin-right
margin-bottom
margin-left
What is The Box Model?
Margins, padding and borders are all part of what’s known as The Box Model.
- ) The content area
- ) Padding box
- ) Border box
- ) Margin box
True or False?
The box model can be applied to every element on the page
True
To make a border around an element, all you need is __________
border-style
The values of border
solid, dotted, dashed, double, groove, ridge, inset, outset
border-width
border-width sets the width of the border, most commonly using pixels as a value
border-color
border-color sets the color
