CSS Tutorial
CSS stands for Cascading Style Sheet. It is used to give a stylistic, beautiful and attractive look and formatting to a webpage.
It is used with HTML elements to give the webpage an attractive look and feel and can also be used with XML documents including
plain XML, SVG, and XUL.
Although HTML can give some style to elements by itself like color, size, etc.
but in a very limited scope. CSS extends HTML capabilities and provides huge amount of properties which can style an element.
Why to Learn CSS?
As discussed in the previous page, the CSS Style Sheet is used with HTML elements to give the webpage an attractive look and feel. Although HTML can give some style to elements by itself like color, size, etc. but with limited scope. CSS extends HTML capabilities and provides huge amount of properties to enhance the beauty of a website.
CSS is compulsory for aspiring web designers and developers. Yes, you can use the frameworks built on CSS like Pure and Bootstrap but you will still need CSS knowledge to use them efficiently. There are some things which can only be done through the original CSS and not by the help of frameworks. So, we will provide you tutorials, by the help of which, you will learn to code CSS.
Here are some of the key advantages of learning CSS:
- Create Beautiful Websites : Behind every stunning website, there is a CSS Style Sheet. It handles the look and feel of a website. The beautiful designs and the attractive features of CSS make it worthy of your time. It is a must-have skill of a web designer.
- Solve Big Problems : Before CSS, all attributes like color, element alignments, border, and size had to be repeated on every web page to style any element. It was a very long process. For example: If you are developing a large website where fonts and color information has to be added on every single page, it will become a long and expensive process. CSS was created to solve this problem. It was a W3C recommendation.
- Presentation capabilities : CSS provides powerful control over the presentation of an HTML document. It is related to the previous point as CSS gets combined with markup languages like HTML and XHTML to enhance their capabilities and to provide better control to the user of the website.
- Increase your skills : HTML and CSS are the most basic languages which a web designer should learn as it opens the door to various other technologies like JavaScript, Angular, PHP, etc. These technologies become easier to understand, once a person gets exposed to CSS and HTML.
- Better styling capabilities : It has a much wider variety of attributes as compared to HTML which has a limited set of attributes with limited capabilities.
Applications of CSS
- CSS saves time : It saves a lot of time as only one Style Sheet can be used on multiple pages, there is no need to write same code in all the pages. A single file can be used in all those pages where same styling of webpages is required. This also decreases the page loading time as file transfer size gets reduced because of
reusing of code. - Multiple Device Compatibility : CSS can optimize the same webpage to adapt different viewports(screens). It makes a webpage
compatibleandreadablein all the devices like laptops, tablets, mobiles, etc. which have different screen sizes. - Improves HTML Functionality : CSS has a large number of attributes as compared to Html which only provides a limited number of styling attributes.
- Pages load faster : When we use the same Style Sheet in multiple webpages then, loading of the pages gets faster because of reusing of the code.
- Responsive layout : It can optimize a webpage to fit varies screen sizes very easily. Different devices have different screen sizes and CSS features allows the programmer to make their website responsive to these devices. The responsive nature of CSS makes a webpage compatible and readable in different screen sizes with ease.
- Global web standards : The web standards are now depreciating the use of HTML attributes and it is being recommended to use CSS.
Let's see the first example of an HTML coding :
<html lang="en">
<head>
<title> CSS Basic Example </title>
<meta charset="UTF-8">
<style>
h1{
color: white;
background-color: green;
padding: 5px;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1> Hello World.. </h1>
<p> Welcome to CSS </p>
</body>
</html>
Output
Hello World..
Welcome to CSS
Explanation-
In the example above the <style> tag is used to add CSS code within the webpage. The selectors for a particular tag are used to stylize it. For example, h1 { } and p { } selectors are used in the example. Let’s see the attribute used inside them-
- Color : Used to specify the text color of the heading and the paragraph.
- Background-color : Used to define the background color of the heading.
- Padding : Specified the padding.
You can try our Online editor and can do changes accordingly.
In the next CSS tutorial we will learn about CSS Syntax. Click on Next.
