diff options
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 36 |
1 files changed, 21 insertions, 15 deletions
diff --git a/css.html.markdown b/css.html.markdown index 64dc097c..948b70ac 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -102,19 +102,24 @@ div.some-parent.class-name { } /* There are some selectors called pseudo classes that can be used to select an element only when it is in a particular state */ -/* for example, when the cursor hovers over an element */ -selector:hover { } +/* for example, when a link hasn't been visited */ +selected:link { } /* or a link has been visited */ selector:visited { } -/* or hasn't been visited */ -selected:link { } - /* or an element is in focus */ selected:focus { } -/* any element that is the first child of its parent */ +/* or when the cursor hovers over an element */ +selector:hover { } + +/* or when a link is clicked on */ +selector:active { } + +/* These pseudo classes regarding links should always be written in the above order or the code might not work as expected */ + +/* Any element that is the first child of its parent */ selector:first-child {} /* any element that is the last child of its parent */ @@ -164,14 +169,14 @@ selector { max-width: 5in; /* inches */ /* Colors */ - color: #F6E; /* short hex format */ - color: #FF66EE; /* long hex format */ - color: tomato; /* a named color */ - color: rgb(255, 255, 255); /* as rgb values */ - color: rgb(10%, 20%, 50%); /* as rgb percentages */ - color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 <= a <= 1 */ - color: transparent; /* equivalent to setting the alpha to 0 */ - color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */ + color: #F6E; /* short hex format */ + color: #FF66EE; /* long hex format */ + color: tomato; /* a named color */ + color: rgb(255, 255, 255); /* as rgb values */ + color: rgb(10%, 20%, 50%); /* as rgb percentages */ + color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 <= a <= 1 */ + color: transparent; /* equivalent to setting the alpha to 0 */ + color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */ color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */ /* Borders */ @@ -179,7 +184,7 @@ selector { border-style:solid; border-color:red; /* similar to how background-color is set */ border: 5px solid red; /* this is a short hand approach for the same */ - border-radius:20px; /* this is a CSS3 property */ + border-radius:20px; /* this is a CSS3 property */ /* Images as backgrounds of elements */ background-image: url(/img-path/img.jpg); /* quotes inside url() optional */ @@ -317,6 +322,7 @@ a new feature. * [Dabblet](http://dabblet.com/) (CSS playground) * [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) (Tutorials and reference) * [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) (Reference) +* [DevTips' CSS Basics](https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy) (Tutorials) ## Further Reading |