diff options
| author | Dmitrii Kuznetsov <torgeek@gmail.com> | 2021-02-22 18:42:33 +0300 |
|---|---|---|
| committer | Dmitrii Kuznetsov <torgeek@gmail.com> | 2021-02-22 18:42:33 +0300 |
| commit | e09fefaa3e78c645c720c86391e3f96d257be8a9 (patch) | |
| tree | 0ff8b235e3e707125e2b11d5268ad085832355cb /css.html.markdown | |
| parent | f4c740839d78f797e9cbcfa1eb0483ac0ea45501 (diff) | |
| parent | bc8bd2646f068cfb402850f7c0f9b1dbfe81e5a0 (diff) | |
Merge branch 'master' of https://github.com/torgeek/learnxinyminutes-docs
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/css.html.markdown b/css.html.markdown index 3b378d44..b8adc886 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -135,6 +135,10 @@ selector::after {} .parent * { } /* all descendants */ .parent > * { } /* all children */ +/* Group any number of selectors to define styles that affect all selectors + in the group */ +selector1, selector2 { } + /* #################### ## PROPERTIES #################### */ @@ -160,14 +164,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 */ @@ -175,7 +179,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 */ @@ -313,6 +317,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 |