Scribd
Upload
8 views

Cascading Style Sheet (CSS) Notes (1)

Uploaded by

smartlenin348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Cascading Style Sheet (CSS) Notes (1)

Uploaded by

smartlenin348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 67

Css Notes

WWW.PENTAGONSPACE.IN
Cascading Style Sheet (CSS)
It is a style sheet language which is used to describe the looks and formatting of HTML
document. CSS describes how HTML elements should be displayed.

We can apply css to html document/element


in 3 ways
 Inline CSS
 Internal CSS
 External CSS

Inline CSS
Providing css inside the tag by using “style “ attribute.

Syntax:
<tagname style=”property: value”;>
Example:

Output:

Internal CSS

[email protected] 1
Providing css inside the head section using <style> tag.
Syntax:
<head>
<style>
Selector
{
Property: value;
}
</style>
</head>

Example:

Output:

External CSS
It is a separate css file that can be accessed by creating a link within the head section
of the html document.
Syntax:
<head>

[email protected] 2
<link rel=”stylesheet” href=”myexample.css”>
</head>

CSS Selectors
A css selector selects the html elements to style.

Types of CSS Selectors


 Simple Selector
 ID Selector
 Class Selector
 Universal Selector
 Grouping Selector
 Pseudo Class Selector

Simple Selector/Element Selector


Element selector selects HTML elements based on the tag name.

Example:

Output:

[email protected] 3
ID Selector
The id selector uses the id attribute of an html element to select a specific element
The “ID” of an element is unique with in a page to select an element with a specific
“id” we must use the character “#” followed by id value of the element.

Example:

Output:

Class Selector
This selector is used to select an html element with specific class attribute. To select
an element with class, we must use ‘.’ Character followed by the class value.
Example:

[email protected] 4
Output:

Universal Selector
used to select all html element of the html document. For universal selector we have
to use ‘*’ character
Example:

Output:

[email protected] 5
Grouping Selector
Grouping selector selects multiple html elements with the same style definition
To group selector, separate each selector with a comma

Example:

Output:

Pseudo Class Selector


Pseudo class can be defined as a keyword which is combined to a selector the defines
special state of the selected elements

Syntax:
Selector: pseudo-class {
property: value;
}

Most commonly used pseudo classes


 : active
Used to add style to an active element
 : hover

[email protected] 6
Add effect when user moves cursor on element
 : link
Add style to unvisited link
 : visited
Add style to visited link

Example:

CSS Properties
1. Color properties:
The color property in css is used to set the color of html element. Mainly this
property is used to set background color, font color, border color and other decorative
effects.
We can define the color of an element by using the following ways
 RGB Format
 RGBA Format
 Hexadecimal Format
 HSL
 HSLA
 Built in colors

RGB Format:

[email protected] 7
RGB format is the short form of ‘RED GREEN and BLUE’.
That is used to define the color by specifying the values of R,G,B that are in the range
of 0 to 255.
Syntax:
Color: rgb (R,G,B);
Example:

Output:

RGBA Format:
It is almost similar to RGB format except that RGBA contains A(alpha),that
specifies the opacity/transparency.
The value of alpha is in the range 0.0 to 1.0
0.0  fully transparent
1.0 not at all transparent
Syntax:
rgba(R,G,B,A);
Example:

[email protected] 8
Output:

Hexa decimal Notation:


Hexadecimal can be defined as a 6-digit color representation. This notation starts with
# symbol, followed by 6 characters’ ranges from 0 to F.
The first two digits represent red(RR)color value next two digits represent green(GG),
and last two digits represent blue(BB) color values.

Syntax:
#RRGGBB (0-F)
Example:

[email protected] 9
Output:

HSL:
It is a short form of Hue, Saturation and Lightness
Hue: It can be defined as the degree on the color wheel from 0 to 360 (hue specifies color)
0  red
120green
240blue

Saturation: It takes value in percentage


100% fully saturated (i.e no shades of gray)
50% 50% gray but color still visible
0% fully unsaturated (completely gray, color is invisible)

Lightness: It defines light that we want to provide in %


0% black (there is no light)
50% neither dark nor light
100% white(full lightness)

Syntax:
Color : hsl (H,S,L);

HSLA:
It is similar to HSL property, expect that it contain alpha. Alpha specifies
transparency of color.
Value of alpha in the range 0.0 to 1.0
0.0fully transparent 1.0not at all transparent

[email protected] 10
Syntax:
Color : hsla(H,S,L,A);

2. CSS Background:
CSS background property is used to define the background effect on
element
The main CSS background properties are
1. Background-color
2. Background-image
3. Background-repeat
4. Background-attachment
5. Background-position

CSS background-color:
The background-color property is used to specify the background color of the
element

Syntax:
Background-color: #FF0000;
Example:

Output:

[email protected] 11
CSS background-image:
Background image property is used to set an image as a background of an element
By default
 The image covers the entire element, we have to set property using margin-
left property
Example: margin-left:100px;
 Sometimes images are repeatedly displayed in page to overcome this we have
to use background-repeat property.
Syntax: background-image : url(“path”);

CSS background-repeat:
By default, the background-image property repeats the background image
horizontally and vertically.
There are 3 values related to background-repeat
1. repeat-x;
2. repeat-y;
3. no-repeat;

repeat-x:
This value is used to repeat the element in horizontal direction
Background-repeat: repeat-x;
repeat-y:
This value is used to repeat the element in vertically direction.
Background-repeat: repeat-y;
no-repeat:
This value is used to avoid the repetition of image

[email protected] 12
Background-repeat: no-repeat;

CSS background-attachment:
Background-attachment property is used to specify if the background image is
fixed or scroll with the rest of the page.
If background-attachment property is fixed, then image will not moving
during scrolling in browser.
Syntax:
Background-attachment: fixed;

CSS background-position:
Background-position property used to define the initial position of the
background image.
Default position is left top
We can set the position using following values
 center
 top
 top right
 top left
 left
 right
 bottom
 left bottom
 right bottom
CSS background-size:
Used to set the size of the background image using, values or keywords
Ex for values: 200px 300px;
Horizontal Vertical
(width) (height)
Keywords: cover  used to resize the bg image to cover the entire container.
Example:
Background-size: cover;

[email protected] 13
3. CSS Border:
CSS border property is a shorthand property used to set the border on an
element.
CSS border property used to specify the style, color and size of the border of
an element.
The CSS border properties are
1. Border-style
2. Border-width
3. Border-color
4. Border-radius

border-style:
border-style property is used to specify the border type to display.
There are some border style values which are can use with border-style values which
we can use with border-style property to define border.
 Dotted  It is used to define dotted border .
 Dashed  It is used to define dashed border.
 Solid  It is used to define solid border.
 Double It define two border with the same border-width value.
 Groove It define 3D grooved border, effect is generated according to
border-color value.
 RidgeIt defines a 3D ridged border. Effect is generated according to border-
color value.
 InsetIt defines a 3D inset border. Effect is generated according to border-
color value.
 OutsetIt defines a 3D outset border. Effect is generated according to border-
color value.
 NoneIt doesn’t define any border
 Hiddenborder is invisible.

Example:

[email protected] 14
Output:

[email protected] 15
border-width:
The border-width property used to set the border size / width.
We can define width in 2 ways
1. Set width in pixel
Example: 2pxeffects on all sides
2px 4px
Horizontal Vertical
2. Using predefined values
thin
thick
medium
Note:
We cannot use border-width property alone. We can use border-width property along with
border style otherwise. Border-width property will not work.

Example:

[email protected] 16
Output:

border-color:
border-color property used to set the color of the border.
we can set border color in 3 ways.
1. Using built in color  border-color : red;
2. Using RGB border-color : rgb(255,0,0);
3. Using Hexadecimal: border-color: #FF0000;
If then border color is not set it is inherited from the text color (color property) of
the element.

[email protected] 17
Note: we cannot use border-color property alone .we can use this property along with border-
style property. Otherwise border-color property will not work.

border-radius:
This property sets the rounder border and provides the rounded corners around an
element.
It defines the radius of the corners.
Border radius property is the shorthand for
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

Example:
1. border-radius :20px;
It will set all corners to same value.

2. border-radius :20% 15%;


first valuetop-left and bottom-right corner
second valuetop-right and bottom-left corner

[email protected] 18
3. border-radius :10% 20% 15%;
1st value top left corner
2nd valuetop-right and bottom-left corner
3rd valuebottom-right corner

4. border-radius :10% 20% 15% 40%;

[email protected] 19
1st value top left corner
2nd valuetop-right corner
3rd valuebottom-right corner
4th valuebottom-left corner

CSS outline:
Outline property is just like CSS border property. It provides a extra border around an
element.
Syntax:
Outline : outline-width outline-style outline-color;

Difference between border and outline


 It is not possible to apply different outline-width, style, color for the four side of an
element.
But in border: we can apply the different values for all four side of an element.
 It is possible to use outline-width, style, color property alone
But in border it is not possible to use those properties alone
Example: outline : 2px solid green;

[email protected] 20
Outline-offset:
Outline-offset property used to create a distance between outline and border.
Syntax:
Outline-offset : value;
Example:
Outline-offset:2px;

CSS BOX MODEL


The CSS box model is a box (rectangular) that wraps around HTML element. It consists of
margins, borders, padding and actual content.
 CSS box model allows us to add border around elements and to define space between
elements

 Content: The content of the box, where text and images appear.
 Border: A border that goes around the padding and content.
 Padding: A space between the content and border.
 Margin: A space around the border distance between border and viewport.

CSS padding:

[email protected] 21
CSS padding property used to define the space between the element content and the
element border.
 We can change the top, bottom, left, right padding using
1. Padding-left to set left padding of element
2. padding-rightto set right padding of element
3. padding-topto set top padding of element
4. padding-bottomto set bottom padding of element.
Example:
Padding-left: 10px;
Padding-top: 15px;
Padding-right:20px;
Padding-bottom:5px;
Also we can change all properties at once by using shorthand padding property.
Example: padding :20px;

CSS Margin:
CSS margin property is used to define the space around the element.
It is transparent and does not have any background color
We can change left right top bottom margin independently using separate properties
1. margin-left  to set left margin
2. margin-rightto set right margin
3. margin-topto set top margin
4. margin-bottomto set bottom margin

CSS BOX MODEL


It specifies how the element is displayed every element has a default display value
according to its nature like.
1. Inline
2. Block level
To set display behaviour we use display property
Syntax:
Display: value;

[email protected] 22
CSS display values
1. Inline
2. Inline-block
3. Block
4. None
5. Flex

Inline:
The inline elements take the required width only. It does not force the line break.
Any height and width properties will have no effect.
Example:

Output:

Inline-block:

[email protected] 23
The inline-block element is similar to inline element but the difference is that we are
able to set width and height.
Example:

Output:

block:
block elements take full width available they make line break before and after them.
They will start with new line.

Example:

[email protected] 24
Output:

none:
The none value completely removes the elements from the page. It will not take any
space.
Example:

[email protected] 25
Output:

Flex:
Whenever we need to display multiple divisions one next to the other we can use
display: flex option.
Syntax:
Display: flex;
Example:

[email protected] 26
[email protected] 27
Output:

CSS Font
CSS font property is used to control the looks of text. Using font property, we can
change text size color, style and more
These are some important font attributes
1. CSS Font Color

[email protected] 28
2. CSS Font Family
3. CSS Font Size
4. CSS Font Style
5. CSS Font Variant
6. CSS Font Weight

CSS Font Color:


It is used to change the color the color of the text.
By a color name
By hexadecimal value
By RGB
Example:

Output:

CSS Font Family:


CSS font family can be divided into two types.

[email protected] 29
1. Generic Family: It includes serif, sans-serif, and Monospace.
2. Font Family: It specifies the font family name like Arial, New times Roman
etc.

Syntax:
Font-family: value;
Example:
Font-family: serif;
Font-family: sans-serif;
CSS Font Size:
CSS Font Size property is used to change the size of the font.
Syntax:
Font-family: value;
Value for font size
1. XX-Small
2. X-Small
3. Small
4. Medium
5. Large
6. X-large
7. XX-large
8. Smaller
9. Larger
10. Size in pixel or % Ex: 2px, 10%

CSS Font Style:


CSS font Style property defines what type of front we want to display it may be italic,
oblique or normal.
Syntax:
Font-style: value;
Value for font style
1. Italic

[email protected] 30
2. Oblique
3. Normal

CSS Font Variant:


Font variant property specifies whether or not a text should be displayed in small-caps
font.
Syntax:
Font-variant: value;
Value for font variant
1. Small-caps
2. Normal

Note: small-caps text is in small font compare to normal text (capital text)

CSS Font Weight:


CSS font weight property defines the weight of font and specify that how bold a font
is.
Syntax:
Font-weight: value;
Value for font weight
1. normal
2. bold
3. bolder
4. lighter
5. 100 to 900(numbers)

CSS TEXT
Text alignment:
The text-align property is used to set the horizontal alignment of a text.
Syntax:
Text-align: value;

[email protected] 31
Value for text alignment
1. left
2. Right
3. center
4. justify
Justify  each line is stretched so the every line has equal width
Left and right margins are straight

Example:
Text-align: left;
Right;
Center;
div{ text-align: justify;}

Text Align Last:


The text-align-last property Specifies how to align the last line of the text.
Syntax:
Text-align-last: value;
Value for text align last
1. Right
2. center
3. justify

Example:
Text-align-last: center;

CSS TEXT DECORATION


It is used to decorate the contents of the text.
It adds lines under, above, through the text. This is the shorthand for
1. text-decoration-line
2. text-decoration-color

[email protected] 32
3. text-decoration-style

Syntax:
Text-decoration: text-decoration-line text-decoration-color text-decoration-style;

Text-decoration-line:
Used to set the kind of text-decoration like over line, underline, or line-through
It can be used to add combination of lines.
Syntax:
Text-decoration-line: value;
Value for text decoration line
1. underline
2. line-through
3. overline
4. overline under line line-through

Example:

Output:

[email protected] 33
Text-decoration-style:
This property is used to set the style of the line.
Syntax:
Text-decoration-style: value;
Value for text decoration style
1. solid
2. dotted
3. wavy
4. double
5. dashed

Example:

[email protected] 34
Output:

Text-decoration-color:
This property is used to provide color to the decoration.
Its value is any color in valid format.
Syntax:
Text-decoration-color: green;
Example:

Output:

[email protected] 35
CSS TEXT TRANSFORM
This property allows to change the case of the text. It is used to control the text
capitalization.
Syntax:
Text-transform: value;
Value for text transform
1. uppercase
2. lowercase
3. capitalize
4. none

Uppercase:
It transforms all the characters of the word into uppercase.
Example:

Output:

[email protected] 36
Lowercase:
It transforms all characters of the word into lowercase.
Example:

Output:

Capitalize:
It transforms the first character of each word to uppercase. It will not capitalize the
first letter after the number.
Example:

Output:

[email protected] 37
none:
This property adds shadow to the text.

Text-Shadow:
This property adds shadow to the text.
Syntax:
h shadowIt specifies position of the horizontal shadow. It allows negative value.
V shadowIt specifies position of the vertical shadow. It does not allows negative
values

Example:

Output:

Text-indent:
This property sets the indentation of the first line in a block of text. It specifies the
amount of the first line in a block of text.
It specifies the amount of horizontal space that puts before the lines of text.
Syntax:
Text-indent: value(length);

[email protected] 38
Example:

Output:

Letter-spacing:
This property used to control the space between every letter inside the block of text.

Syntax:
Letter-spacing: value;
Example:

Output:

[email protected] 39
Line-height:
This property is used to define the space between the lines.
Default height is 110% to 120%
Syntax:
Line-height: value;
Example:

Output:

Word-Spacing:
This property is used to control the space between the words.
Syntax:
Word-spacing: value;
Value for word spacing
1. normal
2. length

[email protected] 40
Example:

Output:

CSS Position
Position property is used to set position of an element. We can position an element
using top, bottom, left, and right properties, but these properties can be used only after
position property is set first.
We can’t use margin along with position property

Syntax:
Position: value;
Value for position
1. static
2. fixed
3. relative

[email protected] 41
4. absolute

Static position:
By default, all the web elements are positioned static.
Drawback:
When we use position static then we cannot apply top, bottom, left and right properties
Syntax:
position: static;
Example:

Output:

Fixed position:
If the position is fixed, then the web element will be fixed on the window.
No matter whether we scroll or do anything the element will always be visible on the
window.
When the position is fixed then we can apply top, bottom, left and right properties to
that web elements

[email protected] 42
Syntax:
position: fixed;
Example:

Output:

Absolute position:

[email protected] 43
If the position is absolute, then the element will be relative to its first positioned
ancestor element or parent element.
When the position is absolute we can apply top, bottom, left and right properties
Syntax:
position: absolute;
Example:

Output:

[email protected] 44
Relative position:
If the position is relative, then the element will be relative to its original position.
When the position is relative we can apply top, bottom, left and right properties.
Syntax:
position: relative;
Example:

[email protected] 45
[email protected] 46
Output:

CSS Overflow
Overflow property specifies how to handle the content when its overflow its block
level
container.
It specifies weather to clip the content goes out of the frame/block.
Syntax:
Overflow: value;

[email protected] 47
Values:
1. visible: Default. The overflow is not clipped. The content renders outside the
element box.
2. Hidden: The overflow is clipped and the rest of the content will be invisible.
3. Scroll: The overflow is clipped. And scrollbar is added to see the rest of the
content.
4. Auto: Similar to scroll, but it adds scrollbar only when necessary.

Example: auto

Output:

Example: Visible

[email protected] 48
Output:

Example: hidden

[email protected] 49
Output:

Example: scroll

Output:

Difference between width and Max-width


Width: To define the horizontal size of the border/element. It will not handle small windows.
Max-Width: It will handle the small window without effecting on element.

CSS Float Property

[email protected] 50
This property is used to push an element to the left or right side and allowing other
elements to wrap around it.
It is generally used with image and layouts.
Syntax:
Float: value;

Values:
1. None
2. Left
3. Right
4. Initial

Example:

[email protected] 51
Output:

CSS Gradient
It is used to display smooth transitions between two or more colors. It is mainly used to set
the background image

[email protected] 52
Types of Gradient
1. Linear-gradient
2. Radial-gradient
3. Conic-gradient
Linear-gradient:
To set linear gradient we have to use more than one color.
Syntax:
Background-image: linear-gradient (direction, color1, color2,……..);
Direction is optional. Default direction top to bottom
Example:

Output:

Example: Mentioning the direction

[email protected] 53
Output:

Example: Repeating - Linear – gradient

Output:

[email protected] 54
Example: diagonal direction

Output:

Radial-gradient:
In radial gradient colours are defined by center.
Syntax:
Background-image: radial-gradient([shape], color1, color2, ………………);

By default shape is ellipse

Example:

[email protected] 55
Output:

Example: Circle Shape

Output:

Example: repeating-radial-gradient

[email protected] 56
Output:

Example: Gradient for body

Output:

[email protected] 57
Conic-gradient:
In conic gradient color transition rotates around the centre point.
Syntax:
Background-image: conic-gradient ([from angle], [at angle] color1, color2,
………………….);
Example:

Output:

[email protected] 58
Example: Using border radius

Output:

Example: Using angles

[email protected] 59
Output:

Example: Repeating conic-gradient for body

Output:

[email protected] 60
TRANSITION PROPERTY
Transition property are effects that are added to change the element from one style to
another style.
For transition property we have to specify two things
1. We have to specify the property on which we want to add effect
2. We have to specify the time duration for transition effect.

Example:

[email protected] 61
Output:

Example: For image

Output:

[email protected] 62
Example: For button

Output:

@KEY FRAMES RULES


@key frame used to specify the animation that means we can gradually change the
element from one style to another style.
To specify the state or style we have to use. Keywords (key frame selector) “from”
and “to” or we can use number in %.
0% beginning of the animation
100% animation is complete
Note: for animation, along with @key frames we have to use few properties
1. Animation-name

[email protected] 63
2. Animation-duration

Syntax:
@Key frames animation_name{
Keyframe_selector{css style;}
}
Example:

Output:

Example:

[email protected] 64
Output:

Example: For moving box/element.

Output:

[email protected] 65
Example: To reverse direction

Output:

[email protected] 66

You might also like