CSS CSS FUNDAMENTALS

IN A ROCKETLearn front-end development at rocket speed

CSS CSS FUNDAMENTALS

SelectorsSimple (TYPE / CLASS / ID | UNIVERSAL)

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com

CLASSSelector

IDSelector

TYPESelector

(aka Element selector)

http://www.inarocket.com


TYPE SELECTOR

With this code all paragraphs are shown in green.

A CSS type selector allows you to select and style a HTML element.

p {color: green}

Syntax element {style properties}



HTML CSS

Browser

TYPE SELECTOR

<body> <p>CSS rocks!</p> <p>Hello world.</p> </body>

p { color: green; }

Web page titleindex.html

CSS rocks!Hello world.



CLASSSelector

IDSelector

TYPESelector



CLASS SELECTOR

Only the elements with the “ready” class are shown in orange.

A CSS class selector allows you to select and style the elements with the specified class.

.ready {color: orange}

Syntax .classname {style properties}



HTML CSS

Browser

CLASS SELECTOR

<body> <h1 class="ready">CSS rocks!</h1> <p>Hello world.</p> <p class="ready">More content.</p> </body>


.ready { color: orange; }

CSS rocks!Hello world.More content.



HTML CSS

Browser

CLASS SELECTOR: TARGET MULTIPLE CLASSES

<body> <p class="ready">CSS rocks!</p> <p class="ready important">Hello world.</p> <p class=“important">Here we go.</p> </body>


.ready.important { font-weight: bold; }


CSS rocks!Hello world.Here we go.

Only works when classes used together

Only works when classes used together

READY TO USE CODE


https://codepen.io/inarocket/pen/GRqqwYJ?editors=1100


HTML CSS

Browser

CLASS SELECTOR: APPLY MULTIPLE CLASSES

<body> <p class="ready">CSS rocks!</p> <p class="ready important">Hello world.</p> </body>


.important { font-weight: bold; }





NOT USING UTILITY CLASSES

Carl Sagan From Wikipedia, the free encyclopedia

American astronomer, planetaryscientist, cosmologist, astrophysicist, astrobiologist, author, poet,[2] and science communicator.

His best known scientific contribution is research on extraterrestrial life, including experimental demonstration of the production of amino acids from basic chemicals by radiation.

Contents 1. Early life and education2. High-school years3. University education

Fields AwardsAstronomy Understanding of Science (1993)

Astrophysics National Academy of Sciences (1994)

Cosmology Oersted Medal (1990)

.hd-primary {…}

.hd-primary-right {…}

.hd-primary-wrong {…}

.hd-secondary {…}

.hd-secondary-right {…}

.hd-secondary-wrong {…}

.p-big {…}

.p-big-right {…}

.p-big-wrong {…}

.p-medium {…}

.p-medium-right {…}

.p-medium-wrong {…}

.p-small {…}

.p-small-right {…}

.p-small-wrong {…} …



USING UTILITY CLASSES

Carl Sagan From Wikipedia, the free encyclopedia

American astronomer, planetaryscientist, cosmologist, astrophysicist, astrobiologist, author, poet,[2] and science communicator.

His best known scientific contribution is research on extraterrestrial life, including experimental demonstration of the production of amino acids from basic chemicals by radiation.

Contents 1. Early life and education2. High-school years3. University education

Fields AwardsAstronomy Understanding of Science (1993)

Astrophysics National Academy of Sciences (1994)

Cosmology Oersted Medal (1990)

.big {…}

.medium {…}

.small {…}

.important {…}

.right {…}

.wrong {…}

big important right

small

medium right

small wrong

medium important wrong

small right

medium important right medium important wrong

small right small wrong



REFERENCE: W3C - USE CLASS WITH SEMANTICS IN MIND


https://www.w3.org/QA/Tips/goodclassnames


CSS ARCHITECTURE

BEM: Block — Element — Modifier

SUIT CSS: Style tools for UI components

SMACSS: Scalable and Modular Architecture for CSS

OOCSS: Object Oriented CSS



CLASSSelector

IDSelector

TYPESelector



ID SELECTOR

Only the element with the “promo” id is shown in red.

A CSS id selector allows you to select and style the element with the specified id.

#promo {color: red}

Syntax #id_value {style properties}



HTML CSS

Browser

ID SELECTOR

<body> <p id="promo">CSS rocks!</p> <p>Hello world.</p> </body>

#promo { color: red; }





CLASSSelector

IDSelector

TYPESelector


in aROCKET

UNIVERSAL SELECTOR~ ~ ~


UNIVERSAL SELECTOR

With this code all HTML elements are shown in red.

A CSS universal selector allows you to select and style all elements on a page.

* {color: red}

Syntax * {style properties}



HTML CSS

Browser

UNIVERSAL SELECTOR

<body> <h1>CSS rocks!</h1> <p>Hello world.</p> <ul> <li>First.</li> <li>Second.</li> </ul> <footer>All rights reserved.</footer> </body>

* { color: red; }


CSS rocks!Hello world.• First.• Second.All rights reserved.


in aROCKET

TOOLS~ ~ ~


TOOLS: ECSSTRACTOR

Extract selectors from HTML and generate CSS stylesheet.


https://marketplace.visualstudio.com/items?itemName=kubosho.ecsstractor


SOURCE: Selectors Level 3 by W3C.


https://www.w3.org/TR/selectors-3/

https://www.w3.org/TR/selectors-3/

IN A ROCKETLearn front-end development at rocket speed

CSS CSS FUNDAMENTALS

SelectorsSimple (TYPE / CLASS / ID | UNIVERSAL)

Documents

CSS CSS FUNDAMENTALS