2 CSS Word File

WHY CSS?
Define Styles for Your Web Pages, Including The Design, Layout And Variations In Display
For Different Devices And Screen Sizes
CSS Solved Big Probe?
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page
How CSS Saved Lot Of Time?
The style definitions are normally saved in external .css files.
With an external style sheet file, you can change the look of an entire website by changing
just one file
CSS INTRODUCTION 1.0

CSS Acronym for Cascading Style Sheet
 Is used to control the style of a web document in a simple and easy way.
 Is a simple design language intended to simplify the process of making web pages
presentable?
Advantage of CSS
 CSS saves time
 Pages load faster
 Easy maintenance
 Multiple Device Compatibility
 Platform Independence
who Developed
 Was invented by Håkon Wium Lie on October 10, 1994.
Version
1. CSS1 was came out of W3C as a recommendation in December 1996.
2. CSS2 was became a W3C recommendation in May 1998 and builds on CSS1, support
for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.
3. CSS3 was became a W3C recommendation in June 1999 and builds on older versions
CSS
CSS - The <style> Element 2.0

CSS rules into an HTML document using the <style> element.
Type(text/css) =Specifies the style sheet language.
Inline CSS - The style Attribute
 These rules will be applied to that element only
External CSS - The <link> Element
 <link> element can be used to include an external style sheet file in your HTML
document
Embedded CSS - The <style> Element
 This tag is placed inside <head>...</head> tags.
CSS Comments
 use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.
CSS SYNTAX 3.0
A style rule is made of three parts
 SELECTOR − A selector is an HTML tag at which a 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, border etc.
 VALUE - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
CSS SELECTOR’S TYPES 3.1

 UNIVERSAL SELECTORS =use “ * “ called universal selector .
 DESCENDANT SELECTORS =apply a style rule to a particular element only when it

lies inside a particular element.
 CLASS SELECTORS =define style rules based on the class attribute of the elements.
 ID SELECTORS =define style rules based on the id attribute of the elements.
 CHILD SELECTORS =s one more type of selector, which is very similar to

descendants but have different functionality.
 ATTRIBUTE SELECTORS =you can also apply styles to HTML elements with
particular attributes.
 GROUPING SELECTORS =you can apply a style to many selectors if you like.
CSS COMMON IMPORATNT SYNTAX 4.0
COLOR VALUE BACKGROUND VALUE CSS FONTS
Hex Code Background-Color Font-Family Property Is
=P{Color:#FF0000;} = Property Is Used To Set Used To Change The Face
The Background Color Of Of A Font.
An Element
RGB % =P{Color:Rgb Background-Image Font-Style
(50%, 50%, 50%) ;} = Property Is Used To Set Property Is Used To Make
The Background Image Of A Font Italic Or Oblique.
An Element
Keyword =P{Color: Background-Repeat Font-Variant
Yellow;} = Property Is Used To Property Is Used To
Control The Repetition Of Create A Small-Caps
An Image In The Effect.
Background.
Background-Position Font-Weight
= Property Is Used To Property Is Used To
Control The Position Of An Increase Or Decrease
Image In The Background How Bold Or Light A Font
Appears.
Background-Attachment Font
=Property Is Used To Property Is Used As
Control The Scrolling Of Shorthand To Specify A
An Image In The Number Of Other Font
Background. Properties
Background
=Property Is Used As A
Shorthand To Specify A
Number Of Other
Background Properties.
Practical Session 3.1.0

OUTPUT
CSS FLOAT CSS MARGIN MARGIN CSS PADDING

VALUES PADDING VALUES
It Is Used To Margin Auto=This Is Is Used To Length=Define
Push An Property Is Used To Let The Define The Fixed Padding
Element To Used To Browser Space In Pt, Px, Em
The Left Or Define The Calculate A Between The Etc.
Right Space Around Margin. Element
Elements Content And
The Element
Border.
Left =It is used margin-left=it Length=margin padding-left=It % = It defines

to float the is used to set pt, px, cm, etc. is used to set padding in % of
element to the left margin of its default value left padding of containing
left. an element is 0px. an element. element.
Right = It is margin-right=It padding-

used to float is used to set right=It is used
the element to right margin of to set right
the right. an element. padding of an
element.
Initial = It sets margin-top=It padding-top=It

the property to is used to set is used to set
its initial value. top margin of top padding of
an element. an element.
Inherit = It is margin- padding-

used to inherit bottom=It is bottom=It is
this property used to set used to set
from its parent bottom margin bottom padding
element of an element. of an element.
Padding=It is
used to set all
the padding
properties in
one declaration.
OUTPUT
BORDER HEIGHT WIDTH OPACITY
CSS border =properties CSS opacity property is used
allow you to specify the to specify the transparency
style, width, and color of an of an element. Example:
element's border
Border styles Height And Width Properties opacity: 0.4;
dotted - Defines a dotted Are Used To Set The Height filter: alpha(opacity=40)
border And Width Of An Element.
Solid - Defines a solid

border.
double - Définies a doublé

border
Groove - Defines a 3D
grooved border. The effect
depends on the border-color
value
height: 100px;
width: 500px;

OUTPUT
CSS POSITION’S 4.0

CSS POSITION PROPERTY
Is used to set position for an element. it is also used to place an element behind another
and also useful for scripted animation effect.
FOLLOWING CSS POSITIONING:
 CSS Static Positioning
 CSS Fixed Positioning
 CSS Relative Positioning
 CSS Absolute Positioning
STATIC POSITIONING
Default position for HTML elements. It always positions an element according to the normal
flow of the page. It is not affected by the top, bottom, left and right properties.
FIXED POSITIONING
Fixed positioning property helps to put the text fixed on the browser. This fixed test is
positioned relative to the browser window, and doesn't move even you scroll the window.
RELATIVE POSITIONING
Relative positioning property is used to set the element relative to its normal position.
ABSOLUTE POSITIONING
Absolute positioning is used to position an element relative to the first parent element that
has a position other than static. If no such element is found, the containing block is HTML.
PROPERTIES
Bottom, clip, left, overflow, position, right, top, z-index.
OUTPUT:
OUTPUT:
OUTPUT:
CSS IMPORTANT QUESTIONS 5.0
1. What are the different variations of CSS?
2. How can you integrate CSS on a web page?
3. What are the advantages of CSS?
4. What are the advantages of Embedded Style Sheets?
5. What is CSS selector?
6. What is the difference between class selectors and id selectors?
7. What is the float property of CSS?

2 CSS Word File

Uploaded by

Document Information

Original Title

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

2 CSS Word File

Uploaded by

Copyright:

Available Formats

WHY CSS?

CSS Solved Big Probe?

HTML was created to describe the content of a web page

How CSS Saved Lot Of Time?

The style definitions are normally saved in external .css files.

CSS INTRODUCTION 1.0

 CSS saves time

 Pages load faster

 Multiple Device Compatibility

 Was invented by Håkon Wium Lie on October 10, 1994.

1. CSS1 was came out of W3C as a recommendation in December 1996.

CSS - The <style> Element 2.0

Type(text/css) =Specifies the style sheet language.

Inline CSS - The style Attribute

 These rules will be applied to that element only

External CSS - The <link> Element

Embedded CSS - The <style> Element

 This tag is placed inside <head>...</head> tags.

CSS SELECTOR’S TYPES 3.1

 DESCENDANT SELECTORS =apply a style rule to a particular element only when it

 ID SELECTORS =define style rules based on the id attribute of the elements.

 CHILD SELECTORS =s one more type of selector, which is very similar to

Practical Session 3.1.0

CSS FLOAT CSS MARGIN MARGIN CSS PADDING

Left =It is used margin-left=it Length=margin padding-left=It % = It defines

Right = It is margin-right=It padding-

Initial = It sets margin-top=It padding-top=It

Inherit = It is margin- padding-

Solid - Defines a solid

double - Définies a doublé

Practical Session 3.1.3

CSS POSITION’S 4.0

FOLLOWING CSS POSITIONING:

 CSS Static Positioning

 CSS Fixed Positioning

 CSS Relative Positioning

 CSS Absolute Positioning

Bottom, clip, left, overflow, position, right, top, z-index.

Practical Session 4.1.0

1. What are the different variations of CSS?

2. How can you integrate CSS on a web page?

3. What are the advantages of CSS?

4. What are the advantages of Embedded Style Sheets?

5. What is CSS selector?

6. What is the difference between class selectors and id selectors?

7. What is the float property of CSS?

You might also like