Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

CSS Tutorial

Uploaded by

abongoelon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Tutorial

Uploaded by

abongoelon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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.

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.

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.

Open Compiler

<!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 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 Padding

CSS Border CSS Position

CSS Display CSS Align

CSS Float CSS White Space

CSS Font CSS Width

CSS Line Height CSS Height

CSS Margin CSS Outline

CSS Opacity CSS Visibility

CSS Overflow CSS Counter


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.

CSS FlexBox CSS Animation

CSS Responsive Design CSS Gradient

CSS @Media Query CSS Transition

CSS 2D Transforms CSS Tooltips


CSS 3D Transforms CSS Arrow

CSS Pseudo Classes CSS Grid

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?

CSS stand for Cascading Style Sheet.

What is the purpose of CSS?

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.

Is there any alternative of CSS?

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?

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?

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).

You might also like