syllabus css

Introduction to course and expectations

In this section we’ll cover the following topics:

• Introduction to the course and expectations
• Syllabus review
• The importance of CSS
• What is CSS?

What is CSS?

CSS (Cascading Style Sheets) is a language used for styling HTML. When you use CSS, you are able to control the layout of your website, colors and fonts, sizes and more. You can include CSS in your HTML file or save it in an external file. If you have ever been on a website, you have seen CSS in action.

There are endless possibilities when using CSS. For example, if you want to make your websites text white with a pink background, use the color property:

“`css

p {color: white;}

body {background: pink;}

“`

You can also change the font size and type of your headers and paragraphs so they stand out to visitors:

“`css

h1 {font-size: 2rem; font-family: “Comic Sans”;}

p {font-size: 1rem; font-family: Verdana;}

“`

Course Outline

Course Outline

This course follows a weekly structure. You can see the complete details of each week on the curricula page. In Week 1 you’ll set up your development environment, learn what HTML and CSS are, and start writing code.

In Week 2 you’ll continue to learn how to write HTML and style it with CSS by building a basic website for the fictional company “Cheshire Paws” that sells cat accessories. By the end of this week you will have built a basic website from scratch!

In Weeks 3 and 4 we’ll take you through some advanced layouts using Flexbox as well as covering responsive design to make sure your websites look great on mobile phones, tablets and desktop devices alike! We’ll also cover Sass in these two weeks – a CSS pre-processor which makes styling easier, faster and more fun. Then in Weeks 5-7 we’ll follow it up with three projects: an online résumé using Bootstrap; building a web app using JavaScript; then creating an interactive photo gallery!

Do you have questions?

• Once you have the final points graded for an assignment, add them to the spreadsheet

HTML Review – div and span tags

You will need to know a few things about the div and span tags as well as their attributes.

• The div tag is used to break up portions of your web page into parts that can be styled separately.
• The span tag is used within a paragraph or other block of text to style part of the text differently than the rest.
• Both divs and spans can be nested, which means you can have one div inside another, or one span inside another (or both). You might want to do this if you had an article with one section in red and another section in black, for example. It would make sense to create two separate divs for each of those sections so that they could be styled differently from each other. If you wanted some text within a single section to have one color and some text within the same section to have another color, you could use spans for that.
• You always start with “ (for example: “) and end with “. So if you wanted to specify that all of an article should be contained in its own div, it would look like this:

““

(article content here)

CSS Basics – the syntax of CSS3

CSS is a style sheet language that describes how to render an HTML document. Like HTML, it is declarative; that is, you describe what the content should look like and not how to create it. CSS3 is the latest version of CSS.

At its core, CSS3 works by applying rules to particular selectors. A rule has two parts: a selector and a declaration. The selector determines which part of the HTML (or XML) document the declaration applies to; typically this will be an entire tag or just one tag attribute but selectors can get more complex than this too. The declaration describes some aspect about how that element should be displayed on the page: for example, color or font size.

CSS with class and id selectors

Using the `class` and `id` selectors is a great way to make your CSS more precise.

Think of classes as the nouns (people, places, things) in your HTML, while ids are like pronouns (he/she/it). A class gets its name from what it represents in the DOM (Document Object Model). You can use both in the same element:

““In a professional tone:

““`html

I’m a section about my homepage.

““`In a professional tone:

Here’s how you would apply that class and id to css:

Layout using divs and spans

Oops! Click Regenerate Content below to try generating this section again.

Colors with CSS hex codes, RGB and transparent colors

Colors can be specified in a variety of ways, as [hexadecimal color codes](https://www.w3schools.com/colors/colors_hex.asp), using [RGB values](https://www.w3schools.com/colors/colors_rgb.asp) or in [transparent colors](https://www.w3schools.com/cssref/func_rgba.asp). We’ll start with hexadecimal color values:

The hexadecimal color code is a six digit number that represents the amount of red, green and blue in the color mix, where 0 is no presence at all and F is maximum presence:

“`

#000000 /* Black */

#FF0000 /* Red */

#00FF00 /* Green */

#0000FF /* Blue */

Opacity with RGBA color values

The opacity property sets an element’s degree of transparency, where a value of 1 is fully opaque and 0 is completely transparent. Unfortunately, the opacity property does not work with the background image property in most modern browsers. Instead, you must use RGBA color values to set the level of transparency on a background image.

RGBA color values are an extension of RGB (red-green-blue) color values with an alpha channel – which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

CSS background images and position in the code

You may have noticed that when the background image is inserted into the CSS file, it overrides any background color you’ve already defined. This makes sense, because unless you’ve given your image a transparent background (which is possible), the image will cover up whatever color is underneath it.

When you’re positioning your image in the CSS code, keep in mind where it will be positioned. If you place it at the top of your code block, before all other properties, then any position settings for that element will come first and determine where the background image sits. However, if you place your background image at the end of a code block (like I did), then any positioning settings for that element need to be placed before or else they’ll override the background-position property.

““

The basics of css3

Oops! Click Regenerate Content below to try generating this section again.