Scribd
Upload
42 views

2 CSS Word File

Here are the key differences between inline, internal, and external CSS: - Inline CSS uses the style attribute inside an HTML element to apply styles to that single element. It has the highest specificity. - Internal CSS defines styles between <style> tags in the <head> section. Styles can be applied to multiple elements on the page. - External CSS defines styles in a .css file that is linked via <link> in the <head>. Styles can be applied to elements on multiple pages by linking the single .css file. It allows separation of style from structure/content. 2. What is CSS specificity and how does it work? The specificity of a CSS rule determines which rule will

Uploaded by

ronak waghela
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

2 CSS Word File

Here are the key differences between inline, internal, and external CSS: - Inline CSS uses the style attribute inside an HTML element to apply styles to that single element. It has the highest specificity. - Internal CSS defines styles between <style> tags in the <head> section. Styles can be applied to multiple elements on the page. - External CSS defines styles in a .css file that is linked via <link> in the <head>. Styles can be applied to elements on multiple pages by linking the single .css file. It allows separation of style from structure/content. 2. What is CSS specificity and how does it work? The specificity of a CSS rule determines which rule will

Uploaded by

ronak waghela
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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.
Practical Session 3.1.2

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;

Practical Session 3.1.3


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.

Practical Session 4.1.0

OUTPUT:
Practical Session 4.2.0

OUTPUT:
Practical Session 4.3.0

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?

You might also like