How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

 

브라우저가 스타일시트를 읽어드릴때, 브라우저는 스타일시트의 정보에 따라서 HTML document 를 형태를 바꾼다.

 

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

css를 삽입하는 3가지 방법

 

여기 스타일 시트를 삽입하는 3가지 방법이 있다.

 

  ● 외부 css

  ● 내부 css

  ● 라인 안의 css

 

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

 

외부 css

외부 스타일시트의 방법으로 단지 단 하나의 파일로 전체 웹사이트의 외관을 바꿀수 있어요.

각각의 HTML 페이지는 Head 구역에 외부 스타일 시트의 링크의 설명을 포함해야만 한다.

 

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

 

외부의 스타일 시트는 어떤 텍스트 에딧터로서 작성할수 있고, .css 확장자로 저장되어 있어야만 한다.

외부 css 파일은 어떤 HTML Tag도 포함해선 안된다.

여기 mystyle.css 파일의 작성 방법이다.

 

 

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

 

내부 css

 

내부 css 는 만일 하나의 페이지에서 독특한 스타일을 가지기 위해서 사용되어질 수 있다.

내부 css는 head 구역 내부에서 <style>요소로 정의 되어진다.

 

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

 

인라인 css

inline 스타일은 단 하나의 요소를 위해서 스타일을 적용할때 사용되어진다.

inline 스타일을 사용하기 위해선  적절한 요소의 속성의 스타일을 추가한다? . 스타일 속성은 어떠한 css 속성도 포함 되어질 수 있다.

 

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. 

 

다양한 스타일 시트

 

만일 다른 스타일 시트에서 같은 속성을 정의하고 있다면 마지막 읽어드린 값이 적용된다.

 

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

 

연속적인 순서 ?

하나의 html 요소에 하나 이상의 Style이 있을때, 어떤 스타일이 사용되어질까?

모든 스타일들은 아래의 규칙에 의해서 가상의 스타일로 cascade 될것이다? 숫자 1이 가장 높은 우선순위를 가진다.

 

1. 인라인 스타일 시트

2. 외부 그리고 internal 스타일 시트

3. 브라우저 기본적인 스타일시트

 

그래서 인라인 스타일시트는 가장 높은 우선순위를 가지고 있고, 외부와 internal 그리고 브라우저의 기본 스타일을 덮어버릴 것이다.