LESSON 2

Designing with CSS

Now that we got our first site, let's start making it look nice through CSS!

Basics

In CSS, we use rulesets to style and design HTML elements. These rulesets contain a selector and its declarations, which consists of a property and a property value. An example ruleset is shown below.

In this ruleset, we select the p, or paragraph element. This means that all paragraphs in the HTML file that uses the ruleset will follow the delcarations found in it. The property here is color, which affects the color of the text. In this ruleset, we set the color of the text to be red, as defined in the property value.

Adding CSS

Now that we know what CSS is, let's learn how to add it. There are three different ways to insert our CSS:

Externally, though a new .css file
Internally, inside the head element of our HTML file
Inline, through the attributes of an HTML element

External CSS

The advantages of an external CSS file is that if you have many pages on a website that look similar, you can just change the css file and every page will update its style automatically.
To use external CSS, first create a new file with a .css extension, and then add your rulesets to it. Then you must link your CSS file to your HTML file using the <link> tag:

<link rel="stylesheet" href="mystylesheet.css">

So, for example, if we had a stylesheet named mystylesheet.css that had:

p {
    color: green;
}

and our HTML file was

<!DOCTYPE html>
<html>
    <head>
        <title>CSS!</title>
        <link rel="stylesheet" href="mystylesheet.css">
    </head>
    <body>
        <p>The color of this text is green!</p>
        <p>The color of this text is also green!</p>
    </body>
</html>

then our text would be green.

Do It In Director

It may be a good idea to store your stylesheets (your .css files ) in another folder called styles. To do this on director, firstly you must create a new folder in the public folder by right clicking the public folder and selecting new folder. Then, in the popup, name the new folder styles and add your stylesheet to that folder. Finally, in your HTML file, add the line

<`link rel="stylesheet" href="styles/mystylesheet.css">

where mystylesheet.css is the name of your CSS file. Then, your stylesheet should be loaded! The way this works is that it looks in the styles folder (due to the slash) for mystylesheet.css.

Internal CSS

Internal CSS is advantagous for webpages that have a unique style. Simply add a <style> tag in the head element of your HTML file, and then add your rulesets inside it. An example is found below:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS!</title>
        <style>
            p {
                color: orange;
            }
        </style>
    </head>
    <body>
        <p>The color of this text is orange!</p>
        <p>The color of this text is also orange!</p>
    </body>
</html>

In here, the interal CSS file contains a ruleset that sets the color of text of all paragraphs to be green.

Inline CSS

The final way to add CSS is to use inline CSS. This is advantagous for certain elements that have a different style. To add inline CSS, use the style attribute of an HTML element and then have its value be the CSS. So, to make a certain paragraph look green, we would have <p style="color: blue;">.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS!</title>
    </head>
    <body>
        <p style="color: blue;">The color of this text is blue!</p>
        <p>The color of this text is not blue :(</p>
    </body>
</html>

The CSS Hierarchy

Okay, but what if we use both external and internal CSS? What will happen? Heck, let's throw in some inline CSS into the mix as well! Which CSS ruleset will be used? Well, the answer (thankfully) isn't that complicated.

First of all, if the HTML element has inline CSS, then it will use the inline CSS. Otherwise, the order of when the external and internal CSS is listed determines which CSS ruleset is used. If the external CSS is listed first, then the internal CSS will be used, and vice versa. So, let's say we again have this stylesheet named mystylesheet.css that had:

p {
    color: green;
}

If our HTML file was

<!DOCTYPE html>
<html>
    <head>
        <title>CSS!</title>
        <link rel="stylesheet" href="mystylesheet.css">
        <style>
            p {
                color: orange;
            }
        </style>
    </head>
    <body>
        <p>The color of this text is orange!</p>
    </body>
</html>

then the text of the color will be orange. However, if we switched the <link> and <style> tags, like so:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS!</title>
        <style>
            p {
                color: orange;
            }
        </style>
        <link rel="stylesheet" href="mystylesheet.css">
    </head>
    <body>
        <p>The color of this text is green!</p>
    </body>
</html>

then the color of the text will be green.

Different Selectors

In addition to the basic element selector that selects all the elements of a certain type, CSS has some other selectors that select specific elements.

IDs and Classes

IDs and classes are HTML attributes and are ways to specify certain HTML elements. IDs are completely unique; only one element can have a certain ID. On the other hand, classes do not have to be unique; multiple HTML elements can be apart of the same class, and these elements don't even have to be the same.
To use an ID, just use the id='NAME' attribute and to use a class, use the class='NAME' attribute. Using IDs and classes are a good way to classify certain elements and add CSS to those components without changing all of the same HTML elements. In CSS, use a # to specify an ID in the selector and a . to specify a class in the selector. For example

#my-id {
    color: blue;
}
.my-class {
    color: red;
}

will set the color of the element with the ID my-id to blue and will set all elements with the class my-class to red.

Attribute Selector

Attribute selectors are used to select elements that have certain attributes. For example, if we wanted to select all elements that have the class attribute, we would use the selector [class]. If we wanted this to be more specifc, and only select the p elements that also had a class attribute, we would use the selector p[class].

Pseudo-classes and Pseudo-elements

Pseudo-classes are specific states of certain elements. For example, the :hover pseudo-class is used to select elements that are hovered over. The lessons dropdown list uses the :hover pseudo-class; whenever you hover over a lesson, the background gets darker! But when you stop hovering over that lesson link, the background returns back to what it was before.
Pseudo-elements select only a certain part of an element. For example, the ::before pseudo-element is used to select the element that is before the element that is being selected.

Other Information

Remember, these are just the basics! There are many other selectors, including combinators. Additionally, there are more pseudo-classes and pseudo-elements than what we have covered. You can find a more comprehensive list of selectors here.

CSS Properties

Sizing

To set the size of a certain element, you can use the width and height properties. The value of these can either be a percentage value or a pixel value. For example, a width of 100% will make the element take up the full width of the parent element, and a height of 100px will make the element take up 100 pixels of height.

Spacing

In HTML, each element consists of four different parts, as shown in the picture below

The width and height properties we discussed in the previous section set the size of the content box. The margin property is used to set the space around the element, and the padding property is used to set the space inside the element but outside the content box. Both margin and padding have -left, -top, -right, and -bottom properties, which are used to set the margin and padding on the left, top, right, and bottom sides of the element. For example, the margin-top property sets the space above the element.
Also, for both margin and padding, if the value is only one number (i.e. 1px), then all four sides will have the same spacing value. If there are two values (i.e. 1px 2px), then the top and bottom sides will have the same spacing value (first value), and the left and right sides will have the same spacing value (second value). If there are three values (i.e. 1px 2px 3px), then the top will have the spacing of the first value, the left and right side will have the same spacing with the second value, and the bottom side has the spacing of the thirt value. Finally, if there are four values (i.e. 1px 2px 3px 4px), then the top side will have the first value, the right side has the second value, the bottom will have the third value, and left side will have the last value.

Fonts

To set the color of the text, use color: COLOR. The color can be a hex code, an rgb/rgba value, a hsl/hsla value, or a common color name (red, green, ect.) To set the font of an element, you can use the font-family property. The value of this property is a comma-separated list of font names. For example, the value font-family: "Arial", "Helvetica", sans-serif will first set the font of the element to Arial. If the user does not have that font installed, then it will try using Helvetica, and if it doesn't have that font, it will try the next font, which here is the default sans-serif font on their machine.
To set the font weight to make an element text be bolded/lighter, use the font-weight property. You can use text values such as bold or normal, or use number values such as 700 (bold) or 400 (normal).
To add an underline to the element, add text-decoration: underline to the element. For a dotted underline, use text-decoration: underline dotted.
To italicize text, use font-style: italic.

Background

Change the color of the background simply by using background: COLOR. Same as the color of the text, it can be a hex code, an rgb/rgba value, a hsl/hsla value, or a common color name (red, green, ect.)
Or, we can set the background image by using background: url(IMAGE_URL). The image will be stretched to fill the entire element. If you want the background image to repeat, use background: url(IMAGE_URL) repeat, and if you only want it to repeat only in the x axis, use background: url(IMAGE_URL) repeat-x. Replace repeat-x with repeat-y if you only want the background image to repeat in the y axis.

Borders

Borders can be added to any element, not just tables! To add it, use the property value border: WIDTH STYLE COLOR. The WIDTH is the width of the border, and the STYLE is the style of the border, such as solid, dashed, dotted, or double. The COLOR is the color of the border. The STYLE and COLOR parameters are not required.

Other Information

Again, this is just a short list of the many CSS properties out there. A really powerful property that we won't be covering here is the Flexbox. Additionally, not all variations of the parameters for the properties were covered as well. You can find a more comprehensive list of CSS properties here, or by just simply searching up a certain CSS property.

You have now learned how to use CSS to design your webpage. In the next lesson, we will begin introducing javascript to create interactive web content.

Previous Lesson

Lesson 1: Introduction to HTML

Next Lesson

Lesson 3: Javascript Basics