Browser Default Styling

  • 같은 html 파일도 다른 브라우저에 보여질 때 다르게 보인다.
    • 일부 태그는 지원이 안됨
    • 브라우저는 서로 다른 default style을 가지고 있다.
  • 일반적으로 dafault는 plain

Adding Style

  • 스타일 태그가 점차 html에 제외되서, 스타일은 style attribute 가 됨
  • css 사용하는 것이 올바른 방법
<h1 style = "color:blue"> heading </h1>

Cascading Style Sheet

  • CSS는 다양한 element에 적용할 수 있는 포괄적인 규칙으로 정의됨
h1{
    color:blue;
}

Rule Syntax

  • {}, ; 은 매우 중요
  • 좋은 에디터는 큰 차이를 만듬

Internal Style Sheet

  • Styling은 <head> 안에 정의되어 있음.
  • Rule은 <style> 안에 정의
  • 스타일은 해당 파일안에 모든 element에게 적용됨
<head>
    <meta charset="UTF-8">
    <title> title </title>
    <style>
        h1{
            color:blue;
        }
    </style>
</head>

External Style Sheets

  • 외부 파일안에 rule을 적을 수 있다 (<style> 태그 사용하지 않음)
  • .css 파일
  • 스타일 시트 링크는 head section에 놓는다.
<link rel="stylesheet" href="style.css">

The “Cascading” part of CSS

Cascading 의미
아래 순서로 덮어 씀

  1. Browser default
  2. External style sheets
  3. Internal style (head section)
  4. Inline style (HTML element 에 있는 것)

Rule 우선 순위

  • 2개의 external files 가 정의되있다면 어떤 것을 선택?
    • 가장 최근 파일을 선택 (리스트 마지막에 있는 것)
  • 같은 파일에 1개 이상 rule 이 있으면?
    • 파일 마지막에 있는 것을 적용
h1{
    font-family: Arial;
}
h1{
    font-family: Times;
}

!Important

h1{
    font-family: Arial !important;
}
h1{
    font-family: Times;
}

Review

  • content를 포멧으로부터 왜 분리?
  • external/internal style sheet이 어떻게 연관되어 있나?
  • CSS 예제 – http://csszengarden.com/

공부 위치 – https://www.coursera.org/learn/introcss/lecture/pf413/01-02-cascading-style-sheets