CSS and CSS3

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.;

Why CSS?

1 CSS easy Manage a lot of Websites page Layout.

2 CSS save a lot of Time.

3 CSS Sheets make Global change to all website pages.

Features of CSS:

1. Flexibility

2. Codes Rendering

3. Accessibility

4. Easy Manage

5. Global Change

6. CSS Save a lot of time

7. Easy Maintenance

8. Inline Styles

9. Internal Style Sheets

10. External Style Sheets

11. Page Load Faster

12. Superior styles to HTML

13. Multiple Device Compatibility

14. Global web standards

CSS Versions:

CSS1.0 ==> 1996

CSS2.0 ==> 1998

CSS3.0 ==> 2008

CSS4.0 ==> 2016

Bootstrap: Mobile Front-End Framework for Responsive Web Design, One Wesite can able to fit on any device..!!

LESS ==> Linear CSS

SASS ==> Syntatically Awesome Style Sheets

CSS Syntax:

Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.

Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.

Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.

Syntax as follows:

selector { property: value }

Example: Table border as follows:

table{ border :1px solid #C0lorCode; }

Basic Examples:

h1 {color: green}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h2>This is header 2</h2>

<p>This is a paragraph</p>

</body>

</html>

Example2

Example3

<style>

</style>

Three Ways to Insert CSS (Types of Style Sheets)

There are three ways of inserting a style sheet:

Inline styles

Internal style sheet

External style sheet

Examples for Inline Style sheets:

<p style="color: red">Hi I am in RED color</p>

This will make that specific paragraph red.

<span style="color:blue">Hi I am sky in Blue color</span>

This will make that text style in blue color.

2. <b p style="color: green">Hi I am in Bold </b> </p>

<span style="color:lightblue">Hi I am sky in Blue color</span>

Examples for Internal Style Sheets or Page Level Style Sheets

<html>

<head>

{

color:red;

text-align:center;

}

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

</body>

</html>

<html>

<head>

{

color:pink;

text-align:right;

background-color:green;

}

</style>

</head>

<body>

<p>Welcome to CSS</p>

<p>This paragraph is styled with CSS.</p>

</body>

</html>

EXTERNAL STYLE SHEETS

Example1:

Step 1

Prepare CSS file

Step 2

Prepare HTML file

Step 1

h1 {color: green}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

Step 2

<head>

</head>

<body>

<h1>This is header 1</h1>

<h2>This is header 2</h2>

<p>This is a paragraph</p>

</body>

</html>

Example2:

Step 1

Prepare CSS file

Step 2

Prepare HTML file

.cls{

border:1px solid blue;

width:100;

height:100;

background-color:red;

}

<head>

</head>

<body>

Hello

</div>

</body>

strong

{

color: red;

text-decoration: underline;

}

<!DOCTYPE html>

<html>

<head>

<title>Sample document</title>

</head>

<body>

<p>

<strong>C</strong>ascading

<strong>S</strong>tyle

<strong>S</strong>heets

</p>

</body>

</html>

CSS Units

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units.

em (ems, the height of the element's font), An em is a unit of measurement in the field of typography, equal to the currently specified point size.

Syntax: em;

Example:

<html>

<head>

{

letter-spacing: 7em;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

ex (x-height, the height of the letter "x")

This value defines a measurement relative to a font's x-height.

Syntax: ex;

Example:

<html>

<head>

{

font-size: 24pt;

line-height: 3ex;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

Defines a measurement in screen pixels.

px (pixels, relative to the canvas resolution)

Syntax: px;

Example:

<html>

<head>

{

padding: 25px;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

in (inches; 1in=2.54cm)

Defines a measurement in inches.

Syntax: in

Example:

<html>

<head>

{

word-spacing: .15in;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

cm (centimeters; 1cm=10mm)

Defines a measurement in centimeters

Syntax: cm;

div

{

margin-bottom: 2cm;

}

mm (millimeters)

Defines a measurement in millimeters

Syntax:mm;

<html>

<head>

{

word-spacing: 15mm;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

Defines a measurement in points. A point is defined as 1/72nd of an inch. pt (points; 1pt=1/72in)

Syntax:pt;

<html>

<head>

body

{

font-size: 18pt;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

pc (picas; 1pc=12pt)

Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.

Syntax: pc;

<html>

<head>

{

font-size: 20pc;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

Defines a measurement as a percentage relative to another value, typically an enclosing element.

Example:

<html>

<head>

{

font-size: 16pt;

line-height: 125%;

}

</style>

</head>

<body>

<h1>CSS Units!</h1>

</body>

</html>

Setting Backgrounds using CSS:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

1. The background-color property is used to set the background color of an element.

2. The background-image property is used to set the background image of an element.

3. The background-repeat property is used to control the repetition of an image in the background.

4. The background-position property is used to control the position of an image in the background.

5. The background-attachment property is used to control the scrolling of an image in the background.

1 background-color Porperty:

The background-color property is used to set the background color of an element.

Syntax:

background-color:colorName/ColorCode/HexaCode;

background:colorName/ColorCode/HexaCode;

Example:

<head>

div

{

background-color:#FFFF00;

}

</style>

<body>

<div>Working with Typography...!!</div>

</body>

Example2:

<head>

div

{

background:red;

}

</style>

<body>

<div>Working with Typography...!!</div>

</body>

Example:

This text has a yellow background color.

</p>

2. The background-image property is used to set the background image of an element.

Syntax:

background-image:url('ImgPath');

background:url('ImgPath');

Example1:

<head>

body

{

background-image:url("html5.png");

}

</style>

<body>

<div>Working with Typography...!!</div>

</body>

Example2:

<head>

body

{

background:url("html5.png");

}

</style>

<body>

<div>Working with Typography...!!</div>

</body>

Example3:

<p style="background-color:yellow;background-image:url('html.png')">This text has a yellow background color.

</p>

3. The background-repeat property is used to control the repetition of an image in the background.

Syntax:

background-repeat:no-repeat;

background:no-repeat;

Property Values

ValueDescription

repeatThe background image repeated both vertically and horizontally.

repeat-xThe background image repeated only horizontally

repeat-yThe background image repeated only vertically

no-repeatThe background-image not repeated

Example:

<head>

<style>

body

{

background-image:url('water.gif');

background-repeat:no-repeat;

}

</style>

</head>

<body>

<p>repeat-x will repeat a background image only vertically.</p>

</body>

Example:

<style>

</style>

4. The background-attachment property is used to control the scrolling of an image in the background.

Syntax:

background-attachment:fixed;

background:fixed;

Example:

Some Text...

</body>

5. The background-position property is used to control the position of an image in the background.

Syntax:

background-position:left/center/right;

background:center;

Example:

<html>

<head>

body

{

background-image:url('https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/water.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

</style>

</head>

</body>

</html>

Selectors:

Styles Reusability

Types of Selectors:

1. Tag/Type Selectors

2. ID Selectors

3. Class Selectors

4. Grouping Selectors

5. Customized Selectors etc...............

Type/Tag selectors

A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.

Syntax:

div

{

Styles

}

<html>

<head>

body

{

background-color:#FF00FF;

}

</style>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

<html>

<head>

{

background-color:red;

}

div

{

background-color:pink;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element. We are still in the div element.

</div>

</body>

</html>

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".

The id Selector

It 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 "#". # is the notation or Symbol.

Syntax1:

#div

{

styles

}

Syntax:

div#div

{

styles

}

Examples

<html>

<head>

p#bold

{

font-weight: bold;

}

</style>

</head>

<body>

<p id="bold">this paragraph will be rendered bold.</p>

</body>

</html>

<html>

<head>

#Exa

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="Exa">Hello CSS World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

<html>

<head>

#para1

{

text-align:right;

color:green;

}

#para2

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p id="para2">This paragraph is not affected by the style.</p>

</body>

</html>

Example:

<head>

#div1

{

color:blue;

font-family:tahoma;

}

</style>

function MySelector()

{

document.getElementById("div1").innerHTML="Raju";

}

</script>

</head>

<body>

<p style='color:gray'>Click the button to display the ID related result...!!</p>

<div id="div1">JavaScript</div>

<button onclick="MySelector()">ClickMe</button>

</body>

The class Selector

It is used to specify a style for a group of elements .The class selector uses the HTML class attribute, and is defined with a "."

Syntax:

.div

{

styles

}

Syntax:

div.div

{

styles

}

Examples:

<html>

<head>

p.bold

{

font-weight: bold;

}

</style>

</head>

<body>

<p class="bold">this paragraph will

be rendered bold.</p>

</body>

</html>

<html>

<head>

.right1

{

text-align:right;

}

</style>

</head>

<body>

<h1 class="right1">Right-aligned heading</h1>

<p class="right1">Right-aligned paragraph.</p>

</body>

</html>

<html>

<head>

.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Naresh i Technologies</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html>

<html>

<head>

<style>

#div1

{

text-decoration:underline;

color:lime;

}

.cls1

{

border:5px double red;

width:100;

height:100;

}

</style>

<body>

<div id='div1'>Hello</div>

</body>

</html>

Selector Grouping

We can group selectors using a comma (,) separator.

Example1:

h1 { font-family: sans-serif }

h2 { font-family: sans-serif }

h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

Example:

{

font-family: tahoma;

font-size: 14px;

}

div

{

font-family: tahoma;

font-size: 14px;

}

blockquote

{

font-family: tahoma;

font-size: 14px;

}

is equivalent to:

p, div, blockquote

{

font-family: tahoma;

font-size: 14px;

}

Example:

<html>

<head>

<style>

#div1,.cls1

{

text-decoration:underline;

color:lime;

}

</style>

<body>

<div id='div1'>Hello</div>

</body>

</html>

Selectors:

Styles Reusability

Types of Selectors:

1. Tag/Type Selectors

2. ID Selectors

3. Class Selectors

4. Grouping Selectors

5. Customized Selectors etc...............

Type/Tag selectors

A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.

Syntax:

div

{

Styles

}

<html>

<head>

body

{

background-color:#FF00FF;

}

</style>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

<html>

<head>

{

background-color:red;

}

div

{

background-color:pink;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element. We are still in the div element.

</div>

</body>

</html>

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".

The id Selector

It 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 "#". # is the notation or Symbol.

Syntax1:

#div

{

styles

}

Syntax:

div#div

{

styles

}

Examples

<html>

<head>

p#bold

{

font-weight: bold;

}

</style>

</head>

<body>

<p id="bold">this paragraph will be rendered bold.</p>

</body>

</html>

<html>

<head>

#Exa

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="Exa">Hello CSS World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

<html>

<head>

#para1

{

text-align:right;

color:green;

}

#para2

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p id="para2">This paragraph is not affected by the style.</p>

</body>

</html>

Example:

<head>

#div1

{

color:blue;

font-family:tahoma;

}

</style>

function MySelector()

{

document.getElementById("div1").innerHTML="Raju";

}

</script>

</head>

<body>

<p style='color:gray'>Click the button to display the ID related result...!!</p>

<div id="div1">JavaScript</div>

<button onclick="MySelector()">ClickMe</button>

</body>

The class Selector

It is used to specify a style for a group of elements .The class selector uses the HTML class attribute, and is defined with a "."

Syntax:

.div

{

styles

}

Syntax:

div.div

{

styles

}

Examples:

<html>

<head>

p.bold

{

font-weight: bold;

}

</style>

</head>

<body>

<p class="bold">this paragraph will

be rendered bold.</p>

</body>

</html>

<html>

<head>

.right1

{

text-align:right;

}

</style>

</head>

<body>

<h1 class="right1">Right-aligned heading</h1>

<p class="right1">Right-aligned paragraph.</p>

</body>

</html>

<html>

<head>

.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Naresh i Technologies</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html>

<html>

<head>

<style>

#div1

{

text-decoration:underline;

color:lime;

}

.cls1

{

border:5px double red;

width:100;

height:100;

}

</style>

<body>

<div id='div1'>Hello</div>

</body>

</html>

Selector Grouping

We can group selectors using a comma (,) separator.

Example1:

h1 { font-family: sans-serif }

h2 { font-family: sans-serif }

h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

Example:

{

font-family: tahoma;

font-size: 14px;

}

div

{

font-family: tahoma;

font-size: 14px;

}

blockquote

{

font-family: tahoma;

font-size: 14px;

}

is equivalent to:

p, div, blockquote

{

font-family: tahoma;

font-size: 14px;

}

Example:

<html>

<head>

<style>

#div1,.cls1

{

text-decoration:underline;

color:lime;

}

</style>

<body>

<div id='div1'>Hello</div>

</body>

</html>

.........

CSS and CSS3

Call to Action

Contact Us

Call or email

Drop us a line

Log In

​CSS and CSS3

Call to Action

Contact Us

Call or email

Drop us a line

Log In

CSS and CSS3