[2.1] Learning CSS

Mikyung Lee·2020년 12월 4일
0

html / css

목록 보기
1/4
post-thumbnail

Style

<style>
        h1 {
            color: rgb(0, 195, 255);
            font-siz:20px;
            text-decoration: underline;
            font-weight:300;
            font-style: italic
        }
        address {
            text-align: center;
            color: tomato;
        }
    </style>코드를 입력하세요
    
    

Style.CSS

body {
  background-color: aqua;
}

CSS is applied from top to bottom, old to latest

        div {
            height: 150px;
            width: 150px;
            background-color: tomato
        }
        Span {
            background-color: turquoise;
        }
    </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <Span>hello</Span>
        <Span>hello</Span>
        <Span>hello</Span>
        <a href="#">link</a>
        <span>hello</span>
    </body>

block - address, div, etc

inline - span, a, image

box - margin, padding, border

User agent stylesheet - given by browser

Margin

<style>
        html {
            background-color: tomato;
            margin: 0;
        }
        body {
            background-color: thistle;
            margin-top: 20px;
            margin-left: 10px;
            margin-right: 5px;
            margin-bottom: 10px;
        }
        div {
            margin-left: 50px;
            height: 150px;
            width: 150px;
            background-color: white
        }
        Span {
            background-color: turquoise;
        }
    </style>

padding & ids

<html lang="kr">
    <head>
        <title>Home - My first website.</title>
    <style>
        html {
            background-color: tomato;
        }
        body {
            margin: 20px;
            padding: 20px;
            background-color: thistle;
        }
        div {
            padding: 10px;
        }
        #first {
            height: 150px;
            width: 150px;
            background-color: whitesmoke;
        }
        #second {
            height: 50px;
            width: 50px;
            background-color: teal;
        }
        #third {
            height: 15px;
            width: 15px;
            background-color: wheat;
        }
        #fourth {
            height: 10px;
            width: 10px;
            background-color: pink;
        }
        </style>
    </head>
    <body>
        <div id="first">
            <div id="second">
                <div id="third">
                    <div id="fourth"></div>
                </div>
            </div>
        </div>
    </body>
    </html>

border

<html lang="kr">
    <head>
        <title>Home - My first website.</title>
    <style>
        * {border: 2px solid black;}
        html {
            background-color: tomato;
        }
        body {
            margin: 20px;
            padding: 20px;
            background-color: thistle;
        }
        div {
            padding: 10px;
            border: 2px solid black;
        }
        #first {
            height: 150px;
            width: 150px;
            background-color: whitesmoke;
        }
        #second {
            height: 50px;
            width: 50px;
            background-color: teal;
        }
        #third {
            height: 15px;
            width: 15px;
            background-color: wheat;
        }
        #fourth {
            height: 10px;
            width: 10px;
            background-color: pink;
        }
        </style>
    </head>
    <body>
        <div id="first">
            <div id="second">
                <div id="third">
                    <div id="fourth"></div>
                </div>
            </div>
        </div>
    </body>
    </html>
profile
front-end developer 🌷

0개의 댓글