6 Important CSS Properties you must know
CSS stands for Cascading Style Sheet. It is responsible for making web pages more presentable.
After HTML, CSS is the second essential language every developer learns.
It handles the look and feel of a web page. It helps a developer to take control over the color of the text, background as image how columns are laid etc.
Format
Your CSS Code is written in rule sets like below:
h1 {color:blue;}
In this example color is the Property and blue is the value Each line of CSS must end in a;
Classes and Ids
When referencing a class use a period, when referencing anid use a pound sign.
Example:
.Class-name { }
#id-name { }
Spacing and Sizing
Padding
The Space inside the element
Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Margin
The Space outside the element
Example
Set different margins for all four sides of a <p> element.
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Width
Can be set by pixels (px) or percentages(%)
Example
Set the width of a <div> element:
div {
width: 50%;
background-color: powderblue;
}
Height
Cab be sent by pixels (px) or percentages (%)
Example
Set the height of two <div> elements:
div.a {
height: auto;
border: 1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Text
Color
Change your text color (use a color name or hex code)
Example
Set the text-color for different elements:
body {
color: red;
}
h1{
color:#00ff00;
}
p.ex{
color: rgb (0,0,255);
}
Font-size
Set the size of the text (make sure your number is followed by ‘px’)
Example
Set the font size for different elements:
div.a {
font-size:15px;
}
div.b {
font-size:large;
}
div.c {
font-size: 150%;
}
Text-align
Moves the placement of your text, can be center, left or right
Example
Set the text alignment for different <div> elements:
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}
Text-decoration
Can be underline, overline, line-throug or none
Example
Set different text decorations for <h1>,<h2>, and <h3> elements:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
Background
Background- color
Set the background to any color name or hex code
Example
Set the background color for a page:
body {background-color: coral;}
Background-image: url(“link”)
Make the background an image, put your link in the quotes
Example
Set a background-image for the <body> element:
body {
background-image: url ("paper.gif");
background-color: #cccccc;
}
Background-size
Change the size of your background image (set to “cover” to fill the Screen)
Example
Specify the size of a background-image with “auto” and in pixels:
#example 1 {
background: url (mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example 2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
Borders
Border-style
Can be dotted, dashed, solid, double, groove, ridge, inset, or outset
Example
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. none {border-style:none;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
Border-color
Change the color of your border
Example
Set a color for the border:
div {border-color: coral;}
Border-width
How thick the line of the border is, set with px
Example
Set a width for the borders:
div {border-width: thin;}
