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
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.
