Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
CSS handles the look and feel part of a web page. Using CSS, you can
control 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.
CSS is easy to learn and understand but it provides powerful control over
the presentation of an HTML document. Most commonly, CSS is
combined with the markup languages HTML or XHTML.
Advantages of CSS
CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.
Pages load faster − If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style,
and all elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such
as PDAs and cell phones or for printing.
Global web standards − Now HTML attributes are being deprecated and it
is being recommended to use CSS. So it’s a good idea to start using CSS in
all the HTML pages to make them compatible to future browsers.
CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and
then applied to the corresponding elements in your document. A style
rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could
be color, border etc.
Value − Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }
Example − You can define a table border as follows −
table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px
solid #C00 is the value of that property.
You can define selectors in various simple ways based on your comfort.
Let me put these selectors one by one.
Selectors in CSS
1. The element Selectors
The element selector selects HTML elements based on the element name.
Example:
Here, all <p> elements on the page will be center-aligned, with a red
text color:
<html>
<head>
<style>
p{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p> This style affected in all paragraph </p>
<p> And me! </p>
</body>
</html>
2. The ID Selectors
The id selector selects a unique element with a specific id attribute, denoted
by a hash ( # ) followed by the ID name. All the elements having that id will
be formatted according to the defined rule. The style rule will be
applied to the HTML element with id=”id name”. Example: id=”para-
one”. An id name cannot start with a number.
Example:
<html>
<head>
<style>
#p1{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="p1"> This style affected in this paragraph </p>
<p> And me! </p>
</body>
</html>
3. The Class Selectors
selects an element with a specific class attribute. The class selector is
defined using a period(.) followed by the class name. In the example
below, all HTML elements with class=”center” will be red and center-aligned.
Example:
<html>
<head>
<style>
[Link]{
text-align:center;
color:red;
}
[Link]{
font-size:300%
}
</style>
</head>
<body>
<p class="center"> I am red and center aligned </p>
<p class="large"> Iam large! </p>
<p class=" center large">I am red ,center aligned and in a large
size</p>
</body>
</html>
4. The Universal Selectors
Rather than selecting elements of a specific type, the universal
selector quite simply matches the name of any element type −
Example:
*{
text-align:center;
color:red;
}
This rule renders the content of every element in our document in
black.
5. The Descendant Selectors
Suppose you want to apply a style rule to a particular element only
when it lies inside a particular element. As given in the following
example, style rule color:red will apply to text when it lies as a
heading <h1> which is centralized by <center> tag.
Example:
<html>
<head>
<style>
h1 center{
color:red;
}
</style>
</head>
<body>
<h1 ><center>I am in red<center></h1>
<h1 >This headding will not be affected the style</h1>
</body>
</html>
6. The Attribute Selectors
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all the input elements having a type
attribute with a value of text –
<html>
<head>
<style>
input[type="text"]
color:red;
</style>
</head>
<body>
<form>
first name: <input type="text" name="firstname"><br><br>
Last name: <input type="text" name="firstname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
7. Grouping Selectors
You can apply a style to many selectors if you like. Just separate the
selectors with a comma, as given in the following example −
<html>
<head>
<style>
h1,h2,p{
text-align:center;
color:red;
</style>
</head>
<body>
<h1> heading1</h1>
<h2> heading2</h2>
<p>I am a paragraph</p>
</body>
</html>
Types of CSS
1. Internal or Embedded CSS - The <style>
Element
You can put your CSS rules into an HTML document using the <style>
element. This tag is placed inside the <head>...</head> tags. Rules
defined using this syntax will be applied to all the elements available in
the document. Here is the generic syntax −
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Attributes
Attributes associated with <style> elements are −
Attribute Value Description
type text/css Specifies the style sheet language as a content-type
(MIME type). This is required attribute.
media
screen
tty
tv
projection
Specifies the device the document will be displayed on.
handheld Default value is all. This is an optional attribute.
print
braille
aural
all
2. Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules.
These rules will be applied to that element only. Here is the generic
syntax −
<element style = "...style rules....">
Attributes
Attribute Value Description
style style rules The value of style attribute is a combination of style
declarations separated by semicolon (;).
Example
Following is the example of inline CSS based on the above syntax −
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
It will produce the following result −
3. External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in
your HTML document.
An external style sheet is a separate text file with .css extension. You
define all the Style rules within this text file and then you can include this
file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Attributes
Attributes associated with <style> elements are −
Attribute Value Description
type Specifies the style sheet language as a content-type
text css
(MIME type). This attribute is required.
href Specifies the style sheet file having Style rules. This
URL
attribute is a required.
media screen
tty
tv
projection
Specifies the device the document will be displayed
handheld on. Default value is all. This is optional attribute.
print
braille
aural
all
Example
Consider a simple style sheet file with a name [Link] having the
following rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
Now you can include this file [Link] in any HTML document as
follows −
<head>
<link type = "text/css" href = "[Link]" media = " all" />
</head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in a an HTML
document. Here is the rule to override any Style Sheet Rule.
Any inline style sheet takes highest priority. So, it will override any rule
defined in <style>...</style> tags or rules defined in any external style
sheet file.
Any rule defined in <style>...</style> tags will override rules defined in any
external style sheet file.
Any rule defined in external style sheet file takes lowest priority, and rules
defined in this file will be applied only when above two rules are not
applicable.
CSS Comments
Many times, you may need to put additional comments in your style
sheet blocks. So, it is very easy to comment any part in style sheet. You
can simple put your comments inside /*.....this is a comment in style
sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do
in C and C++ programming languages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
/* This is a multi-line comment */
</style>
</head><body>
<p>Hello World!</p>
</body>
</html>
DIV Tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS
or manipulated with JavaScript.
Example
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv" >
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
NAVBAR Design
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
sense:
Example:
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover:not(.active) {
background-color: #111;
.active {
background-color: #04AA6D;
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Terms & Condition</a></li>
<li><a href="#contact">Contact</a></li>
<li ><a href="#about">About</a></li>
</ul>
</body>
</html>
HTML Responsive Web Design
Responsive Web Design is about using HTML and CSS to automatically resize, hide,
shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and
phones)
To create a responsive website, add the following <meta> tag to all your web pages
Example :-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when
resizing the browser window. Resize the browser window to see the effect.</p>
<img src="[Link]" style="width:100%;">
</body></html>