Bonus: Add some flair! (A CSS Introduction)
You've done it!
Let's take a moment and look at the milestones you've crushed. Learned what HTML is, wrote your own code, and built a web page using all of your new knowledge. Take a moment to pat yourself on the back and get ready to continue on!
In this bonus section. Take your first HTML document and give it some CSS styling!
A quick overview of CSS:
- CSS stands for Cascading Style Sheets.
- CSS is the primary way to manipulate how HTML elements are displayed.
- Understanding CSS syntax/structure, and usage comes with so many advantages, ultimately unlocking the power to do amazing things on the web.
- There are multiple ways to include CSS styling.
CSS Syntax
Briefly mentioned in the second lecture, the global attributes
id, class, style
are used heavily by
CSS. For more info, check out this
CSS
introduction.
CSS Method 1: Internal CSS
Internal styling refers to adding a CSS style
element to the <head> portion of an HTML
document using the <style> element. In an
internal CSS element:
-
#is used to select theidattribute followed by its' value. The value can only be used by a single element. -
.is used to select theclassattribute followed by its' value. The value can be used by multiple elements.
<html>
<!-- Pro Tip: use indentation and line spacing and
breaks to make your code readible -->
<head>
<title>My first HTML document</title>
<style>
/* A CSS comment starts with /* and ends with */
/* In CSS, duplicate declarations are prioritized by the
last read declarations */
p {
color: red;
font-size:
12px; }
#third {
color: purple;
font-weight: bold; }
.green {
color: green; } </style>
</head>
<body>
<!-- Pro Tip: ids should be unique, they also have
priority over classes when both have competing CSS
declarations. -->
<p
id="first">Some text you might write.</p>
<p
id="second"
class="green">Some more text you might write.</p>
<p
id="third"
class="green">Even more text you might write!</p>
</body>
</html>
Results in …
Some text you might write
Some more text you might write.
Even more text you might write!
CSS Method 2: Inline Styling
Inline styling or element styling refers to
applying CSS to the start/opening tag of each
individual HTML element through the use of the
style attribute.
<p
style="color: red; font-size: 12px;">My first CSS</p>
Results in …
My first CSS
Inline styles have the highest priority and will override CSS
declarations found in style elements.