COMMUNITY: How to properly ask a question on Forums
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
LIVE
CAREER
MEMBERS
JOBS
Training
Deep Dive With CSS - Introduction
Ajay Malik
Aug 29, 2016
6k
0
6
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
In this article, you will learn how to work with CSS.
What is CSS?
CSS stands for Cascading Style Sheets.
CSS is used to define a display property of our HTML tag or element.
CSS is powerful language that makes our website more beautiful and attractive along with making it more user friendly.
Why we use CSS?
There are the following advantages of CSS.
CSS saves time.
We write a CSS code only once and use it again and again in our HTML projects.
Pages load faster.
If we use CSS, it speeds up the web page loading time because we don't have to write HTML attributes for every HTML tag.
Easy maintenance.
If we want to change the design of our web page, it can be done by only making certain changes in CSS file.
Platform Independence.
CSS is platform independent.
How to use CSS in our project?
There are three ways to use CSS in our project.
Inline Style
Inline style is used for changing the property of particular elements or HTML tags.
Example
<!DOCTYPE html
>
<
html
>
<
body
>
<
h1
style
=
"color:blue;margin-left:20px;"
>
c# corner.
</
h1
>
<
p
>
c-sharpcorner.com
</
p
>
</
body
>
</
html
>
Output
Internal style sheet
Internal style sheet is used for applying the style on single page only or it may be used whenever we require to change the style of a particular HTML page.
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
body {
background-color: lightblue;
}
h1 {
color: blue;
margin-left: 50px;
}
</
style
>
</
head
>
<
body
>
<
h1
>
c# corner
</
h1
>
<
p
>
c-sharpcorner.com
</
p
>
</
body
>
</
html
>
Output
External style sheet
External style sheet is used for making the changes in the layout of the whole website, using a single or multiple style sheets.
HTML code
<!DOCTYPE html
>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"mystyle.css"
>
</
head
>
<
body
>
<
h1
>
C# corner
</
h1
>
<
p
>
c-sharpcorner.com
</
p
>
</
body
>
</
html
>
CSS code (mystyle.css)
body {
background - color: lightblue;
}
h1 {
color: navy;
margin - left: 20 px;
}
Cascading Order
There are certain rules for cascading order.
Inline style (inside an HTML element) goes first.
External and internal style sheets (in the head section) are applied afterwards.
Browser default is taken if no style is defined.
Inline CSS has the highest priority than external or internal styling.
Applying the style of internal or external CSS depends on which style is written at last.
Example
HTML code
<!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
order CSS
</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"mystyle.css"
>
<
style
type
=
"text/css"
>
h1 {
color: red;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:pink;"
>
C# corner
</
h1
>
<
h1
>
C# corner
</
h1
>
<
h1
>
C# corner
</
h1
>
</
body
>
</
html
>
CSS code
h1{
color: blue;
}
Output
CSS Syntax and Selectors
In CSS, selecting the particular element follows the following rules.
Selecting the element
Declaration of property
CSS Selectors
CSS selector is used for selecting the HTML element to change their style.
The element Selector
In CSS, we use the name of element for selecting the particular element.
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
p {
color: blue;
}
</
style
>
</
head
>
<
body
>
<
p
>
c# corner
</
p
>
</
body
>
</
html
>
Output
The id Selector
For selecting the element using the id attribute, the id should be unique for that particular element.
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
#para {
background-color: yellow;
color: red;
}
</
style
>
</
head
>
<
body
>
<
h1
id
=
"para"
>
c# corner
</
h1
>
<
p
>
c-sharpcorner.co
</
p
>
</
body
>
</
html
>
Output
'
The class selector
In CSS, by selecting the element using the class attribute, we can select multiple elements for styling.
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
.center {
text-align: center;
color: red;
}
</
style
>
</
head
>
<
body
>
<
h1
class
=
"center"
>
c# corner
</
h1
>
<
p
class
=
"center"
>
c-sharpcorner
</
p
>
</
body
>
</
html
>
Output
Grouping selector
In CSS, we can select the multiple elements using the name of elements
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
h1,
h2,
p {
text-align: center;
color: red;
}
</
style
>
</
head
>
<
body
>
<
h1
>
c# corner
</
h1
>
<
p
>
c-sharpcorner
</
p
>
</
body
>
</
html
>
Output
CSS Comments
In any language, comments are used to explain the code or functionality of the code.
Example
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
>
h1 {
color: red;
/* This is a single-line comment */
}
/* This is
a multi-line
comment */
</
style
>
</
head
>
<
body
>
<
h1
>
C# corner
</
h1
>
</
body
>
</
html
>
Output
CSS
HTML
STYLE
Web design
Similar Articles