Learn CSS

CSS stands for cascading style sheet. This style sheet designs HTML structure and adds animations in a webpage.

The important thing is not that you learn CSS but the important is the way you learn CSS and implement it to create something new. Click on web4college projects to see the new desings made with HTML and CSSS.

What will you learn in CSS tutorials?

You'll learn how to make buttons, design tables, sidebar, navigation bar, design background, apply borders, position the elements, draw shadow for elements, transform the elements, make animations, make transitions of properties etc.


See the following demos that you'll be able to make after learning CSS. They have been designed with CSS.

Syntax

We'll see the basic syntax of CSS and the methods to apply CSS properties to HTML elements.

Example

<style>
body{
 background-color:lightgreen;	
}
code{
 background-color:lightblue;	
}
</style>
Try </>

background

In this tutorial, we'll set the background of elements. The background represents the background-color, background-image and the properties related to the background.

border

In this tutorial, we'll learn the border properties such as border-width, border-style, border-color etc.

Example

border:10px groove rgba(200,200,200,1);
How to

outline

It is related to the outline property outside the border. We'll learn to design the outline outside the border.

Example


outline:5px dashed red;
How to

Designing of table

How to design a table with the CSS properties.

Example


Student Credit Hours Obtained Marks Total Marks
Madelene 3 630 800
Farnley 3 619 800
Maddie 3 659 800
Bailey 4 594 800
Ada 4 550 800
Acley 4 510 800
How to

fonts

This tutorial represents the properties related to the fonts such as font-size, font-family, font-weight, font-style and color.

Example

size

font-size:18px;

size

font-size:3em;

size

font-size:200%;

How to

position

It represents the position of HTML elements. This property seems to be simple and of least use. But position property is very important to position the elements relative to their original position, relative to their parent elements.

Example

<style>
div{
 position:relative;
 left:100px;
 top:100px; 
}
</style>

Try </>

float

It represents the placement of elements. The value may be right, left or none.

Example

This element is floating on the right side.
How to

lists

We'll see how to design lists. Lists are used to summarize the data with the important points. We can make navigation bar, side bar and drop down menues with the lists.

Example

How to

padding

padding property defines the space within an element and not outside the elements.

margin

margin property defines the space outside the element. It represents how much far away is an element from the other one.

text

text property defines word-spacing, letter-spacing, line-height, text-indent, text-align etc.

Example

letter

word-spacing:2px;

letter

word-spacing:5px;

letter

word-spacing:8px;


How to

box-shadow

This property projects a shadow of the element. And the element seems to be in 3-D form.

Example

box-shadow:15px  15px  10px  10px  rgba(0,0,0,0.2) inset;


How to

transform

This attribute translates or rotates the elements in 2-D or 3-D.

Example

web4college

transform:rotatex(45deg);

web4college

transform:rotatey(45deg);

web4college

transform:rotatez(45deg);


How to

transition

transition property represents only one transition of CSS properties from one state to another within a specific interval.

animation

animation property represents more than one transitions for CSS properties at specific intervals.

element selectors

Element selectors select specific elements based on the rules described in CSS properties. We use selectors such as *, >, +, ~ to select various elements based on the structure.

Example

<style>
p+code{
  font-family:fantasy;
  color:red;
}
</style>

Try </>

attribute selectors

Attribute selectors select those elements that follow the rules set by the attribute selectors.

Example

<style>
input[type="text"]{
 outline:none;
 border:1px solid gray;
 border-radius:5px;
 width:150px;
 height:30px;
}
</style>

Try </>

This property designs all of the input elements that have type attribute. And the value of the type attribute must be text.

Sidebar

In the same way, the sidebar can be designed by the CSS. You will learn how to create a side bar in the next tutorials.

Example

Demo Tutorials

How to

page layout

A web page consists of nav, aside, header, article, section, main and footer. The following given example represents the structure of a page. You will learn how to design the elements with CSS.

Example

<header>

<section>

<article>

<footer>


Try </>

You will learn to create one column, two columns or three columns based website.

Was this article helpful?

 

Email:

Message: