CSS Flashcards
CSS
Cascading Style Sheets
describe how HTML documents are to be rendered on screen
CSS
specify which elements to apply style to
selectors
<p id='main' class='text'>
p#main.text
<p id='main'>
<span class='text'>
. . .main .text
<p id='main'>
<span class='text'>
. . .main > .text
<div class='one'></div> <div class='two'></div>
.one, .two
ways to declare CSS in HTML
inline styling
internal style sheets
external style sheets
<p style="color: red;"> some text </p>
inline styling
<style type="text/css">
p { color: green; }
</style>Internal Stylesheet
<link rel='stylesheet' type="text/css" href="style.css">
External Stylesheet
allows several style sheets to influence the presentation
cascading
Factors of cascading
Important and Origin
Specificity
Source Order
style of an element possible origins
Author
User
User-Agent
declaration that takes precedence over non-important ones
!important
determining factors for specificity
In-line
Contains an ID
Number of classes, attributes, and pseudo-classes
Number of tags and pseudo elements
can be assigned to a selector to style specific parts of an element
Pseudo Element
pseudo elements
::after
::before
::first-letter
::first-line
::selection
can be appended to a selector to style a special state
Pseudo Class
pseudo class examples
:link
:visited
:hover
:active
last declared style overrules the rest
Source order
kicks in when no source tried to set a property
inheritance
used to apply a block of CSS only if certain conditions are met
Media Queries
TRUE OR FALSE
Most developers design mobile-first
TRUE
