CSS Flashcards
This describes how HTML documents are to be rendered on screen.
CSS (Cascading Style Sheets)
CSS makes use of _________ (except in inline style) to specify which element/s to apply style to.
selector
in selector
to select id
. in selector
to select class
main.text
combination of both id and class
main .text
refers to the child element of ‘main’ that have the class ‘text’
main > .text
refers to the direct child element of main that has class text.
class=”one two”
has two class name = one, two
.one.two
select tags that have both the one and two class name.
.one, .two
refers to multiple elements that have either one or two as class name.
3 ways to declare CSS in HTML
- Inline styling
- Internal style sheets
- External style sheets.
How to add an external stylesheet to html?
<link rel”stylesheet” type=”text/css” href=”style.css
CSS allows several style sheets to ________________ of a document (hence Cascading).
influence the presentation
Factors in Cascading:
- Importance and Origin.
- Specificity
- Source Order
The style of any element has 3 possible origins:
- Author
- User
- User-Agent
This origin of CSS is provided by the webpage author.
Author
This origin of CSS is due to browser settings as configured by the ______.
User
This origin of CSS is the default type sheet of the rendering engine.
User Agent.
By default, styles originating from the author take _______ over User and User Agent Styles.
precedence
________ declarations take precedence over non-important ones.
!important
For conflicting rules of similar weight, the ________ is applied.
last rule (source order)
!important declarations also ___________ the order of precedence by origin.
order
Specificity is determined by ____________________ of tags ,classes, id, attributes, etc., in the selector.
counting the number
The most ________ selector takes precedence
specific
Determining factors for specificity
- In-line
- Contains an ID
- Number of Classes, attributes, and pseudo-classes.
- Number of tags and pseudo elements.
This can be appended to a selector to style specific parts of an element.
Pseudo Element
This can be appended to a selector to style a special state of an element.
Pseudo Class
If importance, origin, and specificity are all equal, the last declared style overrules the rest.
Source Order
This kicks in when no source tries to set a property.
Inheritance
It’s way of propagating values from parent elements to children, eliminating redundancy.
Inheritance
Not all properties can be _________.
Inherited e.g. border.
If even inheritance does not result in a value for a property, then the __________________ is used.
default value
Surfing the web on mobile is verry commonplace, so it’s more important than ever to ______________________.
optimize websites for mobile.
It would be difficult to hard-code layouts for all existing screen sizes, so web pages need to be ________.
responsive
Responsive design is achieved through the use of _______________.
media queries.
Media Queries are used to apply a block of CSS only if _____________.
certain conditions are met
Media Queries in CSS can check for:
- Width/height of the viewport
- Width/height of the device
- Orientation
- Resolution
- Media Type(screen, print, speech)
Most developers design _________.
Mobile-first
