[CSS] [Joseph Ong - Harvard University] [This is CS50. - CS50.TV] 

Today we'll be talking about CSS or Cascading Style Sheets. 

So what exactly is CSS? Well, let's break the term CSS down into 2 parts: Cascading and Style Sheets. Cascading is a little bit more complex, and it's something we'll cover in another video. But for starters, Style Sheets very much hints at what CSS does. It adds styles to the HTML of a web page, changing how the web page aesthetically looks. This means everything from the font of the text to the positioning of the content on the page to other cool things like making the corners of a box rounded or adding shadows to text. You can even do crazy things like make things animate on the screen. 

So how do we use CSS with HTML? Take this poor-looking site I just wrote. If Rob were to look at this site right now, he'd probably say something like, "Wow! My introduction looks terrible. Joseph, you're an awful designer." "Using the default Times font? Helvetica is so much better." 

So what might be the simplest way to apply the styling Rob wants? The most obvious way lots of people initially wrote CSS was to put what we call style declarations right in the element itself using the HTML style attribute. A style declaration simply consists of the HTML element's CSS property we want to change followed by a colon followed by the new value of the property and a semicolon at the end. For example, let's say Rob wants a black border around his introduction. We first put the style attribute on Rob's div here then inside double quotes put a CSS declaration: "border: 1px solid black;" The 1 pixel refers to the width of the border, the solid refers to the style of the border, and the color at the end determines what the border's color is. 

If we want multiple styles on an element, write these declarations in sequence. For example, if Rob wants his header text in Helvetica with a blue background and more space around the text, we can do this: style="font-family: Helvetica; background-color: blue; padding: 5px;" The last semicolon is actually optional, but people usually keep it in for consistency's sake. 

We'll save explaining some of the cooler and more complex CSS properties for another video. If you have something in mind, just Googling the effect you want followed by CSS will probably give you pretty good results. The cool thing is that CSS is pretty broad, so odds are if there is anything you want to do--within reason-- CSS can probably do it. We call this kind of styling inline styling. The element style is, well, in line with the start tag. 

For folks who really like to be organized, you might start getting a little peeved at how messy this all looks. Imagine if you had to do this for every element on the page, plus now your HTML and CSS are all intermixed and cluttered. Gross, right? To fix this, people eventually started catching on to separating their HTML markup from their CSS styling by using something called CSS selectors. CSS selectors are used to choose elements to which declarations are applied. A selector combined with a list of CSS declarations is often referred to as a CSS rule. These rules would be put between open and close HTML style tags, often in the head of the document. 

It's much easier to see with an example, so let's start by creating a simple CSS rule. First, let's put style tags in the head section of our HTML. Next, the selector. We'll start off by using one of the simplest selectors, the hash symbol, which selects an HTML element by its ID attribute. In this case we'll select the div that represents Rob's introduction by typing the hash symbol followed by the div's ID, rob. Now the declarations. We add open and close braces and shift our earlier inline declarations on Rob's div inside of these braces, refresh, and, cool, Rob's intro still has a black border around it minus the messy inline ugliness. 

Now, what if we wanted to select the h1 inside of Rob's intro? You might think, "Let's put an ID on it and then move our earlier styles." That works, but CSS has other ways of letting you select elements by using what we call combinators to mix simple selectors. For example, a whitespace character can be used as a combinator to specify all instances of 1 selector that live inside of another selector. That sounds a lot more complicated than it actually is. Here's an example. We will type #rob, add a space, and follow it with an h1, another simple selector called a tag selector that selects types of elements like divs or paragraphs. The space combines our 2 simple selectors, applying all CSS declarations and the curly braces to h1 tags that live inside of the element with id="rob". Just to convince you that it works, I'll change the font color to white, refresh, and, look, Rob's header is now white. 

All of this work goes to show that by using rules instead of inline styles we can get much cleaner code. In fact, if this style block starts getting a little bit large, I can even pull these styles out into a different file altogether. 

To include this new file as CSS in this document I'll just use HTML's link tag. Here I'm telling it that I'm linking in an external style sheet, the rel attribute, and specifying the path to the file with my href attribute. Now my HTML markup and CSS are organized nicely in completely separate files, which is almost always the way designers prefer working with HTML and CSS. 

In case you're wondering, the simple selectors include ID selectors and tag selectors like the ones we just saw as well as class selectors for selecting elements with a certain class, attribute selectors for selecting elements by other attributes like type="radio" for radio button inputs, and pseudoselectors like hover and focus for specifying styling when interactions like mousing over an element occur. 

The common combinators include whitespace for all children and commas to distinguish selectors. Others you may encounter include the arrow for direct children only, the tilde for all siblings that occur after the element, and the plus sign for the 1 sibling that comes immediately after the element. 

By combining these selectors and combinators, you can broaden the range of styling you can achieve on a given web page and write CSS more efficiently. With just a couple of lines of CSS you see me typing here, I can quickly make something like this look like something like this. 

I'm Joseph, and this is CS50. 

[CS50.TV] 

Uh, where do I start? Let me do that without-- [laughs] Okay. Add a-- Let me change that wording. Ooh. Sorry.