0% found this document useful (0 votes)
6 views

CSS.css [Autosaved] (1)

Uploaded by

singhshubh430
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views

CSS.css [Autosaved] (1)

Uploaded by

singhshubh430
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 58

CSS

Cascading style sheet


CSS

CSS is the language we use to style and align our


HTML elements.
CSS was introduced in 1994 by Haykon wium lie.
First version of CSS was introduced in 1996(CSS1)
CSS2-1998
Current version of CSS is CSS3-1999
TYPES OF CSS

 It is style sheet language which


is used to describe the look and
formatting of documents written
in markup language.
 It is generally used with html to
change the style of web pages
and UI.
 Commenting in css :-- /*-----*/
SYNTAX OF CSS

Css syntax:-
selector,property,value
| | |

P{ color: blue }
THREE WAYS TO ADD CSS
FILE
1.Inline style sheet : Style attribute
<p style : ” color: red”>Hello CSS</p>

2.Internal style sheet : <style >tag


Example:
<style>
p{color : value}
</style>
EXTERNAL CSS STYLE

 External style sheet==<link>tag


 External css is used to apply css on multiple
pages .
 Extension must be .css for css files.

code

.CS
S
SELECTORS
TYPES OF CSS SELECTORS

Simple Selector
Combinator Selector
Attribute Selector
Pseudo class Selector
Pseudo Element Selector
SELECTOR

A CSS selector selects the HTML element(s) you


want to style.

Selector{
property: value;
property: value;
}
SIMPLE SELECTOR

Id selector (#)


Class selector (.)
Universal Selector (*)
Element Selector (tag)
Grouping Selector(,)
UNIVERSAL SELECTOR(*)

 Select any and all types of elements in html page.


 All the elements within a body tag.
 Symbol of selector: “ * “
SYNTAX:
*{
properties }
TYPE/ ELEMENT SELECTOR

 Selects particular element.


 Call by type of tag.
SYNTAX:
element name{
properties

}
ID SELECTOR(#)

 Unique id attribute within the page is selected


 Core attribute selector
 Selected by symbol “#” followed by id name
 SYNTAX: #id_name{
css properties

}
CLASS SELECTOR

 Core attribute selector ,with specific class.


 The character to access in css file “ . “
 Multiple class name can be called using comma
SYNTAX: . class _ name{
/* css properties*/

NOTE: PRIORITY ORDER =====


{ “ ID > CLASS > TYPE/ELEMENT >UNIVERSAL “}
COMBINATOR SELECTOR

 Descendent selector(space)
 Child selector(>)
 Adjacent sibling selector(+)
 General sibling selector(~)
DESCENDENT SELECTOR

 A CSS selector can contain more than one simple


selector. Between the simple selector we can use
combinator
 Combines two selector are such that elements are
matched by second selector are selected if they
have ancestor.
 (parent,parents’s parent, parent’s parents’s parent)
 Selector utilities a descendents combinator are
called descendent selectors.
 Syntax: Selector1_Selector2{property declaration}
 Div p{ prop:val;}
CHILD SELECTOR(>)

 The child selector selects all the elements that are


the children of a specified element
 It is placed between 2 CSS selectors,matches only
those elements matched by second selector and
direct child.
 Syntax:
selector 1 > selector 2 { properties }
Ex:
Div>p{prop : val}
ADJACENT SIBLING SELECTOR

 The adjacent sibling selector is used to select an


element that is directly after another specific
element.
 Sibling elements must have the same parent
element, and "adjacent" means "immediately
following".

Syntax :
former_element + target_element {style
properties }
GENERAL SIBLING SELECTOR

 The general sibling selector selects


all elements that are next sibling of a
specified element.
 The general sibling combinator (~)
separates two selectors.

 Syntax :
former_element ~
target_element { style properties }
ATTRIBUTE SELECTOR

 Attribute provides extra information to the tag.


 In this attribute selector we are targeting the
elements based on attributes
 Selector[attribute]{
 property}:value
}
TYPES OF ATTRIBUTE
SELECTOR
1. [attr]: represents elements with an attribute
name of attr.

2.[attr=value]:Represents element with an


attribute name of attr whose value is exactly value.

3.[attr~=value]: Represents element with an


attribute name of attr whose value is a whitespace
seperated list of words, one of which is exactly
value.
PSEUDO CLASSES

A CSS pseudo-class is a keyword added to a


selector that specify a special state of the
selected element.
For Example: It can be used to
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Selector:pseudo-class{
property:value;
}
PSEUDO CLASSES

Dynamic pseudo Structural pseudo


classes classes
Anchor Pseudo- First-child
classes Last-child
Link Nth-child()
Visited
Active
Focus
Hover
PSUEDO CLASS SELECTOR

 a:hover MUST come after we mouse hover on it


 a:link and a:visited in the CSS definition in order to be effective.
 a:active MUST come after
The :first-child pseudo-class matches a specified element
that is the first child of another element.

The :last-child pseudo-class matches a specified element


that is the last child of another element.

The :nth-child(n) selector matches every element that is


the nth child of its parent.
n can be a number, a keyword (odd or even), or a formula
(like an + b).
PSEUDO ELEMENTS

 A CSS pseudo-element is used to style specified parts of


an element.

 For example, it can be used to:

• Style the first letter, or line, of an element


• Insert content before, or after, the content of an element

 selector::pseudo-element{
property:value;
}
PSEUDO ELEMENTS

:: first-line
:: first-letter
::before
::after
::marker
::selection
Selector Example Example description

::after p::after Insert something after the content of


each <p> element

::before p::before Insert something before the content of


each <p> element

::first-letter p::first-letter Selects the first letter of each <p>


element

::first-line p::first-line Selects the first line of each <p>


element

::marker ::marker Selects the markers of list items

::selection p::selection Selects the portion of an element that is


selected by a user
NOW WRITE THE DIFFERENCE
BETWEEN
PSEUDO CLASS AND PSEUDO
ELEMENT SELECTOR?!
PSEUDO CLASS V/S PSEUDO
ELEMENT

PSEUDO CLASS PSEUDO ELEMENT

selectors are selected by selectors are selected by

“:“ “ :: “
Pseudo-classes are used to Pseudo-elements are used to
target state. target specific parts of an
element.
TEXT PROPERTY

 Text formatting
 color
 Text-align
 Text-transform
 Text-shadow
 Text-decoration
 Letter-spacing
 Word-spacing
 Text-indention
BACKGROUND PROPERTY

 Background-image : url (“image.jpg”)


 Background-repeat : no-repeat/repeat-x/Y
 Background-size : cover/100%
 Background-Position : right/left/center
 Background-attachment : scroll/fixed
HEIGHT AND WIDTH
PROPERTY
 Max-width:px
 Max-height:px
 Min-width:px
 Min-height:px
 Width:px
 Height:px
FONT PROPERTY

 Font-size:large/small/medium
 Font-weight:bold/bolder/lighter/normal
 Font-style:italic
 Font-family:font styles
COLOR

 Color: #efefef;
 Color:rgb(255,255,0)
 Color:rgba(rgba)
GRADIENT:
GRADIENT:

 Linear-gradient(direction,color-stop1,color-stop2);
 Radial-gradient(shape size at position, start-color,
…,last-color);
BOX MODEL
BOX MODEL:

• The CSS box model is essentially a box that wraps


around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image
illustrates the box model:
• Content - The content of the box, where text and
images appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The
margin is transparent
PROPERTIES

 Margin-style
 Margin-top
 Margin-bottom
 Margin-left
 Margin-right
 Padding-style
 Padding-left
 Padding-right
 Padding-top
 Padding-bottom
 Border-style
 Border-color
 Border-width
 Border-radius
POSITION PROPERTY

 Static
 Relative
 Fixed
 Absolute
 Sticky
DISPLAY PROPERTIES

 Inline : Displays an element as an inline element


(like <span>). Any height and width properties will
have no effect
 block : Displays an element as a block element (like
<p>). It starts on a new line, and takes up the whole
width
 Inline-block : Displays an element as an inline-level
block container. The element itself is formatted as
an inline element, but you can apply height and
width values
 Flex : Displays an element as a block-level flex
container
FLEX PROPERTIES

 Flex-box properties
 Display : flex
 Flex-direction: row/column
 Flex-wrap: wrap/nowrap/wrap-reverse
 Justify-content: flex-start/flex-end/center/space-
around/space-between/baseline
 Align-items: flex-start/flex-end/center
FLEX-BOX
TRANSITION
Transition allows you to change property value.
TRANSITION PROPERTY

CSS transitions allows you to change property


values smoothly, over a given duration.
• Transition-property: The CSS property you want to
add
an effect to
• Transition-duration: The duration of the effect
• Transition-timing-function:
• Transition-delay : The transition-delay property
specifies a delay (in seconds) for the transition effect.
• Transition(shorthand property)
• transition: width 2s linear 1s
TRANSITION-TIMING-
FUNCTION
• ease - specifies a transition effect with a slow
start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the
same speed from start to end
• ease-in - specifies a transition effect with a
slow start
• ease-out - specifies a transition effect with a
slow end
• ease-in-out - specifies a transition effect with
a slow start and end
2D AND 3D
TRANSFORMS
Transforms allow you to move, rotate, scale, skew, element.
TRANSFORM PROPERTY

 The transform property applies a 2D or 3D transformation


to an element. This property allows you to rotate, scale,
move, skew, etc., elements.
 It is used to change behavior of an element

2D transform :
•translate()
•rotate()
•scaleX()
•scaleY()
•scale()
•skewX()
•skewY()
•skew()
3D transform :
•rotateX()
•rotateY()
•rotateZ()
DIFFERENCE
2D TRANSFORMS

1.translate()-moves an element from its current position.


2.rotate()-rotate an element clockwise/counter-clockwise according to
degree.
Using negative values will rotate the element counter-clockwise.
3.scale()- increases/decreases the size of an element.
4.scaleX()-increases or decreases the width of an element.
5.scaleY()- increases or decreases the height of an element.
6.skew()-skews an element along the X and Y-axis by the given angles.
7.skewX()-skews an element along the X-axis by the given angle.[degree
0-360]
8.skewY()-skews an element along the Y-axis by the given angle.
9.matrix()- 6 parameters
mathematical function

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
transform: matrix(1, -0.3, 0, 1, 0, 0);
3D TRANSFORMS

 rotateX()- rotates an element around its X-axis.


 rotateY()-rotates an element around its Y-axis.
 rotateZ()-rotates an element around its Z-axis.
ANIMATIONS

 CSS allows animation of HTML elements without using JavaScript

 An animation lets an element gradually change from one style to

another.

 You can change as many CSS properties you want, as many times

as you want.

 To use CSS animation, you must first specify some keyframes for

the animation.

 Keyframes hold what styles the element will have at certain times.
ANIMATIONS

•@keyframes
•animation-name
•animation-duration
•animation-delay
•animation-iteration-count
•animation-direction
•animation-timing-function
THE @KEYFRAMES RULE

 When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

 To get an animation to work, you must bind the animation to an element.


EXAMPLE :

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */


div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
•animation-name :Name of the animation
•animation-duration: This property defines how long an animation
should take to complete, If the animation-duration property is not specified,
no animation will occur, because the default value is 0s (0 seconds)
•animation-delay : Property specifies a delay for the start of an
animation.
•animation-iteration-count : property specifies the number of
times an animation should run.
•animation-direction : property specifies whether an animation
should be played forwards, backwards or in alternate cycles.
•animation-timing-function: property specifies the speed curve of
the animation
ANIMATION-DIRECTION

•normal - The animation is played as normal


(forwards). This is default
•reverse - The animation is played in reverse
direction (backwards)
•alternate - The animation is played forwards
first, then backwards
•alternate-reverse - The animation is played
backwards first, then forwards
MEDIA QUERIES
 Media query is a CSS technique introduced in CSS3.

 It uses the @media rule to include a block of CSS properties only if a


certain condition is true.

 In this example, the only keyword is used to target only


screens.

 Example
 If the browser window is 600px or smaller, the background color will be
lightblue:
 @media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

You might also like