티스토리 뷰

4. CSS: An Overview

kkd927 kkd927 2014.07.06 03:45

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):

  1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over

  2. 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:

  1. A type attribute that should always be equal to "text/css"

  2. A rel attribute that should always be equal to "stylesheet"

  3. 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:

  1. background-color, which you set to a color or hex value

  2. height, which you set to a value in pixels

  3. 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!






'' 카테고리의 다른 글

6. CSS Selectors  (1) 2014.07.06
5. Design a Button for Your Website  (0) 2014.07.06
4. CSS: An Overview  (0) 2014.07.06
3. HTML Basics III  (0) 2014.07.06
2. HTML Basics II  (0) 2014.07.06
1. HTML Basics  (2) 2014.07.06
댓글