Scribd
Upload
11 views

CSSPPT

Uploaded by

harithakongi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
11 views

CSSPPT

Uploaded by

harithakongi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 61

Intro to CSS

What is CSS?
 Cascading Style Sheet
Stylesheet Language
 Standards-based set of properties and attributes to define
styles
To describe the presentation a document
written in a
‘markup language’ like HTML or XML
 Markup encoding: <p>My paragraph here.</p>
 Defines the style of how things in <p> tags appear.
 Font, color, size, margins, etc.
Cascading
 Rules to determine how to
 apply markup that contains
 other markup
Why CSS?
 Separate Content from Form
 Content is the text and images, marked up to define regions of
specific types
 Form defines the “style” for the content
 The old way:
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
CSS Syntax
 3 Elements to a CSS Statement
 Selector
 What HTML sections does it affect?
 Property
 What attribute of that HTML section will be affected?
 Value
 What change will be made to that attribute?
Types of css
 Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>

Note, the selector for inline CSS is the tag which contains the style
attribute.
 Internal: the <style> markup tag

<html>
<head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head>
<body>
<p>Content</p>
</body>
</html>
External: the .css stylesheet file

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />


Benefit of External Style Sheet
The real power of using an external style sheet is that multiple web
pages on our site can link to the same style sheet:
style.css :
h2 {color:red;}

page1.html page2.html page3.html

Styles declared in an external style sheet will affect all matching elements on
all web pages that link to the style sheet. By editing the external style sheet,
we can make site-wide changes (even to hundreds of pages) instantly.
CSS Syntax: Selectors
 There are many kinds of selectors and many ways to reference them:
 Type, Class, ID, Pseudo, etc.

 HTML Type Tag – selected with the tag type

p{ font-size: 10px;
font-color: White; }

<p>Content</p>
 The Class Attribute – precede the class with a period

.myinfo { font-size: 10px;


font-color: White; }

<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CSS Syntax: Selectors(contd..)
 Id Attribute – selected with the id attribute(#)

#myinfo { font-size: 10px;


font-color: White; }

<p id=“myinfo”>Content</p>
<div id=“myinfo”>Other content</div>
 The group selector– separated with (,)

.myinfo ,div,h1{ font-size: 10px;


font-color: White; }

<p id=“myinfo”>Content</p>
<div >Other content</div>
<h1> Heading </h1>
CSS Syntax: Selectors(contd..)
 Universal selector – selected with the * it selects the total content on
webpage

*{ font-size: 10px;
font-color: White; }
<body>
<p> content </p>
<h1> heading </h1>
</body>
CSS properties for colors
p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above output

CS380 11
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
 RGB codes: red, green, and blue values from 0 (none) to 255 (full)
12
 hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (like HTML) is usually not commented as rigorously as


programming languages such as Java
 The // single-line comment style is NOT supported in CSS
 The <!-- ... --> HTML comment style is also NOT supported in CSS

CS380 13
CSS properties for fonts

CS380 14
font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output

 Enclose multi-word font names in quotes

CS380 15
More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.

output
 We can specify multiple fonts from highest to lowest priority
 Generic font names:
 serif, sans-serif, cursive, fantasy, monospace
 If the first font is not found on the user's computer, the next is tried
 Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font

CS380 16
font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em

vague font sizes: xx-small , x-small , small , medium, large, x-large, xx-large, smaller, larger
 percentage font sizes, e.g.: 90%, 120%

CS380 17
font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 pt specifies number of point, where a point is 1/72 of an inch onscreen
 px specifies a number of pixels on the screen
 em specifies number of m-widths, where 1 em is equal to the font's
current size

CS380 18
font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.


output

 Either of the above can be set to normal to turn them


off (e.g. headings)

CS380 19
CSS properties for text

CS380 20
background-image
body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's content


area

CS380 31
background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-


repeat

CS380 32
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 value consists of two tokens, each of which can be top, left,


right, bottom, center, a percentage, or a length value in px,
pt, etc.
 value can be negative to shift left/up by a given amount
CS380 33
Inline vs. Block Display
All HTML elements (tags) are assigned a display
property value of either inline or block.
Inline elements display in browsers horizontally.
[INLINE ELEMENT 1] [INLINE ELEMENT 2] [INLINE
ELEMENT 3]
Block elements display in browsers vertically (stacked
one on top of the other).
[BLOCK ELEMENT 1]
[BLOCK ELEMENT 2]
[BLOCK ELEMENT 3]
Examples of inline elements:
<a> <img> <strong> <em> <span>
Examples of block elements:
<p> <h1-h6> <div> <hr> <table> <ul>
<ol>
display: inline;

Normally, the heading tags display in block format:

 But, to have them display inline, add the style


h1,h2,h3 {display: inline;}:
display: block;

Normally, <a> tags display inline.

 But, if you add the style a {display: block;}, they will display as a
vertical navigation menu:
DISPLAY PROPERTIES(contd..)
 PROPERTY  DESCRIPTION
 display:inline-block  An element you assign a display of
inline-block is inline by
presentation. But it has the added
advantage of you being able to
apply width and height to it,
which you can't do when the
element is assigned a display of
inline.
 When you set the
 display:none display property of an
element to none, the
element is completely
taken off the page and
it doesn’t have an effect
on the layout.
DISPLAY PROPERTIES(contd..)
 PROPERTY  DESCRIPTION
 display:flex  A display of flex gives you access
to the Flex layout system, which
simplifies how we design and
layout our web pages.

 A display set to grid


 display:grid allows you to build
layouts with the grid
system, which is like an
advanced form of flex.
DISPLAY PROPERTIES(contd..)
 PROPERTY  DESCRIPTION
 display:inherit  This makes the element inherit
the display property of its parent.
So, if you have a <span> tag inside
a div and you give the span tag a
display of inherit, it turns it from
inline to block element.

 This sets the display


 display:intial property of an element to
its default value. So, if you
set the display property of a
span to initial, it remains
inline, and if you set the
same value for a div, it
remains block.
BOX MODEL
CSS FLOAT
With CSS float, an element can be pushed to the left
or right, allowing other elements to wrap around it.
Float is very often used for images , but it is also
useful when working with layouts
Elements are floated horizontally ,this means that an
elements can only floated left or right, not up or down.
The elements before the floating elements will not be
affected.
If an image is floated to the right, a following text
flows around it to the left.
CANCELLING FLOATED CONTENT

The clear property is used to cancel floating property . The


following outlines the clear property and its possible values.

Clear left | right | both


PSEUDO ELEMENTS
 ::first-letter.
 ::first-line.
 ::marker.
 ::selection.
 ::placeholder.
 ::before and ::after.
 :focus
 :Link
 :Active
 :Visited
 :hover
POSITIONING

The positioning properties allow you to position an element. It


can also place an element behind another , specify what
should happen when an elements’s content too big.

Elements can be positioned using the top , bottom , left, right


properties. However, these properties will not work unless the
position property is set first . They also work differently
depending on the positioning method.

There are four different positioning methods.


Static Positioning

HTML elements are positioned static by default. Static


positioned elements is always positioned according to the
normal flow of the page.
Static positioned elements are not affected by the
top,bottom,left and right properties.
Fixed positioning

An element with fixed position is positioned


relative to the browser window
It will not move if the window is scrolled:
Relative Positioning

Relative positioning changes the position of the


HTML elements relative to where it normally
appears.so left:20 adds 20 pixels to the elements
left position.
You can use two values top and left with
position property.

Move left – use a negative value for left.


Move right – use a positive value for left.
Move up – use a negative value for top
Move down – use appositive value for top.
Absolute positioning:

removes the element from the normal document flow


and allows us to place it in a specific location. It will scroll
along with the surrounding page content.
Sticky Positioning:

An element with position: sticky; is positioned based on the user's


scroll position.
A sticky element toggles between relative and fixed, depending on
the scroll position. It is positioned relative until a given offset position
is met in the viewport - then it "sticks" in place (like position:fixed).
TRANSITION :
A shorthand property for setting the four transition
properties
transition-property :
Specifies the name of the CSS property the transition
effect is for
transition-duration :
Specifies how many seconds or milliseconds a transition
effect takes to complete
transition-timing-function
Specifies the speed curve of the transition ef
transition-delay
Specifies when the transition effect will start
ANIMATION IN CSS
@keyframes
Specifies the animation
animation
A shorthand property for all the animation properties below, except the
animation-play-state property
animation-name
Specifies a name for the @keyframes animation
animation-duration
Specifies how many seconds or milliseconds an animation takes to complete one
cycle
animation-timing-function
Specifies the speed curve of the animation
animation-delay
Specifies when the animation will start
animation-iteration-count
Specifies the number of times an animation should be played
animation-direction
Specifies whether or not the animation should play in reverse on alternate cycles
animation-play-state
Specifies whether the animation is running or paused
fill-mode
specifies styles apply for the tags when animation is not playing
Modifying List Elements

By default, unordered lists (<ul>) appear as bullets and ordered lists
(<ol>) appear as numbers in HTML.
Using CSS, you can modify how list items will appear:
Properties:
list-style, list-style-type, list-style-image, list-
style-position
Values:
disc, circle, square, decimal, decimal-leading-zero,
lower-roman, upper-roman, lower-alpha, upper-alpha,
lower-greek, lower-latin, upper-latin, hebrew,
armenian, georgian, cjk-ideographic, hiragana,
katakana, hiragana-iroha, katakana-iroha, none,
url("graphic.gif")
Examples:
ul { list-style: disc; }
ol { list-style: upper-roman;}
li { list-style: url("blackball.gif");}
ul li { list-style-position: inside;}
Cascading Inheritance

 Nested elements inherit


the properties from the
its parent

body { font-family: Verdana;


 If you specify a style for the
<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
 If you want to override .littletext { font-size: 8px; }
inherited settings, you
need to specify a style in
a more local element <body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>

You might also like