History
- CSS was first proposed by Hakon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.
- CSS3 is the latest version of CSS.
Introduction
- CSS stands for Cascading Style Sheets.
- CSS uses editor application such as notepad to write its code and any web browser to run it.
- CSS is normally written with html codes but only CSS codes can also be written and is saved as .css extension.
Definition
- CSS is a web language that implements the various style of an HTML document.
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
Syntax
Structure
- A CSS is consists of two parts – a selector and a declaration block.
- The selector is HTML elements/tags where css/style is being applied in the web page.
- The declaration part may contain one or more declarations and each is separated by semicolons symbols.
- The declaration has two components – Property and Value i.e. each declaration includes a css property name and related value, separated by a colon.
- A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
Features
- CSS controls the layout of multiple web pages at a time.
- CSS is used to define styles for the web pages, such as the design, layout, animations and variations in display for different devices and screen sizes.
- CSS is used to controls the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
- Cascading Style Sheet(CSS) is used to set various desired styles in web pages.
- CSS works with html elements.
Advantage
- CSS makes web pages attractive and effective.
- CSS is easier to maintain and update.
- CSS provides greater consistency in web page design.
- It has unlimited formatting/designing options.
- It is lightweight code.
- It is faster to download.
- It provides ease of presenting different styles to different viewers.
- It shows greater accessibility.
- CSS saves a lot of work time of the developer.
Disadvantage
- CSS does not make any arithmetic calculation.
- It is mainly used in web page designing work.
- Its output varies browser by browser.
Types of CSS
- Precedence order of CSS = inline css > internal css > external css > browser default.
- There are 3 types of CSS –
(A) Inline CSS (B) Internal/Embedded/Document Level CSS (C) External CSS
(A) Inline CSS :-
-
- This css code is written with html tags/element individually with style tag.
- Suitable for single html tag/element.
- Examples are –
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Inline CSS</h1>
<h2 style="color:red">First type of CSS</h2> <p style="background-color:green">Codershelpline.com</p>
</body>
</html>(B) Internal/Embedded/Document Level CSS :-
-
- This css code is normally written inside head tags/element of html with style tag.
- Suitable for single html page.
- Examples are –
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: black;
font-size:20px;
}
h1,h2 {
color: Blue;
font-family:arial;
}
p,h2 {
background-color:Blue;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<h2>Second type of CSS</h2>
<p>Codershelpline.com</p>
</body>
</html>(C) External CSS :-
-
- This css code is written outside the html page in any text editor software with .css extension name.
- Suitable for multiple html page.
- External stylesheets are stored in CSS files.
- It is normally called/used with link tag of html in the head section of html page.
- Examples are –
body {
background-color:red;
}
p {
color:black;
font-size:20px;
}
h1,h2 {
color:Blue;
font-family:arial;
}
NB: The above code is written in any text editor and save as say chl.css.This code does not contains any html tags or elements.This file is normally saved in html file/page folder where it is used.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="chl.css">
</head>
<body>
<h1>External CSS</h1>
<h2>Third type of CSS</h2>
<p>Codershelpline.com</p>
</body>
</html>CSS Selector
- Css Selector is a pattern which can apply to different html elements/tags as per need of the program of an html page.
- By using the selector, we can select the html elements in several ways –
(a) Simple/Elemental Selector (b) Multiple/Group Selector (c) Id Selector (d) Class Selector
(a) Simple/Elemental Selector :
– Examples are
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: black;
font-size:20px;
}
h1{
color: Blue;
font-family:arial;
}
h2{
background-color:Blue;
}
</style>
</head>
<body>
<h1>Simple Selector</h1>
<h2>Elemental Selector</h2>
<p>Codershelpline.com</p>
</body>
</html>(b) Multiple/Group Selector :
– Applied for a more than one html tab/element at a time. The html element/tag may be same or different.
– Examples are
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,h3{
color: black;
font-size:20px;
}
p,h4{
color: Blue;
font-family:arial;
}
</style>
</head>
<body>
<h1>Multiple Selector</h1>
<h2>Second type of CSS Selector</h2>
<h3>Unique type of CSS Selector</h3>
<p>Codershelpline.com</p>
<h4>Group Selector</h4>
</body>
</html>(c) Id Selector :
– It uses the id attribute of an any HTML element to select a specific element.
– The id of an element should be specific or unique in a page so this id selector is used to select only one unique html element.We can’t put same id for more than one similar or dissimilar html element.
– Id attribute is defined with hash(#) character.
– Id selector is similar to class selector.The difference is that an Id selector can be used to identify one html element, whereas a class selector can be used to identify more than one html element.
– syntax : #IdSelectorName{
Property 1:Value 1;
Property 2:Value 2;
Property n:Value n;
}
– Examples are
<!DOCTYPE html>
<html>
<head>
<style>
#chl{
font-family:arial;
color: red;
}
</style>
</head>
<body>
<h3>Welcome U All to My Website</h3>
<p id="chl">codershelpline.com</p>
<p id="spl">Id Selector</p>
<p>An Unique Style Specification Method</p>
</body>
</html>(d) Class Selector :
- It uses the class attribute for any HTML element to style that.
- The class of an element may be specific/unique or similar in a html page to select one or more similar html element. Thus, we can put unique class name or same class for more than one similar or dissimilar html element as per program need.
- Class selector is used to apply same style specifications to the content of one or more than one kind of similar or dissimilar html elements.
- Class attribute is defined with dot(.) character.
- Syntax :
ClassSelectorName{
Property 1:Value 1;
Property 2:Value 2;
Property n:Value n;
}
- Examples are
<!DOCTYPE html>
<html>
<head>
<style>
.chl{
font-family:arial;
color: red;
}
.uc{
text-transform:uppercase;
font-weight:bold;
}
</style>
</head>
<body>
<h3 class="uc">Welcome U All to My Website</h3>
<p class="chl">codershelpline.com</p>
<p class="spl">Class Selector</p>
<p>A general Style Specification Method</p>
</body>
</html>
<! ---------------------------------------------------------------------- >
<!DOCTYPE html>
<html>
<head>
<style>
.chl{
font-family:arial;
color: red;
}
.uc{
text-transform:uppercase;
font-weight:bold;
}
</style>
</head>
<body>
<h3 class="uc">Welcome U All to My Website</h3>
<p class="chl">codershelpline.com</p>
<p class="chl">Class Selector</p>
<p>A general Style Specification Method</p>
</body>
</html>
<! ---------------------------------------------------------------------- >
<!DOCTYPE html>
<html>
<head>
<style>
p.chl{
font-family:arial;
color: red;
}
.uc{
text-transform:uppercase;
font-weight:bold;
}
</style>
</head>
<body>
<h3 class="uc">Welcome U All to My Website</h3>
<p class="chl">codershelpline.com</p>
<p class="chl">Class Selector</p>
<p>A general Style Specification Method</p>
</body>
</html>
<! --------------------------------------------------------------------- >
<!DOCTYPE html>
<html>
<head>
<style>
.use{
color:green;
background-color:purple;
}
</style>
</head>
<body>
<h1>Welcome All of You</h1>
<div class="use">
<h3>Codershelpline.com<h3>
<p>It is your own site</p>
<p>Example of class selector</p>
</div>
<p>A general type of style specifications</p>
</body>
</html> 
2 Comments
Suraj Sojas · April 9, 2020 at 10:22 AM
please upload advance css selector
and advance css topics
Sweta · April 9, 2020 at 3:54 PM
Ok