CSS
CSS stands for Cascading Style Sheets. It is the language used to describe
the appearance of webpages. CSS makes good use of the class
attribute, id
attribute, and the
elements for content division. CSS defines rules for which elements get
which styles. CSS can control things like position, color, and size.
This is what CSS looks like:
/* styles.css */
.purple {
color: purple;
}
.dotted-underline {
text-decoration: underline dotted;
}
section > h2 {
font-size: 32px;
font-family: 'Segoe UI', Verdana, sans-serif;
}
<!-- index.html -->
<section>
<h2>Lorem Ipsum</h2>
<p class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span class="dotted-underline"> Amet facilisis magna etiam tempor orci eu
lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac.</span></p>
</section>
<section>
<h2>Consectetur</h2>
<p class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus
urna duis convallis convallis. Magna eget est lorem ipsum dolor sit amet
consectetur adipiscing.</p>
</section>
<section>
<h2>Amet</h2>
<p>Lorem ipsum dolor sit amet, <span class="purple dotted-underline">consectetur
adipiscing elit, sed do</span> eiusmod tempor incididunt ut labore et dolore
magna aliqua. Id porta nibh venenatis cras sed felis eget velit. Viverra orci
sagittis eu volutpat odio.</p>
</section>
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet facilisis magna etiam tempor orci eu lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac.
Consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing.
Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id porta nibh venenatis cras sed felis eget velit. Viverra orci sagittis eu volutpat odio.
Syntax
CSS syntax follows this pattern:
selector {
property: value;
property-two: value-two;
}
The selector specifies which elements to style. The property and value specify how the elements should be styled. The property and value are separated by a colon and the line ends with a semicolon. And, there can be multiple properties and values contained within the curly braces of a selector.