TRAINER
CSS
CSS stands for Cascading Style Sheet.
Used to give styling to the web pages which is structured by the HTML
language.
There are three ways in CSS to Style the Web pages
1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline CSS: Inline CSS code is written in the opening tag of the HTML
element by using style attribute.
Syntax: <p style=" "> </p>
2. Internal CSS: Internal CSS code is written in the head section of an HTML
element using <style> tag.
Syntax: <head>
<style>
tag_name{
property: value;
}
<style>
</head>
3. External CSS: External CSS styling can be done by creating a external CSS
file with file_name.css extention and providing the link between that CSS
file to HTML file by <link> tag in the head section of HTML element.
Syntax: <head>
<link rel="stylesheet" href=" file_name.css">
</head>
NOTE: The first priority is inline CSS
But the priorities of the Internal and External CSS varies accordingly depending
on the declared position
TRAINER
if, <link rel="stylesheet href="index.css">
<style> </style>
Here, the first priority is for Internal CSS.
if, <style> </style>
<link rel="stylesheet href="index.css">
Here, the first priority is for External CSS.
SELECTOR
Selectors are used to select the particular HTML element and to style
them.
There are five types of Selectors
1. Simple Selectors
2. Combinator Selectors
3. Attribute Selectors
4. Pseudo Element Selectors.
5. Pseudo Classes Selectors.
Simple Selectors
Simple selectors style the HTML element in five ways:
1. Id Selector.
2. Class Selector.
3. Tagname.
4. Groupname.
5. Universe.
Id selectors:
Id selector targets only individual element in the HTML
document.
Prefix symbol used for id selector is # (hash)
Example: #demo{
TRAINER
color: red;
background: yellow;
}
Class Selector
Class selector targets multiple elements in the HTML document.
Prefix symbol used for id selector is . (dot)
Example: .test{
color: red;
background: yellow;
}
Tagname Selector
Tagname selector targets the HTML elements by tag name.
There is no symbol used in tagname selectors.
Example: h1{
color: magenta;
background: green;
}
h2{
color: red;
background: black;
}
h3{
color: yellow;
background: orange;
}
Grouping Selector
Groupname selector targets a group of HTML elements by
tagname separated by commas.
Example: p, div, h4{
TRAINER
color: magenta;
background: green;
}
Universal Selector
Universal Selectors targets every HMTL element.
The symbol of Universal Selector is *
There is no selector is declared in css.
Example: *{
color: yellow;
background: magenta;
}
Combinator Selector
Combinator Selectors are used to style the combination of HTML
elements.
There are four Combinator Selectors:
1. Descendent Selectors
2. Child Selectors
3. Adjacent Sibling Selectors
4. General Sibling Selectors
1. Descendent Selectors: This Selector targets both direct and indirect children
of a parent tag. The symbol is (space)
Syntax: parent_tag child_tag{property: value;}
TRAINER
2. Child Selectors: This Selector targets the only the direct children of the
parent tag. The symbol is > (greater than)
Syntax: parent_tag > child_tag{property: value;}
3. Adjacent Selectors: This Selector targets the element which is the first
sibling of the targeted HTML tag or element.
(or)
This Selector targets the element which is exactly adjacent to the targeted
HTML tag or element.
The symbol is + (plus)
Syntax: parent_tag + target_tag{property: value;}
4. General Sibling Selectors: This Selector targets all the siblings of the target
HTML tag or element.
(or)
This Selector targets all the adjacent tags of the target HTML tag or element.
The symbol is ~ (tilde)
Syntax: parent_tag ~ target_tag{property: value;}
Attribute Selector: Attribute Selectors are used to style the HTML element by
targeting the respective attributes and with their values.
Types of Attribute Selector:
1. tag_name[attribute_name]: Represents elements with an attribute name
of attribute_name.
TRAINER
2. tag_name [ attribute_name= “value” ]: Represents element with an
attribute name of attribute_name whose value is exactly value.
Pseudo Element Selectors.
Pseudo Elements targets the content of the HTML element by the
following ways:
1. First Letter
2. First Line
3. Before
4. After
5. Selection
6. Marker
Each pseudo element selectors is declared with the double colon : :
First Letter: The first letter styles the very first letter of the content in the
targeted HTML element.
Example: p : : first-letter{
font-size: 30px;
color: black;
}
First Line: The first line styles the very first line of the content in the targeted
HTML element.
Example: p : : first-line{
background-color: black;
color: white;
}
Before: The before pseudo element is used to place the specific content before
the targeted HTML element.
Example: p : : before{
content: “&phone”;
background-color: black;
TRAINER
color: white;
}
After: The after pseudo element is used to place the specific content after the
targeted HTML element.
Example: p : : after{
content: “Thank You”;
color: blue;
}
Selection: The selection pseudo element is used to style the content when the
cursor is dragged on the content (when the content is selected) on the targeted
HTML element.
Also copying the text content from the user can also be disabled, by using the
property user-select: none.
Example: p : : selection{
background-color: pink;
color: magenta;
}
Marker: Marker pseudo element is used to style the lists in the HTML
document.
Marker is only used to style the list type not the content.
Declaration of selector is not mandatory here.
Background color will not work for Marker.
Example: li : : marker{
color: red;
font-size: 30px;
}
(or)
: : marker{
color: red;
font-size: 30px;
}
TRAINER
Pseudo Classes
There are three types of Pseudo Classes.
1. Dynamic Pseudo Classes.
2. User Interface Pseudo Classes.
Dynamic Pseudo Classes
Link
Visited
Hover
Active
Focus
User Interface Pseudo Classes
Enabled
Disabled
Checked
Dynamic Pseudo Classes
Pseudo Class Selector specifies the special state of the content.
The Pseudo Class Selector are:
1. Link
2. Visited
3. Hover
4. Active
o Each dynamic pseudo class selector is declared with the single colon :
o Link, Visited only applicable for anchor tag.
o Link is used to style the unvisited link
o Link doesn’t style the already visited link.
o Active applies the style at the time of click event.
o Hover is applicable for all the HTML elements.
o While using all the Link, Visited, Hover and Active selectors. Hover should be
declared after Link and Visited. Along with that the Active should be declared
after Hover, because to make the elements effective.
TRAINER
Example:
a : link {
color: aqua;
background-color : red;
}
a : visited {
color : green;
}
a : hover {
color : yellow;
}
a : active {
color : chocolate;
}
User Interface Pseudo Classes: The UI pseudo classes is used to style the HTML
element in the case of user input.
Enabled: The enabled pseudo class enables the properties to the user input
field with the specific style only if the field is available to take user input.
Example: input : enabled{
color: blueviolet;
background-color: aqua;
}
Disabled: The disabled pseudo class styles with the specific properties to the
user for which the input type is disabled.
Example: input : disabled{
color:white;
background-color: gray;
}
Checked: The checked pseudo class styles with the outline property to radio
and checkbox.
TRAINER
Example: input : checked{
outline: 2px solid blue;
}
BOX Model
Box Model is essentially a box that wraps around every HTML
element. Box Model is used to design and layout.
The CSS Box Model consists of Margin, Border, Padding and the actual Content.
Content: It is the content of the HTML element.
Padding: It is the space after the content.
Border: It is the Border of the HTML element.
Margin: It is the space after the Border of an HTML element.
Padding and Margin allow up to four values.
Syntax: padding: 10px ;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
Text Properties
Formatting text properties:
color- changes the text color
Example - color: red;
text-align- Horizontal alignment of the text (here we have right, left, center,
justify).
Example- text-align: center;
text-transform- converts the text-letter format(UPPERCASE, lowercase,
Capitalize).
Example- text-transform: capitalize;
TRAINER
text-shadow- it allows 4 values they are x-direction y-direction opacity and
color
Example- text-shadow: 2px 2px 5px red;
text-decoration- underline, overline, line-through
Example- text-decoration: none;
letter-spacing- to get the space between letters of a text we use it
Example- letter-spacing:2px;
word-spacing- to get the space between words of a text we use it
Example- word-spacing:5px;
text-indent- it'll be saying from where the text should start.
Example- text-indent:2px;
Background Styling Properties
background-color Specifies the background color to be used.
background-image Specifies ONE or MORE background images to be
used.
background-image: url('paper.gif');
background-image: url('img_tree.gif'), url('paper.gif');
background-image: conic-gradient(red, yellow, green);
background-image: linear-gradient(red, yellow, blue);
background-image: radial-gradient(red, green, blue);
background-image: repeating-conic-gradient(red 10%, yellow 20%);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
background-position Specifies the position of the background images.
background-position: left top;
background-position: left bottom;
background-position: right top;
background-position: right bottom;
background-position: top;
background-position: bottom;
TRAINER
background-position: left;
background-position: right;
background-position: 10% 40%;
background-position: 50px 100px;
background-size Specifies the size of the background images.
background-size: auto;
background-size: contain;
background-size: cover;
background-size: 50%;
background-size: 30px;
background-size: 60px;
background-repeat Specifies how to repeat the background images.
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;
background-origin Specifies the positioning area of the background
images
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-clip Specifies the painting area of the background imag
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-attachment Specifies whether the background images are fixed
or scrolls with the rest of the page
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element's contents
TRAINER
CSS GRADIENTS
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
Linear Gradients
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: to top, to bottom, to left, to right,
and in degree:
0deg ->to top
90deg ->to right
180deg ->to bottom
270deg ->to left
Repeating a linear-gradient
The repeating-linear-gradient()
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
Radial Gradient
background-image: radial-gradient(shape size at position, start-color, ..., last-
color);
background-image: radial-gradient(circle, red, yellow, green);
shape:circle, ellipse
The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
background-image: radial-gradient(closest-side at 10% 15%, red, yellow, black);
Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
TRAINER
Conic Gradient With Specified From Angle
background-image: conic-gradient(red, yellow, green);
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
The [from angle] specifies an angle that the entire conic gradient is rotated by.
The following example shows a conic gradient with a from angle of 90deg:
background-image: conic-gradient(from 90deg, red, yellow, green);
background-image: conic-gradient(at 60% 45%, red, yellow, green);
Repeating a Conic Gradient
The repeating-conic-gradient() function is used to repeat conic gradients:
background-image: repeating-conic-gradient(red 10%, yellow 20%);
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg
20deg, blue 20deg 30deg);
Height and Width properties
The CSS height and width properties are used to set the height and width of
an element.
The height and width properties do not include padding, borders, or margins.
It sets the height/width of the area inside the padding, border, and margin of
the element.
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
The CSS height and width properties are:
Height
TRAINER
Width
Max-height
Max-width
Min-height
Min-width
Max-height
Sets the maximum height of an element.
If the content is larger than the maximum height, it will overflow. So to
handle the content overflow we go for overflow property.
If the content is smaller than the maximum height, the max-height property
has no effect.
Note: This prevents the value of the height property from becoming larger
than max-height. The value of the max-height property overrides the height
property.
Max-width
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change
the height of the element.
If the content is smaller than the maximum width, the max-width property
has no effect.
Note: This prevents the value of the width property from becoming larger
than max-width. The value of the max-width property overrides the width
property.
When the width exceeds the view port of the browser the horizontal scroll
bar is added.
Using max-width instead, in this situation, will improve the browser's
handling of small windows.
TRAINER
Min-height
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will
be applied.
If the content is larger than the minimum height, the min-height property
has no effect.
Note: This prevents the value of the height property from becoming smaller
than min-height.
Min-width
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be
applied.
It must be included with the property display : inline-block
If the content is larger than the minimum width, the min-width property has
no effect.
Note: This prevents the value of the width property from becoming smaller
than min-width.
Transition Properties
transition-property: Specifies the name of the CSS property to which the
transition is applied.
transition-duration: Specifies the duration of the transition process form
the old value to the new value.
transition-timing-function: Describes how the intermediate values used
during a transition will be calculated.
transition-delay: Defines when the transition will start. It allows a
transition to begin execution some period of time from when it is applied.
TRAINER
Transform Properties
The transform property applies a 2D or 3D transformation to an element. This
property allows you to rotate, scale, move, skew elements.
rotate and skew should be declared in terms of degrees.
scale should be declared in terms of integer.
Syntax: transform: rotate(30deg);
CSS Animation
CSS Animation is used to animate HTML elements from one style to another style.
Without java script we can give 5% and 10% of functionality to the web pages through CSS
animation.
We have following animation property:
animation-name: it is an identifier which means name of the animation.
animation-duration: Specifies the time in seconds to perform the animation only till
that specified period of time.
animation-iteration-count: Specifies the number of times the animation should
perform.
animation-timing-function: Specifies the mode of transform in animation. The values
are ease-in, ease-out, ease-in-out.
We can animate the HTML element through keyframes
Syntax: @keyframes animation_name{
0%{ property:value;}
25%{ property:value;}
50%{ property:value;}
100%{ property:value;}
}
TRAINER
This specifies that at 0% at the given animation-duration the particular task should be
performed, at 25% at the given animation-duration the particular task should be performed,
so on.
Flex and Grid
The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.
A Flexible Layout must have a parent element with the display property set to flex.
Ex: div {
display: flex;
}
The flex-container properties are
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction: column, row, column-reverse, row-reverse
flex-wrap: wrap, nowrap, wrap-reverse
flex-flow: row wrap
justify-content: center, flex-start, flex-end, space-around, space-between
align-items: center, flex-start, flex-end, stretch, baseline.
align-content: space-between, space-around, stretch, center, flex-start, flex-end.
TRAINER
