What is a Cascading Style Sheet?
2021-11-15 15:21 · 5 min read
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.
What Are 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 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 applied to an HTML element with the help of CSS selectors. Here is a simple example of a 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 Pro Developer CSS3 Turorials.
</div></CSS3 SYNTAX>
Cascading style sheets consist of three types of style sheets, We will discuss style sheets in the next tutorial. Here you can see a basic CSS3 Syntax that we can use on the 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></Learn How to link an external CSS file with HTML web page>
It is 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 the 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 the HTML5 web page.
