CSS

June 21, 2017 www.snipe.co.in 1
Prepared :snipe team

CSS

Overview
Brief History of CSS
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

CSS Id and Class
The id Selector:
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is
defined with”#".
The class Selector:
• The class selector is used to specify a style for a group of elements.
• The class selector uses the HTML class attribute, and is defined with
a "."

How to insert CSS in HTML
• External style sheet
• Internal style sheet
• Inline style

External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet :
<head>
<style type="text/css">
hr { color:sienna; }
p { margin-left:20px; }
body { background-image:url("images/back40.gif"); }
</style>
</head>

CSS Styling
• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

Styling Links
• Links can be style with any CSS property (e.g. color, font-family,
background-color).
• Special for links are that they can be styled differently depending on
what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouse over it
• a:active - a link the moment it is clicked
CSS Links

CSS Lists
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
List
In HTML, there are two types of lists:
• unordered lists - the list items are marked with bullets
• ordered lists - the list items are marked with numbers or letters

CSS Tables
Table Borders :
To specify table borders in CSS, use the border property.
Collapse Borders :
The border-collapse property sets whether the table borders are
collapsed into a single border .
Table Width and Height :
Width and height of a table is defined by the width and height
properties.
Table Text Alignment :
The text in a table is aligned with the text-align and vertical-align
properties.

CSS Box Model
• All HTML elements can be considered as boxes.
• In CSS, the term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the actual
content.
• The box model allows us to place a border around elements and space
elements in relation to other elements.

Margin
• Clears an area around the border.
• The margin does not have a background color, and it is completely
transparent.
Border - A border that lies around the padding and content. The border
is affected by the background color of the box.
Padding - Clears an area around the content. The padding is affected by
the background color of the box.
Content - The content of the box, where text and images appear.

CSS Grouping and Nesting Selectors
Grouping Selectors:
In style sheets there are often elements with the same style.
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}

Nesting Selectors:
It is possible to apply a style for a selector within a selector.
In the example below, one style is specified for all p elements, and a
separate style is specified for p elements nested within the "marked"
class:
Example:
p{
color:blue;
text-align:center;
}
.marked{
background-color:blue;
}
.marked{
color:white;
}

The display property specifies if/how an element is displayed, and the
visibility property specifies if an element should be visible or hidden.
• Hiding an Element - display:none or visibility:hidden
Ex:
h1.hidden {visibility:hidden;}
• CSS Display - Block and Inline Elements
Examples of block elements:
<h1>
<p>
<div>
Examples of inline elements:
<span>
<a>
CSS Display and Visibility

• Having easy-to-use navigation is important for any web site.
• With CSS you can transform boring HTML menus into good-looking
navigation bars.
Navigation Bar = List of Links
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
Example:
ul {
list-style-type : none;
margin:0;
padding:0;
}
CSS Navigation Bar

Thank You

CSS

More Related Content

What's hot (19)

Similar to CSS (20)

More from Mallikarjuna G D (20)

Recently uploaded (20)

CSS