티스토리 뷰
CSS: An Overview
What’s CSS?
1. Seeing is believing
The stylesheet.css tab (which we'll teach you how to use in this course) contains all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more.
2. What CSS is
CSS (which stands for Cascading StyleSheets) 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.
3. Why separate form from function?
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
4. If it’s in, it’s out!
There are two ways to put CSS in one place. This first is to put your CSS between <style></style> tags, right in the same file as your HTML.
5. Link it up!
You do this by putting a <link> tag (as you saw in the first exercise of this course) between the <head>...</head> tags of your HTML page. Your <link> tag needs three attributes:
A type attribute that should always be equal to "text/css"
A rel attribute that should always be equal to "stylesheet"
A href attribute that should point to the web address of your CSS file
6. PSA: Self-closing tags
Most tags are not self-closing, but we'll point out the self-closing ones to help save you time and typing.
CSS Syntax
7. Syntax for the wintax
CSS syntax is different from the HTML you're used to, but don't worry: it's easy to pick up! The general format looks like this:
A selector can be any HTML element, such as <p>, <img>, or <table>. You just take off the <>s!
A property is an aspect of a selector. For instance, you can change the font-family,color, and font-size of the text on your web pages (in addition to many more).
A value is a possible setting for a property.color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.
You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next.
8. One selector, many properties
Another cool advantage of CSS is that you can set many properties for one selector. For instance, if you want to set a paragraph's font, font color, and font size, you can simply write:
9. Many selectors, many properites
10. The importance of semicolons
As you start adding more and more property-value pairs for each CSS selector, it's important to remember to put a semicolon (;) at the end of each line.
The semicolon tells CSS that one property-value pair is over and it's time to move on to the next one. Without semicolons, it'll become confused and your page won't look right.
11. Color commentary
While it's important to get all your syntax down correctly, it's also a good idea to writecomments as you go along. Good comments will help remind you why you did something a certain way (or will help someone else out if they're reading your code without you there to explain it).
CSS comments, look like this:
12. Check yourself before you wreck yourself
Details, Details
13. Hexawhatnow?
색깔을 표시할때 16진법의 수를 쓴다.
14. Roses and red…
Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!
Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive:
15. Pixels and ems
What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use for emphasis!)
The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font:
16. A font of knowledge
Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it. The good news is that CSS has some built-in defaults meant to ensure your users see what you intend. They are:
serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.
sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.
cursive: A scripty font! It looks like cursive writing.
17. Backup values
You don't have to jump straight to a default value like cursive or sans-serif: you can tell CSS to try several, going from one to the next if the one you want isn't available.
CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.
18. Review
We've covered:
What CSS is
Why we separate form from function
CSS syntax, including (multiple) selectors, (multiple) property-value pairs, and comments
Details of how colors, font sizes, and font families work
Selecting HTML Elements
19. Background color, height, and width
Remember our friend <div>, and how we used it to make those multi-colored blocks? Time for you to build your own blocks!
There are three properties you'll need to set values for:
background-color, which you set to a color or hex value
height, which you set to a value in pixels
width, which is also measured in pixels
20. Bordering on insanity
Many HTML elements support the border property. This can be especially useful with tables.
The border property in turn supports several values. For example, for a border 2 pixels thick, solid, and red, you'd type
21. Links and text decoration
Links have a lot of the same properties as regular text: you can change their font, color, size, and so on.
But links also have a property, text-decoration, that you can change to give your links a little more custom flair. You're probably used to seeing links that are blue and underlined, right? Well, that's not the way it has to be!
