CSS

Cascading Style Sheets
(CSS)
Prepared by
Divya K.S

Contents
• Introduction
• Internal style sheet
• External style sheet
• Controlling Text
• Text Formatting
• Selectors
• Box Model
• Backgrounds
• Tables
• Lists

Introduction to CSS
• What is meant by CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, on
paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple Web pages
all at once

What is a cascading style sheet?
Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.

The class Selector
• The class selector selects elements with a specific class
attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.

THREE WAYS TO INSERT CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style

Internal Style sheet
First we will explore the internal method. This way you are simply placing the
CSS code within the <head></head> tags of each (X)HTML file you want to style with
the CSS. The format for this is shown in the example below:
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file
contains the CSS code needed to style
the page. Meaning that any changes you
want to make to one page, will have to
be made to all. This method can be
good if you need to style only one page,
or if you want different pages to have
varying styles.

External Style sheet
Next we will explore the external method. An external CSS file
can be created with any text or HTML editor such as “Notepad” or
“Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You
simply save it with the .css file extension. You can link to the file
externally by placing one of the following links in the head section
of every (X)HTML file you want to style with the CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To
stylesheet.css” />
Or you can also use the @import method as shown below
<style type=”text/css”>@import url(Path To stylesheet.css)</style>

External Style sheet (contd..)
By using an external style sheet, all of your (X)HTML files link to
one CSS file in order to style the pages. This means, that if you need to
alter the design of all your pages, you only need to edit one .css file to
make global changes to your entire website.
• Here are a few reasons this is better.
• Easier Maintenance
• Reduced File Size
• Reduced Bandwidth
• Improved Flexibility

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p {color:red;text-align:center;}

CSS STYLINGBackground Color
The background-color property specifies the background color of an
element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
The background color can be specified by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"

Background image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
Body {background-image:url('paper.Gif');}
Below is an example of a bad combination of text and background
image.

Example
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or vertically,
or they will look strange:
Example
body
{
background-image:url('gradient2.png');
}

Background Image - Set position and no-repeat
Remark When using a background image, use an image that does not
disturb the text.
Showing the image only once is specified by the background-repeat
property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Background - Shorthand property
As you can see from the examples above, there are many
properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the
properties in one single property. This is called a shorthand
property.
The shorthand property for background is simply
"background":
Example
body {background:#ffffff url('img_tree.png') no-repeat right
top;}

Text Color
The color property is used to set the color of the text. The color can be specified
by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified. When
text-align is set to "justify", each line is stretched so that every line has
equal width, and the left and right margins are straight (like in
magazines and newspapers).
Example
h1 {text-align:center;}
h2 {text-align:right;}
h3 {text-align:justify;}

Text Decoration
The text-decoration property is used to set or remove
decorations from text. The text-decoration property is
mostly used to remove underlines from links for design
purposes:
Example a {text-decoration:none;}
It can also be used to decorate text:
Example : h1 {text-decoration:overline;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text. It can be used to turn everything into
uppercase or lowercase letters, or capitalize the first letter of each
word.
Example p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

CSS Font Families
In CSS, there are two types of font family names:
* generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
* font family - a specific font family (like "Times New Roman" or "Arial")
Font Family
The font family of a text is set with the font-family property. The font-family
property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font. Start with the font you want,
and end with a generic family, to let the browser pick a similar font in the generic
family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation
marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example : p{font-family:"Times New Roman", Times, serif;}

Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
* normal - The text is shown normally
* italic - The text is shown in italics
Example : p.normal {font-style:normal;}
p.italic {font-style:italic;}

Font Size
The font-size property sets the size of the text. Being able
to manage the text size is important in web design.
However, you should not use font size adjustments to
make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for
headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.

Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:
Example : h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Set Font Size With Em
To avoid the resizing problem with Internet Explorer, many developers use Em
instead of pixels.
The Em size unit is recommended by the W3C. 1 Em is equal to the current font
size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to Em using this formula: pixels/16=Em
Example : h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

CSS Selectors
• Three types of CSS Selectors
• Element
• Class
• ID

CSS Element Selector
• A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
• p {color:red;text-align:center;}
• To make the CSS more readable, you can put one
declaration on each line, like this:
• p { color:red; text-align:center; }

CSS Comments
• Comments are used to explain your code, and may help you
when you edit the source code at a later date. Comments are
ignored by browsers.
• A CSS comment begins with "/*", and ends with "*/", like this:
• /*This is a comment*/ p { text-align:center; /*This is another
comment*/ color:black;}

The id and class Selectors
• In addition to setting a style for a HTML element, CSS
allows you to specify your own selectors called "id" and
"class".
• id is used when we have to apply CSS property to one
attribute only.
• class is used when we have to use CSS property in many
locations within the same page or different.

CSS Syntax
#id {css declarations;}
EX. #firstname { backgroundcolor: yellow;}

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
a "#".
• Example
• Imagine within the body element of our html page, we have the following
paragraph element
• <p id=”welcome”>Welcome to the wonderful world of HTML</p>
• We can then create a CSS rule with the id selector:
• #welcome { text-align:center; color:red; }

The class Selector
• The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most
often used on several elements.
• This allows you to set a particular style for many HTML
elements with the same class.
• The class selector uses the HTML class attribute, and is
defined with a "."
• In the example below, all HTML elements with class="center"
will be center-aligned:

The class Selector (Example)
• Imagine within the body element of our html page, we have the following
header element
• <h2 class=”center”>Summary</h2>
• We can then create a CSS rule with the class selector:
.center {text-align:center;}
• You can also specify that only specific HTML elements should be
affected by a class.
• In the example below, all p elements with class="center" will be center-
aligned:
Example
p.center {text-align:center;}

Tables
Steps to create table in CSS
• Use the HTML <table> element to define a table.
• Use the HTML <tr> element to define a table row.
• Use the HTML <td> element to define a table data.
• Use the HTML <th> element to define a table heading.
• Use the HTML <caption> element to define a table caption.
• Use the CSS border property to define a border.

Table Properties
• The border-collapse specifies whether the browser should control the appearance
of the adjacent borders that touch each other or whether each cell should
maintain its style.
• The border-spacing specifies the width that should appear between table cells.
• The caption-side captions are presented in the <caption> element. By default,
these are rendered above the table in the document. You use the caption-
side property to control the placement of the table caption.
• The empty-cells specifies whether the border should be shown if a cell is empty.
• The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to
load the whole table before rendering it.

Example of table creation in CSS
• <TABLE>
• <CAPTION>This is a simple 3x3 table</CAPTION>
• <TR id="row1">
• <TH>Header 1 <TD>Cell 1 <TD>Cell 2
• <TR id="row2">
• <TR id="row3">
• </TABLE>

Example of “Lists” in CSS
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}

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
every HTML element. It consists of: margins, borders,
padding, and the actual content. The image below
illustrates the box model

• Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is
transparent
• The box model allows us to add a border around elements, and to
define space between elements.

• div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

CSS

More Related Content

What's hot (20)

Similar to CSS (20)

More from DivyaKS12 (16)

Recently uploaded (20)

CSS