FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 754

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

  1. Open VS Code Editor
  2. Create a new file
  3. Copy CSS3 Syntax
  4. Now Save it as style.css
  5. 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.

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer