Understanding the CSS Syntax

rule

selector
h1 {
color:red; declaration

} property value
 More about Selectors

Elements <h1> </h1> h1 {

<p>The Blog Post</p> color: red;
Set equal style for <div>More Info</div> }
these elements

Classes <h1 class="blog-post"> .blog-post {

</h1> color: red;
Set equal style for <p class="blog-post"> }
elements within the </p>
same class <div class="blog-post">
</div>

Universal <h1> </h1> * {

<p class="blog-post"> color: red; s one!
use thi
</p> } ly
Rare
 More about Selectors

IDs #main-title {
<h1 id="main-title">
color: red;
Set style to one </h1>
}
specific element

Attributes <button disabled> [disabled] {

color: red;
Set equal styles to all </button> }
elements with
attribute(s)
 Cascading Style Sheets & Specificity

Cascading Specificity

Multiple Rules can apply to the same Resolve conflicts arising from multiple
Element Rules

Inline Styles

#ID selectors

.class, :pseudo-class and [attribute]

selectors

<Tag> and ::pseudo-element selectors

 Cascading Style Sheets & Specificity

Cascading Specificity

Multiple Rules can apply to the same Resolve conflicts arising from multiple
Element Rules

Selector Hierarchy

Directly applied Styles win over

Inheritance
p {…} > div {…} for
<div><p>Hi!</p></div>

More specific Selector wins over less

specific one
p.some‐class {…} > p {…} for
<p class="some‐class">Hi!</p>
 Inheritance

div {
color: red; <div>
} <div>
<h1>Inherited!</h1>
</div>
p { <p>Overwritten</p>
<p>Inherited!</p>
color: green; <div>Inherited!</div>
} <article>
<p>Overwritten</p>
<p>Inherited!</p>
</article>
<p>Overwritten</p>
<p>Inherited!</p>
Parent styles are inherited by </div>
child elements if not overwritten!
 Understanding Combinators

+ Adjacent Sibling ~ General Sibling

div + p { div ~ p {
}  }

> Child Descendant

div > p { div p {
} }
 Combinators – Adjacent Sibling

+ Adjacent Sibling

h2 + p { <div>
color: red; <h2>Not applied</h2>
}  <p>CSS applied</p>
<h2>Not applied</h2>
<h3>Not applied</h3>
<p>Not applied</p>
<h2>Not applied</h2>
Elements share the same <p>CSS applied</p>
parent </div>
Second element comes
immediately after first element
 Combinators – General Sibling

~ General Sibling

h2 ~ p { <div>
color: red; <h2>Not applied</h2>
}  <p>CSS applied</p>
<h2>Not applied</h2>
<h3>Not applied</h3>
<p>CSS applied</p>
</div>
Element share the same
parent
Second element comes after
first element
 Combinators – Child

> Child

div > p { <div>
color: red; <div>Not applied</div>
}  <p>CSS applied</p>
<div>Not applied</div>
<article>
<p>Not applied</p>
</article>
Second element is a direct <p>CSS applied</p>
child of first element </div>
 Combinators – Descendant

Descendant

div p { <div>
color: red; <div>Not applied</div>
}  <p>CSS applied</p>
<div>Not applied</div>
<article>
<p>CSS applied</p>
</article>
Second element is a <p>CSS applied</p>
descendant of the first element </div>
 Value Types

Values are tightly coupled to specific property!

Length, Sizes &

Pre-defined Options Colors Functions
Numbers

background:
display: block; background: red; height: 100px;
url(…);

transform:
overflow: auto; color: #fa923f; width: 20%;
scale(…);

color: #ccc; order: 1;

Possible Values can be found in CSS References

(e.g. MDN)!
 Summary
CSS works with Rules Different Types of Selectors Selectors with Combinators
h1 { div + p {
h1 {…}
color: red; color: red;
.some-class {…}
} }
[disabled] {…}
p { div ~ p {
#some-id {…}
color: red; color: red;
* {…}
} }
div > p {
Properties & Values Inheritance & Specifity color: red;
}
• Long list of available • Parent styles are generally div p {
Properties and Values inherited color: red;
• Check MDN or comparable • Multiple rules can apply to }
References one element
• Different Type of Values, • Specifity resolves “multiple
depending on Properties rules” conflicts
• Inheritance defaults can be
changed