Scribd
Upload
12 views

CSS

The document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its syntax, selectors, and various applications on HTML elements such as body, text, links, tables, lists, forms, images, and DIVs. It explains different methods of implementing CSS (inline, internal, and external) and includes examples of properties and values for styling. Additionally, it presents a template code demonstrating the practical use of CSS in web design.

Uploaded by

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

CSS

The document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its syntax, selectors, and various applications on HTML elements such as body, text, links, tables, lists, forms, images, and DIVs. It explains different methods of implementing CSS (inline, internal, and external) and includes examples of properties and values for styling. Additionally, it presents a template code demonstrating the practical use of CSS in web design.

Uploaded by

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

CSS (Cascaded Style Sheets)

1. CSS Syntax and usage.


2. CSS Selectors.
3. CSS on body.
4. CSS on Text.
5. CSS on Links.
6. CSS on Tables.
7. CSS on Lists
8. CSS on Forms
9. CSS on Images.
10. CSS on DIV
11. A Template
1. CSS Syntax and usage:
CSS stands for Cascaded Style Sheets. Different styles can be applied to a
common element thereby enabling many styles on the same object.

Syntax

Selector
{
Property: value;
Property: value;
Property: value;
Property: value;
}

Usage: CSS can be used in three of the following ways-


 Inline
 Internal
 External

Inline CSS: Inline CSS is used within the tag having style as attribute.
Syntax:
<p style=”color:red; background-color:green; text-align:justify;”> . . .
</p>

Internal CSS: Internal CSS is used within the <head> . . . </head> part having
style as internal tag.
Syntax:
<head>
<style>
p
{
color:red;
background-color:green;
text-align:justify;
}
</style>
</head>

<body>
<p> . . . </p>
</body>

External CSS: External CSS is written in a separate file having ‘.css’ extension.
All styles should be written one after another and the same file should be
linked with the ‘.html’ file in <head> . . . </head> part.
Syntax A: The file – mystyle.css
p
{
color:red;
background-color:green;
text-align:justify;
}

Syntax B: The link to the CSS file


<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

NOTE: Colors in CSS can be defined in the following ways-


 Color name Ex.- Red
 Hex Color Code Ex.- #2f1cda
 RGB Value Ex.- rgb(50,65,170)
2. CSS Selectors
A CSS Selector will not always be a TAG; it can be a CLASS or an ID as well. CSS
on TAGs are very common and quite easy to write.

CSS Class: A CSS class is a kind of identifier for a group of similar tags or
elements.

For ex. - Many <p> elements can be given a common class parastyle1 thereby
enabling all those paragraphs to be stylized using the CSS of class parastyle1.

Syntax:

<head>
<style>
.parastyle1
{
color:red;
background-color:green;
text-align:justify;
}
</style>
</head>

<body>
<p class=”parastyle1”> . . . </p>
<p> . . . </p>
<p class=”parastyle1”> . . . </p>
</body>

CSS ID: A CSS ID is a kind of identifier for a particular tag or element.

For ex. – A certain <p> element can be given a particular ID parastyle1 thereby
enabling that only paragraph to be stylized using the CSS of ID parastyle1.

Syntax:

<head>
<style>
#parastyle1
{
color:red;
background-color:green;
text-align:left;
}
#parastyle2
{
color:green;
background-color:red;
text-align:right;
}
</style>
</head>

<body>
<p id=”parastyle1”> . . . </p>
<p> . . . </p>
<p id=”parastyle2”> . . . </p>
</body>

NOTE: While writing a style, classes are written with a dot (.) whereas IDs are
written with a hash (#).
3. CSS on Body
CSS designs the <body> element in the following ways-

Property Value Description


Red; / #ff0000; /
background-color Colors the background
rgb(255,0,0);

background-image url("paper.gif"); Puts a background image

Repeats the image


repeat-x;
horizontally

Repeats the image


repeat-y;
Vertically
background-repeat
Repeats the image
repeat-xy;
entirely

Does not repeat the


no-repeat;
image

Background does not


fixed;
background- scroll
attachment
scroll; Background scrolls

background- Position of the


top; / left; / bottom; / right;
position background image
4. CSS on Text
CSS works great on text elements. That may be a heading, a paragraph or a
text link. CSS works same for all these elements.

Property Value Description


color blue; Colors the text
"Times New Roman", Times, Set of fonts to be used by
font-family
serif; the browser
font-style normal; / italic; To stylize the text
font-size 40px; To set a size of the text
Responsive size of the
font-size 10vw;
text
font-weight normal; / bold; To make text bolder
center; / left; / right; /
text-align To align the text
justify;
capitalize; / lowercase; /
text-transform To work on case of text
uppercase;
text-indent 50px; To set the indent
To set space between
letter-spacing 3px;
letters
To set space between
line-height 0.8;
lines
To set space between
word-spacing 10px;
words
To set shadow behind
text-shadow 3px 2px red;
text
Red; / #ff0000; /
background-color Colors the background
rgb(255,0,0);
background-image url("paper.gif"); Puts a background image
5. CSS on Links
Being a text element, a link follows all the CSS on Text, but some styles are
provided especially to the links in order to make them dynamic.

Before we start with CSS on Links, we must understand the four states of a link.
These are:

 a:link (a simple link)


 a:visited (a visited link)
 a:hover (a link when mouse is hovered on)
 a:active (a link when being clicked)

For every state, we can develop a style. The most important thing is to keep
the order of these states always, as they are.

Property Value Description


none; / underline; / overline;
text-decoration Decorates the text
/ line-through;
6. CSS on Tables
Tables are a complex thing to create in a webpage. 4 different tags are
involved in making a table. CSS works great for styling a table.

Property Value Used On Description


border 1px solid black; Table, tr, th, td Border of table
border-
Separate; / collapse; Table, tr, th, td Collapsed borders
collapse
border-bottom
border-top Border of particular
1px solid #ddd; Table, tr, th, td
border-left element
border-right

width 100%; / 500px; table Width of table


Height of table
height 50px; tr, th, td
elements
Horizontal
text-align left; / right; / center; Table, tr, th, td Alignment of text in
table
bottom; / top; / Vertical Alignment
vertical-align tr, th, td
middle; of text in table

15px; / 15px 15px; / Space between


padding 15px 15px 15px; / th, td boundary and
15px 12px 15px 12px element

background- Background color of


#4CAF50; Table, tr, th, td
color table elements
background-
url("paper.gif"); background-image
image

Text color of table


color white; Table, tr, th, td
elements
States of tables in CSS:

 Hover on element: Elements are highlighted when mouse is hovered on.

tr:hover {background-color: #f5f5f5;}

 Responsive table: Table becomes responsive to the width of window.

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

 Stripped Table: Table rows get a zebra patch.

tr:nth-child(even) {background-color: #f2f2f2;}


tr:nth-child(odd) {background-color: #f3f3f3;}
7. CSS on Lists
Lists are another important element on a web page. CSS works for styling both
tags i.e. the <UL> and the <OL>.

Property Value Used On Description


None; / circle; / disc;
ul List styles in UL
/ square;
Decimal; / decimal-
leading-zero; /
list-style-type
lower-alpha; / upper-
ol List styles in OL
alpha; / lower-
roman; / upper-
roman;
list-style-image url('sqpurple.gif'); ul Image as list style
list-style-position outside; / inside; ul , ol Position of list
background- Background color of
#4CAF50; ul , ol
color list elements
background-
url("paper.gif"); ul , ol background-image
image
8. CSS on Forms
Forms are stylized to a great extent using CSS. Consider the following
properties:

Property Value Used On Description


input, textarea,
width 100%; Width of element
select
Input, textarea,
height 50px; height of element
select

15px; / 15px 15px; / Space between


Input, textarea,
padding 15px 15px 15px; / boundary and
select
15px 12px 15px 12px element

15px; / 15px 15px; /


Input, textarea, space around
margin 15px 15px 15px; /
select elements
15px 12px 15px 12px

Input, textarea,
box-sizing border-box; element sizing
select
Input, textarea,
border 1px solid #ddd; Border of element
select

border-bottom
border-top Input, textarea, Particular border of
1px solid #ddd;
border-left select element
border-right

Input, textarea, Border with


border-radius 4px;
select rounded corners
Input, textarea, Text color of
color white;
select elements
background- Input, textarea, Background color of
#4CAF50;
color select elements
background- Input, textarea,
url("paper.gif"); background-image
image select
States of forms in CSS:
 Hover on element: Elements are highlighted when mouse is hovered on.

input:hover {background-color: #f5f5f5;}

 Focus on Element: Elements are highlighted when mouse is clicked on.

input:focus {background-color: #f5f5f5;}


9. CSS on Images
There are many things to do on images in CSS. Following are the properties
that are used popularly for styling images in CSS.

Property Value Description


border 1px solid #ddd; border of Images
border-bottom
border-top
1px solid #ddd; Specific Border
border-left
border-right
15px; / 15px 15px; / 15px
Space between image
padding 15px 15px; / 15px 12px 15px
boundary and image
12px
width 120px; width of Images
height 80px; height of Images
0 0 2px 1px rgba(0, 140, 186,
box-shadow Shadow of image
0.5);
opacity 0.5; Transparency of image

To Centrally Align an Image:

Display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

To make an Image responsive:

max-width: 100%;
height: auto;

To make a hover effect:


img : hover { . . . }
10. CSS on DIV
DIV is a tag in HTML to create customized containers on a web page. It stands
for Division. CSS can extensively stylize a DIV.

Property Value Description


width 120px; Width of DIV
height 80px; height of DIV
border 1px solid #ddd; border of DIV
border-bottom
border-top
1px solid #ddd; Specific Border
border-left
border-right
15px; / 15px 15px; / 15px Space between DIV
padding 15px 15px; / 15px 12px 15px boundary and DIV
12px content
15px; / 15px 15px; / 15px
Space between page
margin 15px 15px; / 15px 12px 15px
boundary and DIV
12px
background-color #4CAF50; Background color of DIV
background-image url("paper.gif"); background-image of DIV
Floating DIV along with
float Left / right
another
Inline / block / inline-block /
display Type of display of DIV
none
overflow Visible / hidden / scroll / auto Display of content of DIV
11. A Template

Code:

<html>
<head>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
background-image:url('img/head2.jpg');
repeat:xy;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
opacity:0.5;
color: black;
}
/* Style the left sidebar */
.column1 {
background-color:gray;
width:20%;
height:700px;
display:inline-block;
}
/* Style the Main Section */
.column2 {
background-color:lavender;
background-image:url('img/back2.jpg');
repeat:xy;
float:right;
width:80%;
height:700px;
display:inline-block;
}
/* Style the Sidebar Links */
.column1 a{
display: block;
color: #f2f2f2;
text-align: center;
padding: 0;
text-decoration: none;
}
</style>
</head>

<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="column1">
<h2 style="background-color:black; display:block;color:white;">Column1</h2>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
</div>
<div class="column2">
<h2 style="background-color:#ddd; display:block;color:black;">Column2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium
urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque
vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget l</p>
</div>
</body>
</html>

You might also like