2_css.pptx

Internship in Web Designing
RCS Technology
CSS stand for "Cascading Style Sheet"
Why to Learn CSS?
Create Stunning Web site
Become a web designer
Control web
Learn other languages

TODAY TARGET
2
CSS is used to control the style of a web document in a simple and easy
way.
CSS is the acronym for "Cascading Style Sheet“
Small Program of CSS
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style> h1 { color: #36CFFF; } </style>
</head>
<body> <h1>Hello World!</h1> </body>

CSS – WHAT IS IT
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making
web pages presentable.
A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document. A style rule is made of three parts −

CSS-Sections
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 – WHAT IS IT
Selector Property-Here table is a selector and border is a property and
given value 1px solid #C00 is the value of that property.
You can define selectors in various simple ways based on your
comfort. Let me put these selectors one by one.

Applications of CSS
4
CSS saves time
Pages load faster
Easy maintenance
Superior styles to HTML
Multiple Device Compatibility
Global web standards

CONTENT AND
STYLE
3
What is
presented?
How is it
presented?
CSS
HTML
Y
ou understand
⦁ Any document has two aspects:content and style
Y
ou see
Information

ATTACH STYLE TO A PAGE
5
⦁ Define style of each element by its style attribute.
⦁ Define style inside the <style></style> of the HTML
document.
⦁ Multiple Style RulesYou may need to define multiple
style rules for a single element. You can define these
rules to combine multiple properties and corresponding
values into a single block as defined in the following
example −
⦁ h1 {
⦁ color: #36C; font-weight: normal; letter-spacing: .4em;
margin-bottom: 1em; text-transform: lowercase;
⦁ }

Embedded CSS
5
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.
<!DOCTYPE html>
<html> <head>
<style type = "text/css" media = "all">
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body> <h1>This is a heading</h1> <p>This is a
paragraph.</p>
</body> </html>

Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style
rules. These rules will be applied to that element only. Here is
the generic syntax −
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;"> This is inline CSS </h1>
</body>
</html>

Multiple Style Rules
You may need to define multiple style rules for a single
element. You can define these rules to combine multiple
properties and corresponding values into a single block as
defined in the following example −
h1 { color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase; }
Grouping Selectors
You can apply a style to many selectors if you like. example −
h1, h2, h3 { color: #36C;
font-weight: normal; letter-spacing: .4em; margin-bottom:
1em; text-transform: lowercase; }

THE SIMPLE
“CASCADING”
8
⦁ The higher priority rules overrides the lower one
⦁ The style in style attribute (not recommended)
⦁ The style inside the <style> tag
⦁ The style“imported” inside the <style> tag via @import
⦁ The external style sheet which is linked to by the <link> tag
⦁ The style“imported” inside an external style sheet.
⦁ The default browser style
⦁ The style defined later overrides the previous one.

CSS
SYNTAX
9
⦁ A set of rules
⦁ A rules
⦁ One selector
⦁ One or more declaration
⦁ Each declaration
⦁ A css property
⦁ Its value:length,percent,color
,url,constant

THE CSS SIMPLE
SELECTORS
10
⦁ Define the elements this rule applies to
⦁ A selector can be one or a sequence of
⦁ Universal selector *
⦁ HTML element
h1 { ... }
⦁ Id definition
#mainwrap { ... }
⦁ Class definition
.post { ... }
⦁ Selectors can be grouped
⦁ h1, h2, .post, #wrap { ... }

THE CSS SIMPLE SELECTORS
(cont
.)
11
⦁ Any p element inside a blockquote element
⦁ blockquote p { … }
⦁ Any h1 element inside a element which the id is
“sidebox”
⦁ #sidebox h1 { … }
⦁ Any p element have the class custom-para
⦁ p.custom-para { … }

CSS PROPERTIES : WIDTH
and HEIGHT
14
⦁ width:set the width of an element
Value Description
auto The browser calculates the width.This is default
length Defines the width in px,cm,etc.
% Defines the width in percent of the containing block
Specifies that the value of the width property should
be inherited from the parent element
inherit

CSS PROPERTIES : WIDTH
and HEIGHT
15
⦁ height:set the height of an element
Value Description
auto The browser calculates the height.This is default
length Defines the height in px,cm,etc.
% Defines the height in percent of the containing block
Specifies that the value of the height property should
inherit
http://www
.w3schools.com/cssref/pr_dim_width.asp

CSS LENGTH and
PERCENTAGE
16
⦁ Length:px,em,mm,cm,in,pt
Notation Meaning
px One pixel in normal screen display
em The font height
pt 1/
72 inch
mm,cm,in millimeters,centimeters,inches
Percentage:%
⦁ MORE ABOUT DIMENSION
⦁ max-width,min-width,max-height,min-height

CSS PROPERTIES: TEXT-
ALIGN
19
Value Description
left
right
Aligns the text to the left (default if ltr)
Aligns the text to the right (default if rtl)
center Centers the text
justify
Stretches the lines so that each line has equal width
(like in newspapers and magazines)
Specifies that the value of the text-align property should
inherit

CSS COLOR VALUES
22
⦁ CSS color name:red, white, navy, …
⦁ Numerical CSS color values:
⦁ RGB or RRGGBB values:#06f, #00ff27,…
⦁ RGBA values (CSS3):rgba(r, g, b, alpha) or
rgba(r%, g%, b%, alpha)
⦁ Transparent

CSS PROPERTIES : TEXT-
DECORATION
3
⦁ text-decoration: set the width of an element
Value Description
none Defines a normal text.This is default
Defines a line below the text
underline
overline Defines a line above the text
line-through Defines a line through the text
blink Defines a blinking text
Specifies that the value of the text-decoration property
should be inherited from the parent element
inherit
http://www
.w3schools.com/cssref/pr_text_text-decoration.asp

CSS PROPERTIES : TEXT-
TRANSFORM
4
⦁ text-transform: controls the capitalization of text.
Value Description
none No capitalization.The text renders as it is.This is default
capitalize T
ransforms the first character of each word to uppercase
uppercase T
ransforms all characters to uppercase
lowercase T
ransforms all characters to lowercase
inherit
Specifies that the value of the text-transform property

CSS PROPERTIES :
TEXT-IDENT
5
⦁ text-indent: specifies the indentation of the first line
in a text-block.
Lorem ipsum dolor sit amet,lugens quia
quod ait regem ut casus homini interimat potius
accipiet.Rationem non potentiaeApollonium
contigit cum obiectum dixit.Dionysiadis eum est se
sed esse deprecor.

CSS PROPERTIES :
TEXT-IDENT
6
Value Description
length Defines a fixed indentation in px,pt,cm,em,etc.
%
Defines the indentation in % of the width of the parent
element
Specifies that the value of the text-indent property should
inherit
http://www
.w3schools.com/cssref/pr_text_text-indent.asp

CSS FONTS – SERIF AND
SANS-SERIF
8
⦁ Serif and Sans-serif fonts
⦁ Monospace fonts
⦁ Courier New,Lucida
Mono
Console,Consolas, Ubuntu
⦁ Times New Roman,
Georgia
⦁ Arial,T
ahoma,Verdana,
Segoe UI,Ubuntu

CSS PROPERTIES : FONT-
FAMILY
9
⦁ font-family: set font of the element
Value Description
family-name
generic-
family
A prioritized list of font family names
and/
or generic family names
inherit
Specifies that the font family should be
inherited from the parent element
⦁ Try each font in the declared list until the browser finds
this font in the local machine.

CSS PROPERTIES :
FONT-SIZE
10
⦁ font-size:set size of a font
Value Description
xx-small, x-small,
small, medium, large, Sets the font-size to a certain size
x-large, xx-large
smaller
Sets the font-size to a smaller size than the
parent element
Sets the font-size to a larger size than the
parent element
Sets the font-size to afixedsize in px, cm,etc.
Sets the font-size to a percent of the parent
element's font size
Specifies that the font size should be inherited
from the parent element
larger
length
%
inherit

CSS PROPERTIES : LINE-
HEIGHT
11
⦁ line-height: specifies the line height.
Value Description
normal A normal line height.This is default
A number that will be multiplied with the current font
size to set the line height
A fixed line height in px,pt,cm,etc.
A line height in percent of the current font size
Specifies that the value of the line-height property should
number
length
%
inherit

WEIGHT
12
⦁ font-weight: sets how thick or thin characters in text
should be displayed.
Value Description
normal
bold
bolder
lighter
Defines normal characters.This is default
Defines thick characters
Defines thicker characters
Defines lighter characters
100, 200, 300, Defines from thin to thick characters.
400 is
400, 500, 600, the same as normal, and 700 is the
same as
700, 800, 900 bold
inherit
Specifies that the font weight should be

CSS PROPERTIES :
FONT-STYLE
13
⦁ font-style:set the font style of the text
Value Description
normal
The browser displays a normal font style.This is
default
The browser displays an italic font style
italic
oblique The browser displays an oblique font style
inherit
Specifies that the font style should be inherited

VARIATION
14
⦁ Font-variation: decide whether this text appears in
the small-cap format.
Value Description
normal The browser displays a normal font.This is default
small-caps The browser displays a small-caps font
Specifies that the font variant should be inherited
inherit
A SMALL-CAP FONT IS DISPLAYED LIKE THIS, JOHN!

CSS PROPERTIES :
FONT
15
⦁ font: sets all the font properties in one declaration.
Value Description
font-style Specifies the font style.See font-style for possible values
Specifies the font variant.See font-variant for possible
values
Specifies the font weight.See font-weight for possible
values
font-variant
font-weight
font-
size/line-
height
font-family
Specifies the font size and the line-height.See font-size
and line-height for possible values
Specifies the font family
.See font-family for possible values

CSS PROPERTIES :
BACKGROUND-COLOR
17
⦁ background-color:sets the background color of an
element.
⦁ Include padding and border
,not margin (read more in the
5th day)
Value Description
color
Specifies the background color.Look at CSS ColorValues
for a complete list of possible color values.
transparent
Specifies that the background color should be
transparent.This is default
inherit
Specifies that the background color should be inherited

CSS PROPERTIES :
BACKGROUND-IMAGE
18
⦁ background-image:sets the background image for an
element.
Value Description
url('URL') The URL to the image
none No background image will be displayed.This is default
inherit
Specifies that the background image should be inherited from
the parent element

CSS PROPERTIES :
BACKGROUND-REPEAT
19
⦁ background-repeat:sets if/
how a background image
will be repeated.
Value Description
repeat
The background image will be repeated both vertically and
horizontally
.This is default
repeat-x
repeat-y
The background image will be repeated only horizontally
The background image will be repeated only vertically
no-repeat The background-image will not be repeated
inherit
Specifies that the setting of the background-repeat property

C S S PROPERTIES : BACKGROUND-ATTACHMENT
20
⦁ ackground-attachment:sets whether a background
image is fixed or scrolls with the rest of the page.
Value Description
scroll
The background image scrolls with the rest of the page.This is
default
fixed The background image is fixed
inherit
Specifies that the setting of the background-attachment property

CSS PROPERTIES: BACKGROUND-
POSITION
22
Value Description
left top left
center left
bottom right
top right
center right
bottom
center top
center center
center bottom
If you only specify one keyword,the other value will be "center"
x% y%
The first value is the horizontal position and the second value is the vertical.
The top left corner is 0% 0%.The right bottom corner is 100% 100%. If you
only specify one value,the other value will be 50%. .Default value is:0% 0%
The first value is the horizontal position and the second value is the vertical.
The top left corner is 0 0.Units can be pixels (0px 0px) or any other CSS
units.If you only specify one value,the other value will be 50%.You can mix
% and positions
Specifies that the setting of the background-position property should be
xpos ypos
inherit

CSS PROPERTIES :
BACKGROUND
23
⦁ background:sets all the background properties in one
declaration.
Value Description
background-color Specifies the background color to be used
background-
position
Specifies the position ofthe background images
background-repeat Specifies how to repeat the background images
background-
attachment
Specifies whether the background images are fixed or
scrolls with the rest of the page
background-image Specifies O NE or MO RE background images to be used

YOURTASK
25
⦁ Improve your previous website by applying the new
CSS rules
ACTION
Do more & more &
Get more,&moremore
…

2_css.pptx

Recommended

Recommended

More Related Content

Similar to 2_css.pptx

Similar to 2_css.pptx (20)

Recently uploaded

Recently uploaded (20)

2_css.pptx