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

Leave a Reply

Your email address will not be published.