CSS Tutorial for Beginners

Learn CSS style sheet online with our Free CSS Tutorial, Learn how to style and visually organize HTML control with CSS.

Why to learn CSS? CSS is cascading style sheets, css describes how html elements should be displayed. css style sheet is all about making webpage beautiful. If you want to become successful web designer, then CSS stylesheet is the skill you must learn.

free css tutorial online

Start Learning CSS in Plain Notepad, or just download Notepad++

This CSS tutorial contains many real-time CSS examples, So that you can learn how to write CSS class and apply on HTML control.

Audience

This CSS tutorial is for web page designer, students and professionals who want to make their website pages, blogs more attractive, sober, reader friendly. Yes, anyone can learn and apply CSS on their web pages.

How to learn CSS coding?

You can write Css in your current HTML file or you can write a separate css file in a plain notepad then save the file with .css extention.

If you write css on same html file, then the csss code will start with <style> and end with </style> , below is an example.

Learn CSS Coding

Here are some examples of applying CSS on html elements.

<style>
body {
background-color:#e2e2e2;
}
            
h1 {
color:#006ecb;
text-align: center;
font-size:18px;
}
            
p {
font-family: verdana;
font-size: 14px;
}
</style>

But, if you want to write css in a separate file, this is how you can write, and just save the file with .css extension

How to Create CSS file

You can create a CSS file with any name and save with CSS extension .css, Like i have create a file called "wtr-style.css", and written the following code.

body {
background-color:#e2e2e2;
}
h1 {
color:#006ecb;
text-align: center;
font-size:18px;
}
p {
font-family: verdana;
font-size: 14px;
}
Practical CSS examples in webpage designing
  • Learn CSS Syntax

    In this you will learn how to write CSS code, CSS syntax. different ways of writing CSS.

  • CSS Body

    Learn how to apply CSS style of HTML document or BODY tag, so it looks standard throughout the application.

  • CSS style for Table

    You can standardize TABLE design using CSS throughout the web application; also can write custom design class.

  • CSS style for Div

    Learn how differently you can organize a DIV tag using CSS Style

  • CSS Anchor Tag, CSS style for A Links

    Learn A tag Styling, Hyperlink or anchor tags are often used HTML element, as a web designer you need to know how to change anchor tag style matching with your web page or any particular section of web page.

  • CSS Color

    In this you will learn how different ways you can write COLOR syntax using CSS.

  • CSS Font

    We can set different font family size using CSS.

  • CSS Display

    The display property specify how any html element to be displayed.

  • CSS padding and margin property

    Padding indicates inner space of any container; we can define padding using css style, set how much space we want inside any div, span or paragraph tag.

  • CSS Overflow

    Overflow property indicates what will happen if content overflows any defined container size.

  • CSS Opacity

    CSS Opacity property allow us to set transparency for image, div etc.

  • CSS Height and Width

    Using CSS, we can set "width and height" of any html element dynamically in percentage.

  • CSS style for Boxmodel Effect

    Learn how to create Box model effect on any HTML element using CSS Style.

  • CSS Align

    Setting alignment of any html content.

  • CSS style for Background

    Learn how to create different style of any HTML element, setting background IMAGE, background COLOR etc. using CSS class


CSS Tutorial, Learn CSS Online, Free CSS Tutorial for Beginners, Introduction to basics of Cascading Style Sheets (CSS3)

After learning CSS designing you can get job as Trainee Web Designer, also can start your freelance web designing business, there are tremendous demand for good web designer, you can also join Online CSS Course from experts.
 
Free CSS Tutorial

Learn how to apply CSS style on webpage, free CSS tutorial for beginners.
Digital Marketing Software
Learn CSS3 Online