CSS Tutorial - Tutorialspoint

Trang chủ » Html And Css Tutorial For Beginners » CSS Tutorial - Tutorialspoint

Có thể bạn quan tâm

CSS Tutorial CSS Tutorial toggle
  • What is CSS?
  • Who should learn CSS?
  • Types of CSS
  • CSS Example
  • Reason to use CSS
  • Prerequisites to Learn CSS
  • Getting Started with CSS
  • FAQ's on CSS
Job Search PDF Version Quick Guide Resources Discussion

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 among 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 recommended 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 importing it into your HTML document using HTML <link> tag.

CSS 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

Below listed topics are most important 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 recommend you to do practice with CSS by modifying the provided code in this tutorial.

CSS Basics

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

  • CSS Introduction
  • CSS Syntax
  • CSS Selectors
  • CSS Inclusion
  • CSS Comments

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.

  • CSS Background
  • CSS Border
  • CSS Display
  • CSS Float
  • CSS Font
  • CSS Line Height
  • CSS Margin
  • CSS Opacity
  • CSS Overflow
  • CSS Padding
  • CSS Position
  • CSS Align
  • CSS White Space
  • CSS Width
  • CSS Height
  • CSS Outline
  • CSS Visibility
  • CSS Counter

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

CSS Advanced

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.

  • CSS Animation
  • CSS Gradient
  • CSS Transition
  • CSS Tooltips
  • CSS Arrow
  • CSS Grid
  • CSS FlexBox
  • CSS Responsive Design
  • CSS @Media Query
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Pseudo Classes

Frequently Asked Questions about CSS

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

What is the Full form of CSS?chevron

CSS stand for Cascading Style Sheet.

What is the purpose of CSS?chevron

CSS are used to style or decorate the web pages, it will help you to create a beautiful 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.

Is there any alternative of CSS?chevron

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.

What is the current version of CSS?chevron

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

Is there any disadvantage of CSS?chevron

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

Từ khóa » Html And Css Tutorial For Beginners