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;
}
 margin

 the space around the outside of a border
 padding  the space inside between the text and the border, or the space from the left side to an object
 content   The content of the box, where text and images appear
 border  A border that goes around the padding and content

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 

{
    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 - 
{

    border-bottom: 6px solid red;
    background-color: lightgrey;
}


{
    border-left: 6px solid red;
    background-color: lightgrey;
}

rounded corners -
{
    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




Comments