JSP Trainer
CSS
CSS stands for Cascading Style Sheet.
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>
JSP Trainer
NOTE: The first priority is inline CSS
But the priorities of the Internal and External CSS varies accordingly depending
on the declared position
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.
Simple 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{
JSP 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.
Example: p, div, h4{
color: magenta;
JSP Trainer
background: green;
}
Universal Selector
Universal Selectors targets the un-targetted properties of every
HMTL element.
The symbol of Universal Selector is *
There is no selector is declared in css.
Example: *{
color: yellow;
background: magenta;
}
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;
}
JSP Trainer
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;
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.
JSP Trainer
Example: li : : marker{
color: red;
font-size: 30px;
}
(or)
: : marker{
color: red;
font-size: 30px;
}
Pseudo Classes
Link
Visited
Hover
Active
Focus
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.
Example:
a : link {
color: aqua;
background-color : red;
}
a : visited {
JSP Trainer
color : green;
}
a : hover {
color : yellow;
}
a : active {
color : chocolate;
}
a : focus {
color : magenta;
}
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 (T,R,B,L)
padding: 10px (T,B) 20px (L,R);
padding: 10px (T) 20px (L,R) 30px(B) ;
padding: 10px (T) 20px (R) 30px (B) 40px (L) ;
Text Properties
JSP Trainer
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;
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);
JSP Trainer
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;
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;
JSP Trainer
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.
CSS GRADIENTS
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Linear Gradients
background-image: linear-gradient(direction, color1, color2, ...);
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, start-color, ..., last-color);
background-image: radial-gradient(circle, red, yellow, green);
shape:circle, ellipse.
background-image: radial-gradient(closest-side at 10% 15%, red, yellow, black);
JSP Trainer
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%);
Position Properties
position:relative;
position:absolute;
position:fixed;
position:sticky;
position:static; (Default value)
Display Properties
display:flex;
display:block;
display:inline;
display:inline-block;
display:none
Flex
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
justify-content
align-items
flex-direction: column, row, column-reverse, row-reverse
flex-wrap: wrap, nowrap, wrap-reverse.
justify-content: center, flex-start, flex-end, space-around, space-between
JSP Trainer
align-items: center, flex-start, flex-end, stretch, baseline.
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.
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);
JSP Trainer
