CSS

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