CSS
What is CSS?
- Cascading Style Sheet.
- Cascading means styles of a higher precedence will overwrite rules of a lower precedence.
- We can split Design(CSS) with HTML(information).
- We can define layout and style to decorate HTML.
Structure of CSS
selector { attribute: value; }
- selector : Area to apply our design.
- attribute : Design to apply
- value : The concrete order of attribute.
How to apply CSS to HTML
Inline Style Sheet
<h1 style=“color: red;”>coding 101 </h1>
- We can just wrtie a style attribute in the HTML tag directly.
- But This would be inefficient if HTMl code would be too long.
Internal Style Sheet
<head>
<style>
h1 {background-color: yellow;}
</style>
</head>
- We can add style tag in html file.
- This way woule be more efficient than Inline Style Sheet but There is a better way.
External Style Sheet
index.html
<head>
<linkrel="stylesheet"href=“style.css”>
</head>
style.css
h1 {font-style: italic;}
- We can connect CSS file to HTML file by link tag.
- This way has high readability and is easy to maintain the project.
CSS Selectors
What is Selector?
- We can choose HTML elements by this "selectors" to apply CSS styles to elements.
Selector Kinds
Type
<style>
h2 {color: red;}
</style>
- we can apply style to a specific type of tags.
Class
<style>
.coding {color: blue;}
</style>
- We can apply styles to the tags where we set class names.
ID
<style>
#coding {color: green;}
</style>
- We can apply styles to the tags where we set Id attribute.
Parent-Children Relationship
Parent-Child Relationship 1
<header>
<h1>Headerh1</h1>
<p>Headerp</p>
</header>
header {color:red; }
h1 {color:blue; }
p {color:green; }
- header is a parent of h1 and p tags.
- h1 and p tags are siblings.
Parent-Child Relationship 2
<header>
<h1>Headerh1</h1>
<p>Headerp</p>
</header>
<footer>
<h1>Footerh1</h1>
<p>Footerp</p>
</footer>
header {color:red; }
header h1 {color:blue; }
header p {color:green; }
- we can set a specific parent-child relationship to CSS to apply the design to specific area.
Cascading
3 elements that decide precedence of CSS.
Order
<p>Hello World</p>
p {color : red; }
p {color : blue; } // this has higher priority than previous one.
- Latest applied attribute has higher precedence.
Detail
<header>
<p>HelloWorld</p>
</header>
header p {color : red; } // this has higher precedence.
p {color : blue; }
- Specifically defined selector has higher precedence.
Selector
<h3 style=“color: pink”id=“color”class=“color”> color </h3>
#color {color:blue; }
.color {color:red; }
h3 {color:green; }
- style attribute > id > class > type
CSS main attributes
Width, Height
<p class="paragraph">Let's learn programming!</p>
.paragraph {
width : 500px;
height:500px;
}
- width : We can set width of the selector we choose for example fixed value(%) and variable value(px)
- height : We can set height of the selector we choose.
Font
<p class="paragraph">enjoy web programming!</p>
.paragraph {
font-size:50px;
font-family:Arial,sans-serif;
font-style:italic;
font-weight:bold;
}
font-family
- Font support depends on the browser.
- Last line in the selector has higher precedence.
font-weight
- We can input between 100~900 and also bold and bolder too.
Border
<p class="paragraph">enjoy web programming!</p>
.paragraph {
width:500px;
height:500px;
border-style: solid;
border-width: 10px;
border-color: red;
/* border: solid 10px red; */
}
- solid : solid line
- dotted : dotted line
- border : line type line breadth color
Background
<p class="paragraph">enjoy web programming!</p>
.paragraph {
background-color: yellow;
background-image: url(image path);
background-repeat: no-repeat;
background-position: left;
/* background: yellowurl(이미지경로)no-repeatleft; */
}
background-repeat
- x-axis repeat : repeat-x
- y-axis repeat : repeat-y
- no repeat : no-repeat
background-position
- We can change the coordinate of image in a space
- top, bottom, center, left, right