Week 2: Demo

CSS Basics



CSS Syntax

CSS syntax is quite a bit different from HTML, but they can exist within the same document. We can use CSS a couple different ways with our HTML: inline directly on an HTML element, in a pair of <style> tags, or as an external stylesheet. CSS always begins by selecting a specific tag, ID, or class of HTML elements in order to specify what should have styles applied. The styles themselves are always declared as property:value pairs that are separated with a colon (:) character.

This element is using inline styles. 

<p style="background-color:green">
    This element is using inline styles.
</p>

This element is using a pair of style tags. 

<style>
    p{
        background-color:red;
    }
</style>

<p>
    This element is using a pair of style tags.
</p>

Take note that the second paragraph block with the red background does not have a "style" property on its tag, but it is instead utilizing styles that have been declared within a pair of <style> tags. This is what is known as a "stylesheet", as we can put many different style definitions in between those tags, and we can make multiple references to different types of HTML elements.

We can do the same thing with an external stylesheet, which is a .css file which we can link to our HTML document. The benefit of using an external stylesheet is that we can declare all of our styles in one file, and then use the same stylesheet file across as many webpage documents as we would like, thus allowing our styles across our entire website to be consistent. We'll cover external stylesheets a bit later on in the course.

CSS Selection

There are three ways to select HTML elements using CSS in order to apply styles to them; by HTML tag, by ID, or by class. The two examples above are using the tag selection technique by specifying that we want to modify all of the <p> tags to have a red background. We place a pair of curly braces after the name of the tag we are modifying, and in between those curly braces are property:value pairs to specify our desired styles.

Note: There is a hierarchy to how styles get applied, so while I am specifying inside of a pair of <style> tags that I want all of the <p> elements to have red backgrounds, I am overwriting that on the <p> element at the top by using inline-styles to declare the background color to be green. This effectively overwrites the previously declared style.

If we want to modify a single element, but not do it using the inline method, we must be able to identify it by its ID property, which is an attribute that needs to be added to the HTML tag:

This element has an ID and its background is blue! 

<style>
    #mytag{
        background-color:blue;
    }
</style>

<p id="mytag">
    This element has an ID and its background is blue!
</p>

The difference between selecting a tag by name and selecting a unique HTML element by its ID is using the pound sign (#) before the name of the ID in your CSS style declaration. This is how the browser will understand that you are modifying a single HTML element instead of all instances of a given tag type.

We can also select a group of HTML elements based on a class property. Let's make two different groups of paragraph elements with different class names.

I am in groupA, and I am goldenrod!

I am in groupA, and I am goldenrod!

I am in groupA, and I am goldenrod!

I am in groupB, and I am deeppink!

I am in groupB, and I am deeppink!

I am in groupB, and I am deeppink!

<style>
    .groupA{
        background-color: goldenrod;
    }
    .groupB{
        background-color: deeppink;
    }
</style>

<p class="groupA">
    I am in groupA, and I am goldenrod!
</p>
<p class="groupA">
    I am in groupA, and I am goldenrod!
</p>
<p class="groupA">
    I am in groupA, and I am goldenrod!
</p>
<p class="groupB">
    I am in groupB, and I am deeppink!
</p>
<p class="groupB">
    I am in groupB, and I am deeppink!
</p>
<p class="groupB">
    I am in groupB, and I am deeppink!
</p>

Basic CSS Properties

This is a very short list of some commonly used CSS properties, but is in no way exhaustive. To see all CSS properties available, visit the W3Schools: CSS Properties Reference.

Resources