CSS Notes

Madale-3
CSS
CASCADING STYLE SHEETS

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
"External stylesheets are stored in CSS files
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
nightmare for web developers. Development of large websites, where fontsspecification, it started a
and color information
were added to every single page, became a long and
expensive process.
The style definitions are normally saved in
external .css files
comment
languages.
*/.sheet.....
to
easy programming
verystyle
in
is
itManycomment
So, C++
blocks.
a and
is
sheet
his C
/.....in
style doyou
inside
your way
Comments
similar
comment
in
comments
inmulti-line
blocks
your
additional comment"/
tn
put comment"/
simple
put single-line
can muiti-line
to
need
You center;
text-align: World!</p>
<p>Hello
maysheet. to <!DOCTYPE
you html> red;a
color:
is isa
This
CSS
Comments
style
... This </style>
<style> </head>
times,
<head>p{
<html> / /* <body> </body>
</htm>
in use
part can
any You
TheCSCSS F
Exeoar
CSS Syntax
ACSS rule-set consists of a selector and a
declaration block:
Selector Declaration
Declaration
h1
color:blue; font-size:12px;}
Property Value Property Value
The selector points to the HTML element you want to style.

by semicolons.
edeclaration block contains one or more declarations separated d cooare surrounded by curly braces.
Each declaration includes a CSS property name and a value, separated Dyblocks
semicolons, and declaration
npeSS deciarations are separated with
<DOCTYPE htmb
chtmb
<head> Hello World!
These paragraphs are styled with CSS.
<style>
p
color: red;
text-align: center;
style>
</head>
cbody>
<p>Hello Worldl</p>
<p>These paragraphs are styled with CSS.</p>
<fbody>
</htmb
Applications of CSs
As mentioned before, CSS is one of the most widely used style language over the web. I'm going to list few of them
here:
"CSS saves time -You can write CSs once and then reuse same sheet in multiple HTML pages. You can deine a
Style for each HTML element and apply it to as many Web pages as you Want.
rages 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
its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
1)CSS Element Selector
The element selector
selects the HTML element by name.
<!DOCTYPE htm>
<html>
<head>
<style>
p
text-align: center;
color: blue;
This style will be applied on every paragraph.
Me too!
</style> And me!
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me tool</p>
<p>And mel</p>
</body>
</html>
o
utsde thbo
3) CSS Class Selector
class selector selects HTML elements with a specific class

The attribute, It is used with a period
character. (full stop symbol) followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
</style>
</head> This heading is blue and center-aligned.
<body> This paragraph is blue and center-aligned.
<h1 class="center">This heading is blue and center
aligned.</h1>
<p class="center">This paragraph is blue and center
aligned.</p>
/body>
/html>
2)CSSldSelector
he id selector selects the id
element. An id is always uniqueattribute
of an HTML
element to select a specific
unique element.
within the page so it is chosen to select a single,
It is written with the hash
character (#), followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1{
text-align: center;
color: blue;
</style>
</head> Hello Clickstory.in
<body> This paragraph will not be affected.
<p id="paral">Hello Clickstory.in</p>
<p>This paragraph will not be affected.</p>
</body>
</htmb
4) Universal Selector in CSS
The CSS
dniversal selector which is used to select all elements of thee HTML BEe.Fes th a g e
Syntax
The syntax for CSS universal selector is as
follows -
Lblyley
/"declarations/ fotsise:2oj
3
1- <lDoCTYPE html
2- chtl>
3chead>
ye
argin: 15px:
padding: Spx;
Spx lightblue;
11 (style>
13choh
14- ctable>
15 ctr
18 </tr
19-ctr
21 <tu/td>
22 ctd>/td>
23. <td/td>
/table
</body>
</htel
CSS Selector
part of CSS
CSS selectors are used to select the style. Selectors are the
content you want to
Tuie set. CSS selectors select HTMI elements according to its id, class, type, attribute et
There are several different types of selectors in CSS.
1.CSS Element Selector
2.CSS Id Selector
3.CSS CIlass Selector
4.CSS Universal Selector
5.CSS Group Selector

5) Group Selectors in CSS
You can apply a style to many given in the following
example: selectors if you like. Just separate the selectors with àa comma, as
the
h1, h2, h3{
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
element as well, The order of the list is irrelevant. All the
This defined style rule will be applicable to h1. b2 and h3
elements in the selector will have the corresponding declarations applied to them.
You can combine the various id selectors together as shown below:
#content, #footer, #supplement {

position: absolute;
left: 510px;
width: 200px;
ebarder
Cabedded 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 the
document. Here is the generic syntax
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media ="all">
body { This is a heading
background-color: linen; This it a pangspl.
h1{
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<hi>This is a heading</h1>
</body>
</html>
External Css
Anexternal style sheet is used to define the style for
lo Use an external style sheet, add a link to it in the many HTML pages.
shead> section of each HTML page:
Example
<IDOCTYPE htmi>
<html>
<head>
<link rel="stylesheet" href="styles.css"> This is a heading
</head>
<body>
</body>
</html>
nline C$S
An inline CSS is used to

apply a unique style to a single
HTML element.
An inline CSS uses the style
attribute of
an HTML element.
The following example sets the to red:
text color of the <h1> element to blue, and the text color of the <p> element
<!DOCTYPE html>
<html>
<body>
A Blue Heading
<h1 style="color:blue;">A Blue Heading</h1> Ared paragraph.
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Ss can be added to HTML
documents in 3 ways:
Inline -by using the style attribute
inside HTML elements
Internal - by using a <style> element in the
<head> section
External- by using a <link> element to link to an external CSS file
stcommon way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline
and internal styles, because this is easier to demonstrate, and easier for you to try it yourselt.
nternalCss
An internal
CSS is
used to define a style
An internal CsS is
The defined in the <head> for a singleof HTML page.
the following
<p> example sets the text colorsection an HTML Dage,
elements red. In addition, the page willthe <h1> elementswithin
to of ALL
(on
a <style>
element.
be displayed with a that page) to blue, and the text color of ALL
Example "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
hi {color: blue;}
This is a heading
p
{color: red;}
</style
</head>
<body>
<p>This is a paragraph .</p>
</body>
</html>
SS
TipThe: YoCSS
<.DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
h1{
color: white;
text-align: center;
p{
font-family: verdana;
font-size: 20px;
)
</style>
</head>
<body>
<h1>My First CSS Example</h1>
</body>
</htm>
ne external style sheet can be
Code, and must be saved with a written in any text editor. The file must not contain any HML
.css extension.
Here is how the "styles.css" file looks like:
body {
}
background- color: powderblue;
h1 {
color: blue;
p{
color: red;
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSsS border property:
border: 2px solid powderblue;
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
Example
Use of csS border and padding properties:
border: 2px solid powderblue;
padding: 30px; DNG SVLE SHE
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p{
border: 2px solid powderblue ;
margin: 5epx;
CSS Colors, Fonts and Sizes
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be
used.
The CSS font-size property defines the text size to be used.
<DOCTYPE html>
<html>
<head>
<style>
h1{
color: blue;
font-family: verdana;
font-size: 300%;
pf
color: red;
font-family: courier;
font-size: 160%;
</style>
</head>
<body>
</body>
</htm>

CSS Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Notes

Uploaded by

Copyright:

Available Formats

Madale-3

CASCADING STYLE SHEETS

The selector points to the HTML element you want to style.

3) CSS Class Selector

class selector selects HTML elements with a specific class

3.CSS CIlass Selector

4.CSS Universal Selector

5.CSS Group Selector

#content, #footer, #supplement {

An inline CSS is used to

You might also like