Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to mix selectors (eg. Combine classes and IDs).
- How to group selectors as a best practice to get a much optimized CSS.
READY-TO-USE CODE:
http://localhost/courses/css/css-fundamentals/mix-group.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
TARGET AN ELEMENT WITH A CLASS OR ID
<body>
<h1 class="deals">Deals</h1>
<p class="deals">Enjoy our special deals
today.</p>
</body>
p.deals { color: green; }
Web page title
index.html
Deals
Enjoy our special deals today.
READY TO USE CODE
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
TARGET AN ELEMENT WITH A CLASS OR ID
<body>
<h1 id="deals">Deals</h1>
<p id="deals">Enjoy our special deals
today.</p>
</body>
p#deals { color: green; }
Web page title
index.html
Deals
Enjoy our special deals today.
READY TO USE CODE
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
COMBINE CLASSES AND IDS
<body>
<p class="intro" id="deals">We have great
deals for you.</p>
<p class="intro">We hope you enjoy our
content.</p>
<p>Let's get started.</p>
</body>
.intro#deals { color: green; }
Web page title
index.html
We have great deals for you.
We hope you enjoy our content.
Let's get started.
READY TO USE CODE
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
GROUP SELECTORS
<body>
<h1>Deals</h1>
<p class="intro">Welcome to our daily
deals.</p>
<div id="special">Only this week: 10%
discount.</div>
</body>
h1, .intro, #special { color: green; }
Web page title
index.html
Deals
Welcome to our daily deals.
Only this week: 10% discount.
READY TO USE CODE
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
GROUP SELECTORS
<body>
<h1>Deals</h1>
<p class="intro">Welcome to our daily
deals.</p>
<div id="special">Only this week: 10%
discount.</div>
</body>
h1,
.intro,
#special {
color: green;
}
Web page title
index.html
Deals
Welcome to our daily deals.
Only this week: 10% discount.
Best practice
READY TO USE CODE
10. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
11. We respect your timeâš
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use codeâš
Real code you can just copy and paste into
your real projects.
Step by step guidesâš
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com
12. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Mix & group