This week we will explore how to apply styles to our websites using CSS. Specifically, we will look at different ways to adding stylesheets to our HTML, selectors like IDs and classes, "the cascade", inheritance, specificity, and applying specific common CSS properties.
There are 3 ways to apply CSS: inline, embedded, and externally.
Inline stlyes can be applied at the element level in the HTML document by adding the "style"
attribute. While this can be handy in a pinch or when testing, it is not best practice for
applying styles across an entire site.
<section style="border:1px solid red;"></section>
Embedded styles are applied inside the head. This can be handy when dealing with a single
page, but removes the ability to create global styles that work across an entire site.
<head>
<style>
section {
border:
1px solid red;
}
</style>
</head>
Styles can also be applied through an external CSS file that is linked in the HTML file.
This gives us the greatest amount of flexibility and ability to control the entire
website's CSS on every page. This will be the primary way we apply styles in this class.
<head>
<link rel="stylesheet" type="text/css"
href="css/styles.css">
</head>
Format:
selector {
property: value;
}
Examples:
section {
color: #ffffff;
}
#hero {
background-color: rgb(0,0,0);
}
When we need to change the display behavior of an element, perhaps to change an inline
element to a block level element or to hide an element, we can use the CSS display
property.
display: block, inline, none, inline-block, (flex, grid)
Due:Feb 13
Due:Feb 16
Using your prototype, write CSS to begin to apply your design to your HTML.
The section will not be graded on the quality of your design, but on the quality of your CSS code and how well you have applied it to your HTML. Your design will not be complete at this stage. That is okay.
