External Style Sheets Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:27:33 Hi! Everybody! Welcome back. In this video, we continue to learn about Css by talking about external style sheets.
16:27:43 So in the previous videos, we've talked about how you can set the style of various HTML elements by either adding a style elements in the head of your document or by editing the style within the opening tag of the desired element another thing that's commonly done is making an
16:28:02 external style, file a file that ends with Cs.
16:28:07 Where, in that file you set all of the desired style.
16:28:11 Options, for those elements that you're interested in changing.
16:28:15 And then you just call the file within the HTML document.
16:28:19 This is common when you want to set a common style across multiple HTML pages.
16:28:23 Perhaps for running a website, you would then create maybe a number of style files that would get called for various web pages.
16:28:32 For instance, maybe you're running a blog, a digital blog, and you want all of your blog posts to look the same without having to manually edit the Css.
16:28:41 Settings within each blog post itself. So we'll see an example of how to do this.
16:28:47 With this repository. The key thing is, once you've designed your Css.
16:28:53 Style sheet. You need to create a link element within the head where you set the hyper F attribute to be the file name and the path of the style.
16:29:04 File. You set the type, attribute equal to text, slash css, which tells your HTML document that this is a Css.
16:29:12 File, and then you set your rel attribute equal to style, sheet.
16:29:17 So for an example, let's dive into our code.
16:29:21 So we'll look at both of these files with visual studio.
16:29:27 So I've got my style. Css. File here, which has a setting for the body to be a light cyan background with comic sands Font.
16:29:39 I had 18 pixels for the font size.
16:29:43 We set a style for the headers to be black, and have a font size of 30 Px.
16:29:50 And then we set a style for our P. Elements to have a color of dark gray.
16:29:55 So that's the style sheet. And then within the HTML file.
16:30:00 I include now a link element, and within that link element, because the style file is contained within the same folder as the HTML.
16:30:11 All I have to do for the hyper reference is put the name of the HTML.
16:30:15 File, and then the other 2 elements are set according to the rules.
16:30:20 So my type is text slash, css, and then my rel is style sheet.
16:30:27 And so now we can go ahead and open this, and Fire Fox, and we can see how the style has changed.
16:30:33 Okay, so our background is light. Cyan. We're in comic stands.
16:30:39 Font. My header is black and larger than my P.
16:30:44 And then we can also go ahead and look at let's say, I commented out the link.
16:30:48 Part, and then refresh the document. Now we can see how this changes from the default.
16:30:56 So let's go ahead, and uncommon that, and see the effects of the style sheets.
16:31:02 So now you know that you, instead of having to always edit the style of your various web pages, you can just create a single or a number of external style sheets the desired style sheet within a link element inside of the head, and there you go so now you know how to do all that I hope you enjoyed
16:31:25 watching this video feel free to play around with the HTML and Css.