{"captions":[{"content":"[CSS]","startTime":0,"duration":2000,"startOfParagraph":false},{"content":"[Joseph Ong - Harvard University]","startTime":2000,"duration":2810,"startOfParagraph":false},{"content":"[This is CS50. - CS50.TV]","startTime":4810,"duration":2350,"startOfParagraph":false},{"content":"Today we'll be talking about CSS or Cascading Style Sheets.","startTime":7160,"duration":4270,"startOfParagraph":true},{"content":"So what exactly is CSS?","startTime":11430,"duration":2900,"startOfParagraph":true},{"content":"Well, let's break the term CSS down into 2 parts:","startTime":14330,"duration":2790,"startOfParagraph":false},{"content":"Cascading and Style Sheets.","startTime":17120,"duration":2390,"startOfParagraph":false},{"content":"Cascading is a little bit more complex, and it's something we'll cover in another video.","startTime":19510,"duration":4390,"startOfParagraph":false},{"content":"But for starters, Style Sheets very much hints at what CSS does.","startTime":23900,"duration":4030,"startOfParagraph":false},{"content":"It adds styles to the HTML of a web page,","startTime":27930,"duration":2950,"startOfParagraph":false},{"content":"changing how the web page aesthetically looks.","startTime":30880,"duration":2840,"startOfParagraph":false},{"content":"This means everything from the font of the text to the positioning of the content on the page","startTime":33720,"duration":4590,"startOfParagraph":false},{"content":"to other cool things like making the corners of a box rounded or adding shadows to text.","startTime":38310,"duration":5490,"startOfParagraph":false},{"content":"You can even do crazy things like make things animate on the screen.","startTime":43800,"duration":4430,"startOfParagraph":false},{"content":"So how do we use CSS with HTML?","startTime":48230,"duration":3470,"startOfParagraph":true},{"content":"Take this poor-looking site I just wrote.","startTime":51700,"duration":1920,"startOfParagraph":false},{"content":"If Rob were to look at this site right now, he'd probably say something like,","startTime":53620,"duration":3670,"startOfParagraph":false},{"content":"\"Wow! My introduction looks terrible. Joseph, you're an awful designer.\"","startTime":57290,"duration":4440,"startOfParagraph":false},{"content":"\"Using the default Times font? Helvetica is so much better.\"","startTime":61730,"duration":3380,"startOfParagraph":false},{"content":"So what might be the simplest way to apply the styling Rob wants?","startTime":65110,"duration":4490,"startOfParagraph":true},{"content":"The most obvious way lots of people initially wrote CSS","startTime":69600,"duration":3930,"startOfParagraph":false},{"content":"was to put what we call style declarations right in the element itself","startTime":73530,"duration":3940,"startOfParagraph":false},{"content":"using the HTML style attribute.","startTime":77470,"duration":3090,"startOfParagraph":false},{"content":"A style declaration simply consists of the HTML element's CSS property we want to change","startTime":80560,"duration":5860,"startOfParagraph":false},{"content":"followed by a colon followed by the new value of the property and a semicolon at the end.","startTime":86420,"duration":5720,"startOfParagraph":false},{"content":"For example, let's say Rob wants a black border around his introduction.","startTime":92140,"duration":4460,"startOfParagraph":false},{"content":"We first put the style attribute on Rob's div here","startTime":96600,"duration":3440,"startOfParagraph":false},{"content":"then inside double quotes put a CSS declaration:","startTime":100040,"duration":3790,"startOfParagraph":false},{"content":"\"border: 1px solid black;\"","startTime":103830,"duration":4050,"startOfParagraph":false},{"content":"The 1 pixel refers to the width of the border, the solid refers to the style of the border,","startTime":107880,"duration":4600,"startOfParagraph":false},{"content":"and the color at the end determines what the border's color is.","startTime":112480,"duration":4160,"startOfParagraph":false},{"content":"If we want multiple styles on an element, write these declarations in sequence.","startTime":116640,"duration":4580,"startOfParagraph":true},{"content":"For example, if Rob wants his header text in Helvetica with a blue background","startTime":121220,"duration":4430,"startOfParagraph":false},{"content":"and more space around the text, we can do this:","startTime":125650,"duration":3620,"startOfParagraph":false},{"content":"style=\"font-family: Helvetica; background-color: blue; padding: 5px;\"","startTime":129270,"duration":10530,"startOfParagraph":false},{"content":"The last semicolon is actually optional, but people usually keep it in for consistency's sake.","startTime":142150,"duration":5860,"startOfParagraph":false},{"content":"We'll save explaining some of the cooler and more complex CSS properties","startTime":148010,"duration":4170,"startOfParagraph":true},{"content":"for another video.","startTime":152180,"duration":1960,"startOfParagraph":false},{"content":"If you have something in mind, just Googling the effect you want followed by CSS","startTime":154140,"duration":4640,"startOfParagraph":false},{"content":"will probably give you pretty good results.","startTime":158780,"duration":2810,"startOfParagraph":false},{"content":"The cool thing is that CSS is pretty broad,","startTime":161590,"duration":2940,"startOfParagraph":false},{"content":"so odds are if there is anything you want to do--within reason--","startTime":164530,"duration":3940,"startOfParagraph":false},{"content":"CSS can probably do it.","startTime":168470,"duration":2880,"startOfParagraph":false},{"content":"We call this kind of styling inline styling.","startTime":171350,"duration":3400,"startOfParagraph":false},{"content":"The element style is, well, in line with the start tag.","startTime":174750,"duration":4280,"startOfParagraph":false},{"content":"For folks who really like to be organized,","startTime":179030,"duration":2740,"startOfParagraph":true},{"content":"you might start getting a little peeved at how messy this all looks.","startTime":181770,"duration":4030,"startOfParagraph":false},{"content":"Imagine if you had to do this for every element on the page,","startTime":185800,"duration":4010,"startOfParagraph":false},{"content":"plus now your HTML and CSS are all intermixed and cluttered.","startTime":189810,"duration":3880,"startOfParagraph":false},{"content":"Gross, right?","startTime":193690,"duration":1810,"startOfParagraph":false},{"content":"To fix this, people eventually started catching on to separating their HTML markup","startTime":195500,"duration":5610,"startOfParagraph":false},{"content":"from their CSS styling by using something called CSS selectors.","startTime":201110,"duration":5260,"startOfParagraph":false},{"content":"CSS selectors are used to choose elements to which declarations are applied.","startTime":206370,"duration":5410,"startOfParagraph":false},{"content":"A selector combined with a list of CSS declarations is often referred to as a CSS rule.","startTime":211780,"duration":6820,"startOfParagraph":false},{"content":"These rules would be put between open and close HTML style tags,","startTime":218600,"duration":4660,"startOfParagraph":false},{"content":"often in the head of the document.","startTime":223260,"duration":2860,"startOfParagraph":false},{"content":"It's much easier to see with an example,","startTime":226120,"duration":2880,"startOfParagraph":true},{"content":"so let's start by creating a simple CSS rule.","startTime":229000,"duration":4000,"startOfParagraph":false},{"content":"First, let's put style tags in the head section of our HTML.","startTime":233000,"duration":5180,"startOfParagraph":false},{"content":"Next, the selector.","startTime":238180,"duration":1840,"startOfParagraph":false},{"content":"We'll start off by using one of the simplest selectors, the hash symbol,","startTime":240020,"duration":3470,"startOfParagraph":false},{"content":"which selects an HTML element by its ID attribute.","startTime":243490,"duration":4590,"startOfParagraph":false},{"content":"In this case we'll select the div that represents Rob's introduction","startTime":248080,"duration":3770,"startOfParagraph":false},{"content":"by typing the hash symbol followed by the div's ID, rob.","startTime":251850,"duration":4890,"startOfParagraph":false},{"content":"Now the declarations.","startTime":256740,"duration":1839,"startOfParagraph":false},{"content":"We add open and close braces and shift our earlier inline declarations on Rob's div","startTime":258579,"duration":5511,"startOfParagraph":false},{"content":"inside of these braces, refresh,","startTime":264090,"duration":2790,"startOfParagraph":false},{"content":"and, cool, Rob's intro still has a black border around it minus the messy inline ugliness.","startTime":266880,"duration":7280,"startOfParagraph":false},{"content":"Now, what if we wanted to select the h1 inside of Rob's intro?","startTime":274160,"duration":5220,"startOfParagraph":true},{"content":"You might think, \"Let's put an ID on it and then move our earlier styles.\"","startTime":279380,"duration":5020,"startOfParagraph":false},{"content":"That works, but CSS has other ways of letting you select elements","startTime":284400,"duration":4360,"startOfParagraph":false},{"content":"by using what we call combinators to mix simple selectors.","startTime":288760,"duration":4730,"startOfParagraph":false},{"content":"For example, a whitespace character can be used as a combinator","startTime":293490,"duration":4250,"startOfParagraph":false},{"content":"to specify all instances of 1 selector that live inside of another selector.","startTime":297740,"duration":5770,"startOfParagraph":false},{"content":"That sounds a lot more complicated than it actually is.","startTime":303510,"duration":3120,"startOfParagraph":false},{"content":"Here's an example.","startTime":306630,"duration":2200,"startOfParagraph":false},{"content":"We will type #rob, add a space, and follow it with an h1,","startTime":308830,"duration":5070,"startOfParagraph":false},{"content":"another simple selector called a tag selector that selects types of elements","startTime":313900,"duration":4940,"startOfParagraph":false},{"content":"like divs or paragraphs.","startTime":318840,"duration":2360,"startOfParagraph":false},{"content":"The space combines our 2 simple selectors, applying all CSS declarations","startTime":321200,"duration":4940,"startOfParagraph":false},{"content":"and the curly braces to h1 tags that live inside of the element with id=\"rob\".","startTime":326140,"duration":6420,"startOfParagraph":false},{"content":"Just to convince you that it works, I'll change the font color to white, refresh,","startTime":332560,"duration":5730,"startOfParagraph":false},{"content":"and, look, Rob's header is now white.","startTime":338290,"duration":3800,"startOfParagraph":false},{"content":"All of this work goes to show that by using rules instead of inline styles","startTime":342090,"duration":5420,"startOfParagraph":true},{"content":"we can get much cleaner code.","startTime":347510,"duration":3000,"startOfParagraph":false},{"content":"In fact, if this style block starts getting a little bit large,","startTime":350510,"duration":3390,"startOfParagraph":false},{"content":"I can even pull these styles out into a different file altogether.","startTime":353900,"duration":4440,"startOfParagraph":false},{"content":"To include this new file as CSS in this document I'll just use HTML's link tag.","startTime":358340,"duration":6780,"startOfParagraph":true},{"content":"Here I'm telling it that I'm linking in an external style sheet, the rel attribute,","startTime":365120,"duration":5200,"startOfParagraph":false},{"content":"and specifying the path to the file with my href attribute.","startTime":370320,"duration":4520,"startOfParagraph":false},{"content":"Now my HTML markup and CSS are organized nicely in completely separate files,","startTime":374840,"duration":5450,"startOfParagraph":false},{"content":"which is almost always the way designers prefer working with HTML and CSS.","startTime":380290,"duration":5800,"startOfParagraph":false},{"content":"In case you're wondering, the simple selectors include ID selectors","startTime":386090,"duration":4090,"startOfParagraph":true},{"content":"and tag selectors like the ones we just saw","startTime":390180,"duration":2920,"startOfParagraph":false},{"content":"as well as class selectors for selecting elements with a certain class,","startTime":393100,"duration":5510,"startOfParagraph":false},{"content":"attribute selectors for selecting elements by other attributes like type=\"radio\"","startTime":398610,"duration":5390,"startOfParagraph":false},{"content":"for radio button inputs, and pseudoselectors like hover and focus","startTime":404000,"duration":5180,"startOfParagraph":false},{"content":"for specifying styling when interactions like mousing over an element occur.","startTime":409180,"duration":6080,"startOfParagraph":false},{"content":"The common combinators include whitespace for all children","startTime":415260,"duration":3690,"startOfParagraph":true},{"content":"and commas to distinguish selectors.","startTime":418950,"duration":3130,"startOfParagraph":false},{"content":"Others you may encounter include the arrow for direct children only,","startTime":422080,"duration":4290,"startOfParagraph":false},{"content":"the tilde for all siblings that occur after the element,","startTime":426370,"duration":4070,"startOfParagraph":false},{"content":"and the plus sign for the 1 sibling that comes immediately after the element.","startTime":430440,"duration":5570,"startOfParagraph":false},{"content":"By combining these selectors and combinators,","startTime":436010,"duration":2530,"startOfParagraph":true},{"content":"you can broaden the range of styling you can achieve on a given web page","startTime":438540,"duration":4370,"startOfParagraph":false},{"content":"and write CSS more efficiently.","startTime":442910,"duration":2140,"startOfParagraph":false},{"content":"With just a couple of lines of CSS you see me typing here,","startTime":445050,"duration":3320,"startOfParagraph":false},{"content":"I can quickly make something like this look like something like this.","startTime":448370,"duration":6090,"startOfParagraph":false},{"content":"I'm Joseph, and this is CS50.","startTime":454460,"duration":2620,"startOfParagraph":true},{"content":"[CS50.TV]","startTime":457080,"duration":2180,"startOfParagraph":true},{"content":"Uh, where do I start?","startTime":459260,"duration":1520,"startOfParagraph":true},{"content":"Let me do that without-- [laughs] Okay.","startTime":460780,"duration":3360,"startOfParagraph":false},{"content":"Add a-- Let me change that wording.","startTime":464140,"duration":3160,"startOfParagraph":false},{"content":"Ooh. Sorry.","startTime":470580,"duration":1890,"startOfParagraph":false}]}