Introduction to Coding HTML | CSS | JS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed, what they look like.
Syntax:
selector {
property: value;
}
Divs
html
<div id="">
<div class=""></div>
css - (id = #name class=.name)
selector {
property: value;
}
Example below on codepen - 'sample1'
<div id="one">
<div class="sample1">This is my sample</div>
.sample1 {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Borders
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
or
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS to make custom sized boxes
.divname {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Border properties - border-style must be set first.
border-width: 5px; (can specify up to four values for each side - clockwise from top)
border-color: red; (can specify up to four values for each side - clockwise from top)
background colour -
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
p {
border-left: 6px solid red;
background-color: lightgrey;
}
rounded corners -
p {
border: 2px solid red;
border-radius: 5px;
}
Background Images (repeat-x for horizontal repeat, repeat-y for vertical repeat)
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
no-repeat to fix image
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
to fix background image so it won't scroll with page
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Shorthand version
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Shorthand order:
background-color
background-image
background-repeat
background-attachment
background-position
CSS Properties:
codepen.io