ࡱ > us bjbj 8 uk 8 8 { { { { { L $ U p o o o o ! Z " 2" T T T T T T T W Z T { B" ! " ! B" B" T { { o o + T 4 4 4 B" { o { o T 4 B" T 4 4 A | B o 6/ ) J DB T T 0 U VB Z 1[ J4 : 1[ $ B B 1[ { S B" B" 4 B" B" B" B" B" T T 4 B" B" B" U B" B" B" B" 1[ B" B" B" B" B" B" B" B" B" 8 A : CSS for Formating HTML files Guide: Mr. Kay, Engineering & Design What is CSS? CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. A style sheet is a file that describes how an HTML file should look. That's it! We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! (We'll talk more about cascading in section four.) Check out stylesheet.css. We've put in the CSS to make the paragraph's text red, but you need to add the CSS that will make the text between tags blue. Fill it in and click Submit! Code:
I'm a paragraph written in red font, but one of my words is blue!
Stylesheet.css p { color: red; } span { color: blue } Gives these results: I'm a paragraph written in red font, but one of my words is blue! Why a separate CSS file? There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML): You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over You can apply similar appearance and formatting to several HTML pages from a single CSS file Look at the HTML in index.html. That's a lot of tags! All those words are in regular font, but we want them to be super fancy. Go to the stylesheet.css tab and tell the span selector that you want the font-family to be cursive. Check the Hint if you need help! Let's see... making something red meant we had to type span { color: red; } So if we put in font-family: cursive; instead of color: red;, that should fancify our font! Code:Much of this is regular text, but some of it is fancy! We can use our newly fancified font to add some flair to our website. It'd be a royal pain to make each of these span tags fancy individually, but it's a cinch with CSS!
Stylesheet.css: span { font-family: cursive } Results: Much of this is regular text, but some of it is fancy! We can use our newly fancified font to add some flair to our website. It'd be a royal pain to make each of these span tags fancy individually, but it's a cinch with CSS! Linking up CSS style files: We previously showed you how to do inline styling with HTML, like so:Red font!
This is a less awesome way to style your website for the reasons we just mentioned: you have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place! There are two ways to put CSS in one place. This first is to put your CSS between tags, right in the same file as your HTML. TheseCheck it out! I'm purple!