CSS Tutorial

CSS Tutorial

CSS is the language used to design the web pages or specifying the presentation of a document written in a markup language like HTML. CSS helps web developers to control the layout and other visual aspects of the web pages.

What is CSS?

CSS stands for Cascading Style Sheets, it is a simple design language intended to simplify the process of making web pages presentable using CSS properties. CSS specify how an HTML element should be displayed on the web page. If you think of the human body as a web page then CSS is styling part of the body. Like color of the eyes, size of the nose, skin tone, etc.

Who should learn CSS?

This CSS tutorial is designed for aspiring Web Designers and Developers from basics to advance. CSS knowledge is must whoever wants to be a web developer, there are a lot of CSS frameworks like Bootstrap, Tailwind CSS, etc. But having CSS knowledge is must as a web developer.

Types of CSS

There is no types in CSS, it actually refer - "In how many ways we can use CSS?" So there are three ways to use CSS on HTML document.

  • Inline CSS: Inline CSS are directly applied on the HTML elements and it is the most prioritize CSS amonth these three. This will override any external or internal CSS.
  • Internal CSS: Internal CSS are defined in the HTML head section inside of <style> tag to let the browser know where to look for the CSS.
  • External CSS: External CSS are defined in a separate file that contains only CSS properties, this is the recomended way to use CSS when you are working on projects. It is easy to maintain and multiple CSS files can be created and you can use them by improting it into your HTML document using HTML <link> tag.

CSS Code Example

Here in this example we will show you above mentioned ways to use CSS on an HTML document.

<!DOCTYPE html>
<html>

<head>
   <title>CSS Tutorial</title>
   <!-- Internal CSS -->
   <style>
       span{
           color: green;
       }
   </style>
   <!-- External CSS -->
   <link rel="stylesheet" href="/css/style.css">

</head>

<body>
   <h1><span>Tutorials</span>point</h1>
   
   <!-- Inline CSS -->
   <p style="font-weight: bold; 
             margin-top: -15px; 
             padding-left: 5px">
       Simple & Easy <span>Learning</span>
   </p>
</body>

</html>

External CSS File: We are importing this file into the above code through <link> tag. And the file name is style.css. Above code will follow the style of this file on the portal you have to create files locally and try it on your system.

body {
     margin-left: 40%;
     margin-top: 40%;
}

Reason to use CSS

  • Responsive Design: CSS offers features like media queries that enable developers to create responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user experience.
  • Flexibility and Control: CSS provides precise control over the presentation of HTML elements, allowing developers to customize layout, typography, colors, and other visual properties.
  • Consistency and Reusability: Developers can ensure consistency across the entire website, by defining styles in a central CSS file. Styles can be reused across multiple pages, reducing redundancy and making updates easier.
  • Search Engine Optimization (SEO): CSS can be used to structure content in a way that improves search engine visibility.
  • Ease of Maintenance: Centralized CSS files make it easier to maintain and update styles across a website. Changes can be applied globally, ensuring uniformity and reducing the risk of inconsistencies.
  • Faster Page Loading: External CSS files can be cached by browsers, resulting in faster page loading times for subsequent visits to a website. This caching mechanism reduces server load and bandwidth consumption.

Prerequisites to Learn CSS

Before start learning CSS, it is essential to have a basic understanding of HTML or any markup language and familiar with computer, and basic working knowledge with files or directory.

If you are new to HTML and XHTML, then we would suggest you to go through our HTML or XHTML Tutorial first.

Getting Started with CSS Tutorial

Below listed topics are most improtant to learn in CSS from basics to advance, after completing these topics you will able to style your HTML document as you want. We highly recomend you to do practice with CSS by modifying the provided code in this tutorial.

CSS Basics

Understanding the basics is improtant whenever you are learning something new. So before diving deep into CSS please know fundamentals of CSS.

CSS Properties

CSS properties and selectors are the main thing in CSS, without the properties there is no ways to define the styling of any HTML element. So better to know most frequently used properties in one go will help you to work with CSS.

You can get complete list of CSS Properties on the attached link.

CSS Advance

After completing the above two section you can proceed with the advance part of this tutorial, these topics will helps you to make an actual website layout.


 

Frequently Asked Questions about CSS

There are some very Frequently Asked Questions(FAQ) about CSS, this section tries to answer them briefly.

CSS stand for Cascading Style Sheet.

CSS are used to style or decorate the web pages, it will help you to create a beutiful website. CSS specify how an HTML element should be displayed on the web page. If you think of the human body as a web page then CSS is styling part of the body.

Yes, there are CSS frameworks which can be used as an alternative of CSS. But you can not replace the main CSS without having knowledge of basic CSS.

The current version of CSS is 3.0 but CSS 4.0 is an ongoing effort to extend CSS3 with new features and enhancements.

Yes, CSS can't provide maximum security, or you can say the purpose is not to provide that kind of security for your website. Lots of browsers required different properties for the same functionality(cross-browser issue).

Print Page
Previous
Next
Advertisements