CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. It provides greater typography and layout controls and easier site maintenance through separation of design (CSS files) from content (HTML files). CSS selectors target specific elements to change properties like colors, backgrounds, fonts etc. Styles can be defined internally, in a separate external CSS file, or inline within elements. Classes allow targeting elements with the same styling. Common CSS properties control text, backgrounds, fonts and other visual aspects of HTML elements.
2. Introduction
CSS stands for Cascading Style Sheets and is a simple
styling language which allows attaching style to HTML
elements.
Style Sheets are templates, very similar to templates in
desktop publishing applications, containing a
collection of rules declared to various selectors
(elements).
Cascade is a method of defining the weight
(importance) of individual styling rules thus allowing
conflicting rules to be sorted out should such rules
apply to the same selector.
3. Contd..
Advantages:
Greater typography and page layout controls
Easier site maintenance
The style sheet information can be stored separate from your
HTML document, and shared among many HTML files.
Change one style sheet file, and the appearance of the entire
site is updated.
Disadvantages
Browser compatibility must be the most common difficulty.
4. CSS Selector
CSS selectors are the heart and soul of CSS.
They define which HTML elements you are going to be
manipulating with CSS code.
The selector name creates a direct relationship with the
HTML tag you want to edit.
If you wanted to change the way a paragraph tag behaved,
the CSS code would look like:
p { PROPERTY: VALUE }
The above example is a template that you can use whenever
you are manipulating the paragraph HTML element.
9. External CSS
External CSS is a file that contains only CSS code
and is saved with a ".css" file extension.
This CSS file is then referenced in your HTML using
the <link> instead of <style>.
11. HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background
color of this page is gray because we changed it with
CSS! </p>
</body>
</html>
12. Advantages of External CSS
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it
in a separate file. Instead of typing the same CSS
code on every web page you have, simply have many
pages refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages
with just a few changes in a single CSS file.
13. CSS Classes
<html>
<head>
<style>
p.first { background-color: gray; }
p.second { background-color: red; }
p.third { background: purple; color: white;}
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the p.first paragraph</p>
<p class="second">This is the p.second paragraph</p>
<p class="third">This is the p.third paragraph</p>
</body>
</html>
14. CSS Background
CSS background properties are used to define the
background effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-position
15. CSS Background Properties
Property Description
background
Sets all the background properties in one
declaration
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
16. body {background-color:”red”;}
body {background-image:url('paper.gif');}
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
(Repeat, no-repeat, repeat-x and repeat-y)
ol {background-position: top center; }
17. CSS Text
Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
18. Example
body {color:blue;}
h1 {text-align:center;} (right,left and justify)
a {text-decoration:none;} (overline, line-through,
underline and blink)
p {text-transform:uppercase;} (lowercase and
capitalize)
p {text-indent:50px;}
19. CSS Font
Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text