Do you want to be a professional web designer?
Learn how to design attractive websites most efficiently and smartly by using Cascading Style Sheets. Give a professional look to your website.

History of CSS?

CSS was proposed by Håkon Wium Lie in 1994. The main purpose of developing this web technology was to design good looking websites. If you want to give an attractive & user-friendly look to your website then the Cascading Style Sheets will help you a lot.

CSS1 was released in 1996.
CSS2 specifications were developed by the W3C.
CSS2.1 was the bug fixed version of CSS2.
CSS3 is the level 3 CSS with many new CSS properties.

We will discuss CSS3 in the upcoming tutorials. You can learn CSS3 with us and our code editor will help you to run the basic code examples.

LEARN CSS3

Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</CSS3 Tutorial>

This tutorial will help you in understanding how you can create modern, attractive, responsive and user friendly User Interface (UI) designs

What Is Cascading Style Sheets?

CSS stands for Cascading Style Sheets.
Web designers use CSS for attractive, modern, user-friendly, and responsive web page designs.
HTML and CSS work together. HTML is used for page structure while CSS define how HTML elements are displayed.
We can apply different CSS properties to create unique designs.

In this tutorial we will discuss all about CSS version 3. If you have some knowledge of HTML elements then it's very easy to understand Cascading Style Sheets.

CSS3 contains many important properties, we use in web designing.

Simple Example

Here is a simple example of an Internal Style Sheet with some CSS properties that can be easily apply on an HTML element with the help of CSS selectors. Here is an simple example of CSS3 class selector.

				
				<!-- Internal Style-Sheet -->
				<style>
				.tdb-class{
					color:red;
					height:50px;
					width:10px;
					animation: tdb 2s infinite;
					transition:2s;
					padding:10px 10px 10px 10px;
					margin:10px 20px;
					background-image:url("image.jpg");
					background-size:cover;
					background-position:top left;
					background-color:red;
				}
					/*Here we are using a CSS class selector (tdb-class) to 
					apply these CSS properties on HTML Elements */
				</style>
				<div class="tdb-class">
					The Developer Brains CSS3 Turorials.
				</div>

There are many other CSS properties which we use normally in our websites.
We will discuss more these important CSS properties and their values in the upcoming tutorials.

TDB EDITORS

Now, You can use TDB Latest Code editor (Pro version) for Online coding on your PC with Live Server Feature and many other premium features. It is basically designed for beginner deginers to develop coding skills to check their codes online (based on HTML, CSS, and JavaScript web technologies). You can also type the code and check the result instantly.

</CSS3 SYNTAX>

Cascading style sheets consists three types of style sheets, We will discuss style sheets in next tutorial. Here you can see a basic CSS3 Syntax that we can use on web page

								
								<head>
								<!--Internal CSS-->
								<!--We can use multiple Internal and external style sheets-->
									<style>
										.class{property: value}
									</style>

								<!--External CSS-->
									<link rel="stylesheet" href="style-sheet.css">
								</head>
								<body>
								<!--Inline CSS-->
								<!--We can use inline style sheet on every HTML Element-->
									<p style="property: value"></p>
								</body>

</CSS3 Code Editor>

Now run your code online using TDB Editor. Click on Try it button and run your code online.

					
						<body>
						<!--Internal CSS-->
							<style>
								.tdb{
									padding:40px 0px;color:white;
									text-align:center;
									color:white;
									font-weight:300;
									background-color:gray;
									}
							</style>
							<h2 class="tdb">CSS3 Online Tutorials</h2>
						</body>

Try it Yourself

Result

When you run the code the output is same as the design given below.

CSS3 Online Tutorials

Click on the Try it button and run the code.

</Learn How to link an external CSS file with HTML web page>

It is a very easy to create your first HTML web page and link a stylesheet to this HTML web page.
Follow the instructions given below.

REQUIREMENTS

You need to install latest required software on your PC
i.e. Google Chrome Web Browser or Microsoft Edge browser with VS Code Text Editor

FOLLOW THESE STEPS

Open VS Code Editor

Create a new file

Copy CSS3 Syntax

Now Save it as style.css

Now add the line given below in your HTML5 file

				
				<head>
					<link rel="stylesheet" href="style.css">
				</head>

Now your CSS file is connected with HTML5 web page.

Next: What are the different Types of Cascading Style Sheets