What is CSS?
CSS stands for Cascading Style Sheet and is what we use to bring our html elements to life. We can use CSS to change the size of an element, provide color, add a border,
animate and much more.
CSS rules contain two parts: a selector and a declaration. The selector indicates the element or elements the rule applies to. A declaration describes how the elements are to be styled. In the code below, we are applying a font size of 18px to all p tags.
p {
font-size: 18px;
}
Declarations contain two parts: a property and a value. In the code below, the color property is being given a value of yellow and the font-size property is being given a value of 32px. Also, notice that multiple declarations can be applied to a selector.
h1 {
color: Yellow;
font-size: 32px;
}
You can also apply the same styles to multiple selectors at the same time. Just separate them with commas.
h1, h2, h3 {
font-family: "Times New Roman", Times, serif;
font-size: 32px;
letter-spacing: 3px;
}
Three ways to write your CSS?
External CSS
Using an external stylesheet is generally considered the best practice when it comes to writing CSS. This just means that you write all your styles in a separate file that has a .css extension. A common convention is to name it styles.css. Another convention is to name it based on the name of the html file. For example, if the html file is portfolio.html, you could write your styles in portfolio.css.
When you write your styles in an external style sheet, you need to wire it up to your html. You do this by adding a link tag to your html that tells the browser where to find the css file. The link tag requires an href attribute that contains the URL to the css file. It also requires the rel attribute which lets the browser know the relationship between the two documents. The link tag is added between the opening and closing head tags.
<!DOCTYPE html>
<html>
<head>
<title>What is CSS</title>
<link href="styles.css" rel="stylesheet">
</head>
</html>
Internal CSS
The second option is to write your CSS rules within the HTML page using the style element. This is typically placed inside the head element.
<!DOCTYPE html>
<html>
<head>
<title>What is CSS</title>
<style>
body {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
</style>
</head>
</html>
Keep in mind that internal styles are only applied to the specific page they are added to and that they will override external styles if both are used and both contain the same selector.
Inline CSS
Styles can be added to an individual HTML element using the style attribute. The attribute value is made up of property:value; combinations. Don’t forget to add the semi-colon at the end of each declaration and wrap them all in quotation marks. Inline styles only get applied to one element and they will override internal and external styles.
<p style="color:red;font-size:16px;">This text will be red</p>
The Case for External CSS
Scenario 1: Repeat, Repeat Again
You start writing some html for a single web page. You add some inline styles to a p tag. You add a second p tag and have to type out the same inline styles to keep them consistent. The same thing happens with your headings, links, images, etc. You finish your single page site and get it live. A month later, you decide you want to change the color of your headers. You go from element to element updating the same code multiple times. You start to realize there is probably a better way to do this.
Scenario 2: A Better Way
You start writing your html for a single web page. You add the style element to the head element. You add the p selector and declare some styles. These apply to all your p tags on the page. This is so much better. A week later, you decide to add another page to the site. You copy and paste the style element from one web page to the other to keep the styles consistent on your site. You add another page a few days later and have to do the same thing. A few weeks later, you decide to change the color of your headings. So, you go into all of your pages and update the same code in multiple places. You begin to realize there is probably a better way.
Scenario 3: The Best Way
You begin writing your html for a single web page. You create a second file called styles.css which you pull into your html file using a link element. You begin adding styles for all your headings, p tags, links, images, etc. A week later you add another page to the site. You link it to the same styles.css file. A few week later you add another page to your site and utilize the same styles.css file. A month later, you decide to change the color of your headings. You go into styles.css and adjust the code. The changes are applied to all your web pages.
The Moral of the Story
Use an external style sheet. This is considered best practice amongst most developers for the following reasons:
- A single style sheet can be used for multiple web pages
- Updating a style for the entire site only requires a change in one file
- The HTML is cleaner and easier to read
CSS Selectors
There are many ways to target elements you want to style. Below are some of the more important ones to understand
Universal (*)
If you want to apply a specific style to every element on the page, you can use the universal selector *. In the example below, we set the box-sizing property on every element equal to border-box.
* {
box-sizing: border-box;
}
Type (Tag name)
The type selector matches elements by tag name. The example below targets all p tags and applies the color purple.
p {
color: purple;
}
Class (.)
The class selector is written with a period in front of the class name. When using the class selector in your CSS you are targeting all elements with the given class.
.text-red {
color: red;
}
.text-green {
color: green;
}
Id (#)
You can apply styles to a single element using the Id selector, which is identified by the hashtag (#) at the beginning.
#site-logo {
border-radius: 50%;
height: 50px;
width: 50px;
}
Child (>)
You can style an element that is a direct child of another element by adding a greater than symbol (>) in between the parent and child. The following styles would be applied to any link that is a child of a list item.
li>a {
color: black;
text-decoration: none;
}
So, in the HTML code below, the styles above would not apply to the first link, since it is not a direct child of an li. The styles would be applied to the other two links.
<div>
<a href="www.wombaco.com">Wombaco</a>
<ul>
<li>
<a href="www.google.com">Google</a>
</li>
<li>
<a href="www.yahoo.com">Yahoo</a>
</li>
</ul>
</div>
Descendant (space)
To style a descendant of an element you simply put a space between the selectors. Suppose you want to style all links within a div. You would use the following.
div a {
color: black;
text-decoration: none;
}
By using a space instead of > you are selecting all link elements that are nested inside of a div. They can be nested many levels deep. In the HTML below, there are three link elements that are inside the div. All of them will receive the styles from the code above.
<div>
<a href="www.wombaco.com">Wombaco</a>
<ul>
<li>
<a href="www.google.com">Google</a>
</li>
<li>
<a href="www.yahoo.com">Yahoo</a>
</li>
</ul>
</div>
Adjacent Sibling (+)
To target an element that comes directly after another element, you place a plus sign between the selectors. In the code below, we are saying that any p element that comes right after an h1 element will be given the color red.
h1 + p {
color: red;
}
In the HTML below you can see there are three p tags. Only the first will have red text. Notice that it comes after the closing h1 tag. It is not nested inside.
<h1>A main heading</h1>
<p>This text will be red</p>
<p>The text will not be red</P>
<p>This text will not be red</p>
General Sibling (~)
h1 ~ p {
color: red;
}
To target multiple siblings of an element, you place a ~ between the selectors. In the code below, we are saying that any p element that is a sibling of an h1 element will be given the color red.
