Introduction to CSS

Now that we have a fundamental understanding of HTML, it’s time to make our site look more visually appealing. We achieve this through the use of CSS.

CSS is the code that tells the browser how things should look. You see it everywhere on the web, been right now as you read this, you are seeing rendered CSS. But what is CSS and how do we use it? Let’s dive in.

What is CSS

CSS was invented because HTML is only supposed to provide semantic meaning to a document. It wasn’t supposed to make it look pretty. This is why CSS was invented. 

(CSS) is an abbreviation for Cascading Style Sheet. Let’s take a closer look at what this entails. A ‘style sheet’ is a set of rules that govern how we want our webpage to appear on the internet. For example, we might have a rule that states that “all heads are green,” or another that states that “a large space should be placed between each paragraph.”

So, what exactly does it mean when we say that our style sheets are “cascading?” If we have many rules applying to the same piece of HTML, the rules will ‘cascade’ to determine which one wins, which is what we are referring to as “cascading.” In CSS, the rule that is the most specific usually prevails. Also, the rule closest to the bottom of the sheet might also win and be applied to the HTML element. Let’s look at an example to better grasp the concept.

If I have two rules like this:

• All headings on the page should be red.
• The second heading on this page should be yellow.

These two rules are in direct conflict with one another: it can’t be both green and blue at the same time!

Because the most explicit rule always wins, it is clear that the second rule will be used in this situation. It is more particular in that it only pertains to the second heading under the second header. As a result, all of the headings on our page will be green, with the exception of the second, which will be blue.

Can we include any rules in our style sheets?

CSS has a large number of possible rules and is extremely powerful. But they are limited to a specific set of declaration properties. these properties can be used to control.

• font size
• font color
• background color
• element width
• elemet height
• font family
• letter spacing
• letter height
• boxed shadow
• text shadow
• transparency

And a lot, a lot more. Thankfully, much like HTML, there are only a handful of elements we will actually be using. So you don’t need to go and remember hundreds of properties, If you keep the most important 20 properties in mind, you should be gold.

How does CSS work?

CSS is a tad more complicated than HTML. But tis still very simple. CSS works by selecting the HTML elements you want to apply a style to, then choosing a property, and giving it a value. You can add multiple declarations for a single tag. Each declaration must be separated with a semicolon (the last semicolon is optional, but it’s good practice to add it anyway.

Below is a breakdown of the CSS syntax. 

Consider this example below 

p { color: green, text-align: center; }

In this example, the p tag is the selector, color and text-align are the properties and blue and center are our values. 

There are a few different types of selectors out there. But we ate only going to focus on the most basic ones, simple selectors and combination selectors. 

Simple selectors

Simple selectors are CSS selectors that apply to only one element at a time, coincider the code below. We have some HTML along with slide CSS.  You will see a p tag, along with the two examples from our previous lesson. 

<p>This is a paragraph</p>
<div class="blue-text">My Element</div> 
<div class="blue-text">My Element</div> 
<div id="unique">My Element</div>

p { color: green; }
.blue-text { color: blue; }
#unique { color: red; }

If we apply these CSS rules to our HTML and set inside those elements will have the CSS rules applied to them. Below is an example of how the HTML will render on the browser after the CSS rules have been applied.

This is a paragraph

Notice the space between the green text and the blue text, this is caused by a CSS rule that is applied by default to all P elements. Browsers do this to make sure even the most basic makeup looks presentable and legible.

Where do we add CSS?

CSS can be inserted don’t your website in different ways, inline, internally, and externally. The most common method is external, meaning in a different document which your HTML document will reference. Internal CSS is sometimes used but it is not best practice, Inline CSS is also not best practice and, while it does work, it should be avoided.

1. CSS inline

You can directly incorporate CSS in your HTML elements by adding the style attribute.

<p style="color: blue">Hello world!</p>

Here, we give it the color property and set the value to blue, which results in the following:

Hello world!

We could also set numerous attributes inside the style tag. However, things can quickly become complicated if our HTML is packed with a lot of CSS inside of it. This is why the second method was created.

2. CSS Internal

Internal styling allows us to insert CSS on the page using a style tag as appose to inserting it inside an element. this allows it to love outside the scope of any single tag.

<style>  
.container {  
    width: 500px;  
    height: 100px;  
    background-color: lightcyan;  
    text-align: center;  
}
.heading1 {  
    font-family: 'Courier New';  
    color: tomato;  
}
</style>  

Notice how the styling directives go one under the other, this is the cascading part of the cascading style sheet in effect.

3. CSS from other sources

Using an external stylesheet is the third and most preferred technique to integrate CSS. To use this method, you must create a new file, add your CSS exclusive, and save it as a CSS file. Then add a link tag inside your head tag that defines where you located your CSS file.

Below is an example of CSS you might place inside your .css file.

h1 {
color: blue;
}

Below is an example of the code that should be used in your head tag.

<head>  
    <link rel="stylesheet" href="style.css">  
</head>

Comments

You can also apply comments to your code to add notes. Comments are ignored by browsers. CSS comments are placed inside the <style> element, and starts with /* and ends with */. You can add comments wherever you want in the code:

/* This is a single-line comment */
.primary {
  color: red;
}

You can also add multi-line comments like this.

/* This is
a multi-line
comment */

p {
  color: red;
}

Conclusion

That’s all for now. In this lesson, we showed you just the basics of CSS. But There’s a lot more to it than that, a lot more. But, we want to keep this as light as possible, after all, this module is about Web design, not CSS.

Our next lesson dives into the basics of UX design.

Introduction

Lesson One: Create a Blogs@Baruch site

Lesson Two: Introduction to HTML

Lesson Three: Introduction of CSS

Lesson Four: Introduction to UX/UI

Lesson Five: Wire-framing

Lesson Six: Typography