CSS Flashcards
Apply CSS to an element, page and entire site Apply element, id and class selectors Format text using CSS Design layouts using CSS (36 cards)
Three (3) ways to create and use cascading styles (CSS):
- External file
- Document wide
- Inline
Describe External file (for including CSS):
- The most popular and time-efficient way to create style sheets.
- You create an external file and then link it to any or all web pages in a site
- When changes are needed, updates only need to be made within the style sheet, not each individual page.
Describe Document Wide (for including CSS):
/*
CSS goes here
*/
- Add styles for the individual page in the section of the page.
- These styles can then be used anywhere in the page but cannot be used globally.
Describe Document Wide (for including CSS):
<p></p>
Inline styles are used for quick additions within a tag.
Describe the basic selectors for applying CSS to your elements:
p {
color: purple;
}
#main {
color: purple;
}
.gallery {
color: purple;
}
- Element selector. Used to change the style applied to all elements of the selected type. The following example changes the all paragraphs to purple.
- Id selector. Used to modify one element’s style. The following example changes only the element with an id attribute equal to “main”
3. Class selector. Used to modify multiple elements. The following example changes only the elements with class attributes equal to "gallery"
.gallery {
A CSS pseudo-class is a _______ added to selectors that specifies a special state of the element to be selected.
For example :hover will apply a style when the user hovers over the element specified by the selector.
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.
For example :hover will apply a style when the user hovers over the element specified by the selector.
Pseudo-_______, together with pseudo-______, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator
Styling links using the “____” tag pseudo-classes
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator
(:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).
Styling links using the “a” tag pseudo-classes
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Describe pseudo-element:
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
For example, ::first-line can be used to change the font of the first line of a paragraph.
CSS styles can overwrite each other.
Describe the priority:
- Style Tags
- ID
- Class
- Element (p tags)
!important –> overwrites, but not good practice
Unlike print layouts where the shape of content is quite flexible, web designers need to think in terms of _____ and _____.
Unlike print layouts where the shape of content is quite flexible, web designers need to think in terms of boxes and grids.
The Box Model describes the relationship between the ____, _____, ____, _____, and _____.
The Box Model describes the relationship between the content, padding, margin, width and height.
______ and ______ can be applied to all sides individually.
Padding and margin can be applied to all sides individually.
box-sizing: content-box.
By default, the “_____” and “______” properties set dimensions of the content.
Therefore, the total rendered width of the box would be: ____ + ____-left + ____-right + ____-left + ____-right.
box-sizing: content-box.
By default, the “width” and “height” properties set dimensions of the content.
Therefore, the total rendered width of the box would be: width + padding-left + padding-right + border-left + border-right.
box-sizing: border-box.
The “width” and “height” properties set dimensions of the _____ and includes ______, _____ and _____ widths.
Therefore, the total effective width of the rendered box would simply be: _____.
box-sizing: border-box.
The “width” and “height” properties set dimensions of the box and includes content, padding and border widths.
Therefore, the total effective width of the rendered box would simply be: width.
Responsive web design favours the _____- box behaviour.
Responsive web design favours the border-box behaviour.
Describe Basic Units of Measurement:
“Ems” (em)
Pixels (px)
Points (pt)
Percent (%):
“Ems” (em):
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is the font-size of an element’s parent, for instance, if the font-size of a parent div is 12px, 1em is equal to 12px for a child div.
Pixels (px): Pixels are ______-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one _____ on the computer screen (the smallest division of your screen’s resolution).
Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution).
Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser.
One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in _____ media (anything that is to be printed on paper, etc.).
One point is equal to __/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.).
One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences.
First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully ______ for mobile devices and for accessibility.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences.
First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Reading content in an HTML document, without any JavaScript or CSS applied, naturally flows top-down and ____-to-____. When an element is taken out of flow, space that it would have normally used is ______.
Reading content in an HTML document, without any JavaScript or CSS applied, naturally flows top-down and left-to-right. When an element is taken out of flow, space that it would have normally used is collapsed.
Block elements take up the entire_____ of the document and follow one after another with their inline content flowing _____ them.
Block elements take up the entire width of the document and follow one after another with their inline content flowing inside them.
Margins and padding may alter the look or spacing some, but they alone do not change the _______ of the elements.
Margins and padding may alter the look or spacing some, but they alone do not change the positioning of the elements.
