In the last chapter, you got your first taste of creating content on the web via HTML. You also changed its appearance to have a yellow background, blue text, and a particular font via CSS. After spending the last chapter looking at HTML, it's now time to take a quick look at CSS. CSS lets you control the appearance of your web content.
What is CSS? What does it look like? These are the fundamentals we'll explore in this chapter!
Cascading style sheets
CSS stands for Cascading Style Sheets. That's a complicated way of saying that CSS allows you to set styles.
Styles are like decoration. Imagine saying "I want my website background color to be yellow, the text up top to be black, the text in the bottom section of the page to be white, the images to have a bit of space around them, and the whole thing to appear differently on mobile." All of those colors and spacing and placement is style. You just write it in code, not in English!
You also use CSS to create a layout for your site, such as placing a certain section on the left of the page, determining the size of the navigation bar that appears at the top of your website, or making multiple sections appear side-by-side in one row.
CSS controls the way different pieces of content are arranged on websites. For example, the fact that there is a column with articles on the left of the New York Times and newspaper sections arranged in a horizontal bar (World, U.S., etc.) is not a coincidence! Developers created this layout with CSS:
While CSS is very powerful, it depends on HTML. Consider decorating a house. First, you select your element, like the bedroom walls or living room floor. Then, you specify how it should look: the dining room walls should be red, or the living room floor should be carpeted. If an interior designer asked how you want to decorate the dining room, and you just said "Red," they wouldn't know what you're talking about. You must say you're talking about the walls first.
The same is true for HTML and CSS. In some quick examples, let's see what that looks like.
CSS applied to HTML
There are two steps while using CSS to make your HTML look awesome:
Identify and select the relevant HTML element (ex. paragraph, header, etc).
Add some styles (specify how it should look).
Let's say we want the text of our paragraph to be blue:
p {
color: blue;
font-family: Arial;
}This may seem completely foreign, especially the curly brackets, but take another look. Can you recognize some elements?
p: refers to the paragraph tag in HTML, which is <p>.
color: blue: color is a CSS property. Here, we've made the text color blue.
font-family: this is also a CSS property to set the font of your text. In the example above, it is set to Arial. We will get into the intricacies of choosing fonts later in the course.
{ }: curly brackets open and close a set of style rules in CSS
Here are the before and after results of the above code snippet:
Let's recap!
By understanding how HTML and CSS play together, you already have a huge leg up for learning the intricacies of each language. Remember:
Write your content in HTML.
Decorate you content with CSS.
In the next part, we'll cover the largest building blocks in HTML to structure an entire web page!
