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>