Cascading Style Sheet
Moti Lal Kumar
Associate Staff Engineer | Java | Spring Boot | Microservices | Hibernate | Jpa | Rest API | Angular | SQL | AWS | DSA | Kafka
Cascading Styles Sheet
==========================================================
1.Styles are a set of attributes?defined for HTML elements
to make them more interactive & responsive.
2. Styles can be defined for HTML elements by using following techniques:
a)inline styles
b)embeded styles
c)css
a)inline style:-
In this technique the styles are defined for every element individually
by using a style attribute. These styles are not accessible to other elements.
syntax:-
<h2 style="background-color:blue; color:white;text-align:center">
welcome
</h>
b)embeded styles:-
In this technique the styles are defined within page by usnig a
<style> element. This styles are accessible to
other elements in the page.
However you cannot access the styles from other pages.
Syntax:-
<head>
<style>
h2{
background-color:darkcyan;
color:white;
text-align:center;
}
</style>
<head>
<body>
<h2>HTML</h2>
</body>
**How we can use external file in css??
3)css (cascade style sheet):-
1.In this technique the styles are defined in a separate style sheet so
that we can access the styles and use in any page.
2.style sheets will have the extension ".css"
?and MIME type "text/css"
3.css will increase the number of request per page and
the page load time.
e.g.
1.Add?a new folder into project by name "styles".
2.Add a new files into folder by name?"effects.css"
h2{
background-color:red;
color:white;
text-align:center;
}
3.Link stylesheet to your HTML page
<head>
<link rel="stylesheet" href="Styles/effects.css">
</head>
<body>
<h2>HTML</h2>
</body>
=======================================================
Minification:-
It is a coding technique used by developers to reduce the size of css
or javaScript files.
Minification will compress the source file by removing the line breaks,paragraph marks,
optional ode and etc.. used in specific functionality.
You can minify by using various tools like smallify,css minifier and etc.....
www.cssminifier.com
process:
1.copy the css code from css file
h2{
background-color:red;
color:white;
text-align:center;
}
2.open the site "www.cssminifier.com"
3.paste and minify.
4.copy the minified code
h2{
background-color:#008b8b;
color:#fff;
text-align:center;
}
5.create a new file in your style folder
"effects.min.css"
and paste the minified code.
6.Link the minified file to your page.
Note:-
Always use minified file for production and uncompressed for development.
=================================================================
CDN(Content Distribution Network)
1.CDN reffers to content distribution network.
2.CDN allows to maintained a repository(library) of?
css and javascript files remotely so that you can acces and use
in any project.
Syntax:-
<link rel="stylesheet" href="https://localhost/CDN/effects.css">
============================================================
Writing effects for HTML elements:-
1.inline effects are written by using style attribute within
the elements .Hence it directly applied to specific element.
syntax:-
<h2 style attribute1:value;
attribute2:value>
</h2>
2.embeded and css effects are written by defining a selector.
syntax:
selector{
attribute1:value;
attribute2:value;
}
3.The css selectors are classified into following types:-
1.Type selector
2.Id selector
3.Class selector
4.Decendent selector
5.Attribute selector?
6.Pseudo selector
1.Type selector:-
It directly refers to an HTML tags so that?the effects are applied whenever
the tag occur within page.
synax:-
h2{
color:red;
}
p{
text-align:justify;
}
div,span{
border-style:double;
}
2.Id selector:-
It is defined by using a "#" reference and it is accessible from any element
by using the attribute Id.
syntax:-
??#effects{
color:red;
text-align:center;
}
<h2 id="effects">HTML</h2>
Every HTML element can use reference of only one Id.
Hence multiple categories of effects cannot be applied to single element.
3.Class Selector:-
A class selector is used to define multiple categories of effects to a single element.
It is defined by using?"." operator and is accessed by using the keyword class.
e.g.
<head>
<style>
.backEffect{
background-color:yellow;
}
.textEffect{
color:red;
}
.borderEffect{
border-style:dotted;
}
</style>
</head>
<body>
<h2 class="backEffect textEffect borderEffect">Web Technologies</h2>
</body>
4.descendent selector:
A descendent selector is used to define effects or any child element?
configured within the parent.
It is again categorized into several types:
1.child selector?
2.descendent selector
3.adjacent sibling
4.general sibling
==============================================================
1.Child Selector:-
It is used to configure effects to any direct child.
under any specified parent.
syntax:-
parent>child
2.Descendent Selector:-
It matches all child elements under specific parent element.
syntax:-
parent child{
}
e.g.
<head>
<style>
thead>tr{
background-color:lightblue;
color:white;
}
tbody tr{
background-color:lightgreen;
}
div>p{
color:red;
}
</style>
</head>
<body.
<div>
<p>Product list</p>
</div>
<table width="400">
<thead>
<tr>
<td>Product id
</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>samsung</td>
</tr>
<tr>
<td>2</td>
<td>mobile</td>
</tr>
</tr>
<tbody>
</table>
</body>
====================================================================
3.Adjacent Sibling:-
It is used to configure any element i.e. adjacent to the parent element.
It will apply effect only to the immediate occurance of element under specific parent.
syntax:-
parent+child{
}
4.General sibling:-
It applies effects to all child elements that are defined as siblings of any specific parent.
syntax:-
parent~child{
}
e.g.
<head>
<style>
h2~p{
color:red;?*applies to all<p>
}
h2+p{
color:red;?*applies to first<p>
}
</style>
</head>
<body>
<h2>terminology</h2>
<p>website</p>
<p>webserver</p>
<p>webpage</p>
</body>
====================================================================
2.Attribute Selector:
An attribute selector is used to define effets based on the attribute and value
of any specific element.
syntax:-
tag[attribute="value"]{
}
e.g.
<head>
<style>
input[type="button"]{
background-color:darkcyan;
color:white;
}
input[type="text"]{
background-color:darkcyan 2px solid;
}
</style>
</head>
<body>
<dl>
<dt>First Name</dt>
<dd><input type="text"></dd>
<dt>Last Name</dt>
<dd><input type="text"></dd>
</dl>
<input type="button" value="Submit"
<input type="button" value="Reset">
</body>
===============================================================
Patterns For Attribute Values
The Atribute value can be complex .
Hence we need patterns to identify the occurance of any term?
and apply the effects.
Pattern????????description
========================================================
1.~?????????It specifies the exact match.
??????????e.g. p[class~="effects"]{}
2.^?????????It defines start with given value.
??????????e.g. p[class^="effects"]{}
3.$?????????It defines end?with given value.
??????????e.g. p[class$="effect"]{}
4.*?????????It defines the match anywhere in value.
??????????e.g.?p[class*="effects"]{}
e.g.
<head>
<style>
p[class~="web"]{
color:blue;
}
</style>
</head>
<body>
<p class="webSiteEffect">website</p>
<p class="EffectWeb">webpage</p>
<p class="EffectURL">URL</p>
<p class="serverWeb">server</p>
<p class="web">web Terminology</p>??????????????[1em=16px]
</body>
============================================================================
Pseudo Selector:-
A pseudo selector resembles?name of any eisting HTML element.
However it refers to a different animation or effect to be applied dynamically.
There are various pseudo selectors provided by css3 and css4.
1):hover
It specifies the action to perform when mouse pointer is any specific element.
syntax:-
element:hover{
attribute:value;
}
e.g.
<head>
<style>
tr{
background-color:lightgray;
}
tr:hover{
background-color:black;
color:white;
}
h1{
text-align:center;
font-size:16px;
transition:2s;
}
h1:hover{
font-size:32px;
transition:2s;
}
img{
width:50px;
height:50px;
transition:2s;
}
img:hover{
width:100px;
height:100px;
transition:2s;
}
</style>
</head>
<body>
<div>
<h1>Product List</h1>
</div>
<table width="400">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Samsung TV</td>
<td>54600.66</td>
</tr>
<tr>
<td>Mobile</td>
<td>12600.0</td>
</tr>
</tbody>
</table>
<div>
<marquee onmouseover="this.stop()" onmouseout="this.start()">
<img src="../Images/tv.jpg">
<img src="../Images/shoes.jpg">
<img src="../Images/mobile.jpg">
<img src="../Images/computer.jpg">
</marquee>
</div>
</body>
========================================================================
Date:21-11-2019
Selectors?for Link:-
:link????->Sets effects for a link
:visited???->Sets effects for visited links
:active???->Sets effects when user hold down mouse button on link.
e.g.
<style>
a:link{
color:green;
}
a:visited{
color:gray;
}
a:active{
color:yellow;
}
</style>
<body>
<a href="hover.html">Hover Example</a>
<spam>|</spam>
<a href="../Home.html">HTML</a>
</body>
Effects for input status-
Status?????????Description
=======================================================
:focus??????It defines effects when element gets focus.
:enabled?????Sets effects when element is disabled.
:disabled?????Sets effects when element is disabled.
:read-only????Sets effects when element is defined in read-only state.
e.g.
<style>
dt{
font-weight:bold;
}
<input[type="text"]:focus{
border:2px darkcyan solid;
background-color:lightyellow;
}
textarea:read-only{
background-color:lightgreen;
}
button{
background-color:darkcyan;
color:white;
}
button:disabled{
cursor:not-allowed;
background-color:lightcyan;
color:black;
}
button:enabled{
cursor:grab;
}
</style>
<body>
<dl>
<dt>On Focus </dt>
<dd><input type="text"></dd>
<dt>On Read Only</dt>
<dd>
<textarea readonly rows="3" cols="40">
License Terms....
</texgarea>
</dd>
<dt>On Disabled/Enabled</dt>
<dd>button disabled>Registe</button>
</dd>
</dl>
</body>
=======================================================================
Validations Selectors:-
Selector???????Description
========================================================================
:valid???????Sets effects when field is in?"valid" state i.e. require, pattern,min,max ..etc
:invalid??????Sets effetcs when field is invalid state i.e. not satisfied with validations defined.
:required??????Sets effects when field is defined as mandatory using "required".
:optional??????Set effects when field is optional i.e.defined with required.
:in-range??????Set seffects when field valie is given range i.e. min ,max,minlength, maxlength etc.
:out-of-range
e.g.
<style>
input[type=text"]:optional{
border:2px solid red;
}
input[type=text"]:required{
border:2px solid red;
}
#txtName:invalid{
border:2px solid green;
}
#txtName:valid{
border:2px solid green;
}
#txtAge:in-range{
border:2px solid green;
}
#txtAge:out-of-range{
border:2px solid red;
}
</style>
<body>
<dl>
<dt>Optional/Required</dt>
<dd>
<input type="text" required>
</dd>
<dt>Valid/Invalid</dt>
<dd>
<input id="txtName" type="text" pattern="^[A-Z]{4}$">
</dd>
<dt>Age-In/Out-of Range</dt>
<dd>
<input type="txtName" type="text" pattern="^[A-Z]">
</dd>
</dl>
</body>
Checked Selector:-
It is used to apply effects for element based on the checked property,which
you can define for radio and check boxes.
e.g.
<style>
input[type="checkbox"]+span{
color:red;
}
input[type="checkbox"]:checked+span{
color:green;
}
</style>
<body>
<fieldset>
<legend>
Terms Of Service</legend>
<textarea rows="4" cols="40">
/......our terms of service...
</textarea>
<br>
<div>
<input type="checkbox">
<span>|Agree</span>
</div>
<fieldset>
</body>
=================================================================================
:target:-
It is a css selector used with html elements which are highlighted by using target?
attribute of hyperlink.
It requires a link configure with intradocument navigation.
The target is reffered by using "#" and href attribute.
e.g.
<style>
nav{
border:1px solid black;
background-color:lightyellow;
text-align:center;
font-size:2em;
}
.topic{
border:1px solid black;
padding:10px;
margin:20px;
background-coloe:lightyellow;
}
.topic:target{
background-color:yellow;
}
a{
text-decoration:none;
}
a:link{
color:green;
font-weight:bold;
}
</style>
<body>
<header>
<nav>
<a href=""#html>HTML</a>
<spam>|</spam>
<a href="#css">CSS</a>
<spam>|</spam>
<a href="#js">JavaScript</a>
</nav>
</header>
<section>
<div class="topic" id="html">
<h3>HTML</h3>
<p>It is a markup language</p>
</div>
<div class="topic" id="css">
<h3>CSS</h3>
<p>It makes HTML interactive and responsive</p>
</div>
<div class="topic" id="js">
<h3>JavaScript</h3>
</div>
</section>
</body>
==========================================================
Date:-22-11-2019
:focus:within:-
It is a selector used to define effects for a container like <div>,<spam> or
any other element that contain a group of controls.
e.g.
<head>
<style>
.form-group{
border:1px solid black;
padding:10px;
margin:10px;
}
.form-group:focus-within{
background-color:lightcoral;
color:white;
}
</style>
</head>
<body>
<h2>Register User</h2>
领英推荐
<div class="form-group">
<dl>
<dt>First Name</dt>
<dd><input type="text"></dd>
<dt>Last Name</dt>
<dd><input type="text"></dd>
</dl>
</div>
<div class="form-group">
<dl>
<dt>city</dt>
<dd><input type="text"></dd>
<dt>pincode</dt>
<dd><input type="text"></dd>
</dl>
</div>
</body>
======================================================================
Structural Selector:-
The structural selectors are used to apply effects for HTML elements based
?on their occuranceand hierarchy.
Selector???????Description
=======================================================================
1.first-line??????It applies effects for first line in a container.
2.first-letter?????It applies effects for first letter in a sentence.
3.first-child?????It applies effects for the first child element
????????????under specific parent.
4.last-child??????It applies effects to the last-child element.
5.nth-child(n)?????It applies effect to the child element bsed on
????????????its level number
6.nth-child(even)???It applies effects for child element if it is an even occurance.
7.nth-child(odd)????It applies effcts for odd occurance of child element.
e.g.
first sentence and letter:
<style>
p{
text-align:justify;
}
p:first-line{
color:red;
}
p:first-letter{
color:green;
font-size:2em;
font-family:Arial,Helvetica,sans-serif;
}
</style>
<body>
<p>
Your paragraph with multiple lines....
</p>
</body>
e.g.
child selectors with structural:-
<style>
ul li:first-child{
color:red;
}
ul li:last-child{
color:red;
}
ul li:nth-child(5){
background-color:greenyellow;
}
</style>
<boby>
<h3>Web Terminology</h3>
<ul>
<li>Website</li>
<li>Webpage</li>
<li>Webserver</li>
<li>url</li>
<li>protocol</li>
</ul>
</body>
e.g.
even and odd occurances:-
<style>
thead{
background-color:darkcyan;
color:white;
}
tbody tr:nth-child(even){
background-color:lightsteelblue;
}
tbody tr:nth-child(odd){
background-color:mediumturquoise;
}
</style>
<body>
<!----create table with header and rows----->
</body>
===================================================================
css Effects:-
In css Effects:
1.Background Effects:-
css provides several background size that are used to change or configure?
the appearance of any element background.
It includes the following:-
Effects????????Description
================================================================
1.background-color???It sets a background color
2.background-image???It uses a method "url()" that can apply?
????????????an background from specified path.
3.background-repeat??It controls repeating of background image.
????????????It includes -no-repeat
???????????????????-repeat
???????????????????-rpeat-x
???????????????????-repeat-y??and etc..
4.background-position?It changes the alignment of background image
????????????by using pixels or preset values.
????????????It includes:-
??????????????????-top left
??????????????????- top center
??????????????????- top right
?????????????????
center??left
center??right
bottom??left
bottom??center
bottom??right
200 px??00px (x,y)
2.background-attachment:-
It controls the scrolling of background which includes :-
-scroll
-fixed
3.background-click:-
It clip the background image to?
-content-box
-border-box
4.background-size:-
It changes the height and width of background images.
e.g.
<head>
<style>
body{
background-image:url("../Images/log.png");
background-repeat:no-repeat;
background-repeat:no-repeat;
background-position:center center;
background-attachement:fixed;
background-size:200px 200px;
}
.paraBackground{
background-image-url("../Images/shoes.jpg");
border:2px red double;
margin:10px;
padding:40;
background-clip:content-box;
background-size:200px 200px;
}
</style>
<body>
<p class="paraBackground">
.....some text.....
</p>
</body>
e.g.
backgrounds in short hands style:-
body{
background:url(../Images/shoes.jpg") no repeat fixed center 100px;
}
3.Border Effects:-
css Borders can be applied to any element which includes :
1)style
b)color
c)width
The border location with different effects can be applied to
a)left
b)right
c)top
d)bottom
Border Effects??????Description
================================================================
border-style???????Sets border style to double,
?????????????dotted,groove ,dashed and etc..
border-color???????Sets a color
border-width???????Specifies width for border
border-left????????Can define left
???-style
???-color
???-width
border-right???????Can define right
-style
-color
-width
border-top????????Can define top
-style
-color
-width
border-bottom
-style
-color
-width
e.g.
<style>
img{
border-left-color:red;
border-left-width:3px;
border-left-style:double;
border-top-color:green;
border-top-width:3px;
border-top-style:dotted;
border-right-color:green;
border-right-width:3px;
border-right-style:solid;
border-bottom-color:red;
border-bottom-widthr:3px;
border-bottom-style:solid;
}
</style>
<body>
<img src="../Images/shoes.jpg" width="200" height="200">
</body>
====================================================================
Date:-26-11-2019
css margin:-
Margins allow to define the space between content and border of page.
The margins can be define :-
-margin-left
-margin-right
-margin-top
-margin-bottom
-margin
<style>.boxStyle{
border:2px black solid;
width:200px;
height:50px;
margin-left:100px;
margin-top:50px;
}
</style>
<body>
<div class="boxStyle">
Para-1
</div>
<div class="boxStyle">
Para-2
</div>
</body>
css Padding:-
It defines the space for content and border within the context.
We can define the following effects:
-padding-left
-padding-right
-padding-top
-padding-bottom
-padding
syntax:-
p{
border:2px solid black;
height:100px;
width:200px;
paddding:20px;
}
css placement:-
You can set the placement of any element by using the following attributes:-
1.top:-
2.left
3.right
4.bottom
The placements will define number of pixels from all directions of page.
Note:-
The placements are effected by using positions.
Css Positions:-
A positions specificise how a component can be positioned with another component
in page:
It includes :
a)static?
b)absolute
c)relative
d)fixed
e)sticky
1.static
It is used to define a static position which will arrange the component
according to the normal page flow and wil not be effected by left,right,
top and bottom.
syntax:-
p{
position:static
}
2.absolute:
It is used to define the position that can be absolute to the page?
according to left,right,top and bottom.
3.relative :
It sets the position relative to existing element.
It can change the placement left,right,top and bottom with regard to the element?
beside it.
e.g.
<style>
aside{
border:2px black solid;
width:100px;
height:50px;
position:static;
}
article{
border:2px black solid;
width:100px;
height:50px;
position:relative;
top:10px;
}
</style>
<body>
<aside>
Ads ...
</aside>
<article>
Offers...
</article>
</body>
4.Fixed Position:-
You can define the position fixed for any element alongwith the placement
so that it will not change even when the page is scrolling.
syntax:-
.div{
position:fixed;
right:10px;
top:10px;
background-color:red;
color:white;
height:30px;
}
5.Sticky position:
The position sticky can be used to access the elements position
upto specifies margin and fixed the lock ferom scrolling.
e.g.
<script>
.toolbar{
border:1px solid red;
background-color:yellow;
height:40px;
width:600px;
text-align:center;
padding:20px;
top:0px;
position:sticky;
margin-top:100px;
}
section{
margin-top:50px;
}
</style>
<body>
<div class="toolbar">
<a href="#">Home</a>
<span>|</span>
<a href="#">About</a>
<span>|</span>
<a href="#">Contact</a>
</div>
<section>
<p>some text....</p>
</section>
</body>
===================================================================
Date:-27-11-2019
css Outline:-????[for designing we are taking :margin,padding,position and outline]
Outline is define for border so that we can display border outline
with following effects:-
a)outline
b)outline-color
c)outline-style
d)outline-width
e)outline-offset:distance between border and outline.
e.g.
<style>
button{
background-color:darkcyan;
color:white;
border:2px solid yellow;
outline-color:red;
outline-style:groove;
outline-width:3px;
outline-offset:5px;'
}
</style>
<body>
<button>Insert Record</button>
</body>
e.g. Box Model
<style>
.box-left{
width:200px;
height:200px;
background-color:lightcyan;
margin:10px;
position:absolute;
margin-left:20px;
border:1px solid bloack;
}
.box-center{
width:200px;
height:200px;
background-color:lightcyan;
margin:10px;
position:absolute;
margin-left:240;
border:1px solid black;
}
.box-right{
width:200px;
height:200px;
background-color:lightcyan;
margin:10px;
position:absolute;
margin-left:460;
border:1px solid black;
}
.box{
border:2px green solid;
height:300px;
width:800px;
padding:20px;
}
</style>
<body>
<div class=box">
<div class="box-left"></div>
<div class="box-center"></div>
<div class="box-right"></div>
</div>
</body>
==================================================================
css Text Effects:-
The text effects are used to format the character appearance,alignment
and indentation.
The css text effects are shown below:-
Effects???????Description
==================================================================
color??????Sets color for text
text-align????Defines alignment
?????????left,right,center and etc...
text-transform??Sets Capitalization
text-overlay???Sets text overlay to?
?????????hidden ellipsis etc..
text-shadow???Sets shadow
text-decoration?Changes text effects underline
?????????strikeout
letter-spacing??Letter spacing
line-height???Space between lines
word-spacng???Space between words
white-spacing??Define additional space after or before
text-indent???Sets first line indent.
e.g.
<style>
p{
color:blue;
text-align:justify;
text-indent:50px;
word-spacing:10px;
letter-spacing:3px;
line-height:30px;
}
h1{
text-transform:uppercase;
text-align:center;
text-shadow:5px 2px lightpink;
text-decoration:underline;
}
div{
border:2px solid black;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<h1>Text Formatting</h1>
<div>
Some Text will be here
</div>
<p>.....paragraph....</p>
</body>
**Why background and color are the separate properties if they should always be set together?
css fonts:-
The fonts are used to change the character appearance.
You can control the style and effects by using following attributes:-
Attributes???????Description
============================================================================
font-family?????Sets font face with all available members?
???????????in that family.e.g. Arial,Impact etc...
font-weight?????Sets to bold
font-style??????Set to Italic
font-size??????Sets size for text by pixels or em?
???????????16px=1em
font-variant?????Changes the capitalization for text to small caps,lower caps etc...
e.g.
<styke>
h2{
font-family:'Times New Roman',Times,serif;
font-weight:bold;
font-style:italic;
font-size:3em;
font-variant:small-caps;
color:red;
}
</style>
<body>
<h2>css font style</h2>
</body>
ovrflow:-
It is used to control the content appearance which is displayed outside
the specified area.You can define with following attributes.
a)auto
b)hidden
c)unset
d)scroll
e)visible
e.g.
div{
width:400px;
height:150px;
border:2px solid gray;
background-color:lightgray;
overflow:scroll;
}
float:-
It is used to controll the floating style of any content in the page.
Which can be defined at positions like left,right,start,end etc....
It can wrap the other contents with regard to the current element.
Syntax:-
<style>
img{
float:right;
}
</style>
<body>
<div>
<img src="../images.jpg">
some ...paragraph...
</div>
</body>
css list style:-
css provides a set of attributes that are used to hadle ordered and
unordered list.
It includes the following:-
1.list-style
2.list-style-image
3.list-style-position
4.list-style-type
syntax:-
list-style-type:
we can define upper-alpha,disc,upper-roman.
list-style-position:inside ,outside.
list-style-image:url().
e.g.
<style>
ul{
list-style-image:url("../Images/bullet.png");
list-style-position:outside;
font-size:25px;
}
li{
background-color:lightpink;
margin:5px;
}
</style>
<body>
<ul>
<li>HTML</li>
<li>CSSL</li>
<li>JavaScript</li>
</ul>
</body>
css display:-
It is used to control how any element is displayed?
in a web page.
You can click them hidden,block or inline.
e.g.
<style>div{
display:inline;
}
li{
list-style-type:none;
display:inline;
margin-right:40px;
}
h2{
display:none;
}
</script>
<body>
<h2>Welcome</h2>
<ul>
<>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form>
<div>
<input type="text" placeholder="User Name">
</div>
<div>
<input type="password" placeholder="password">
/div>
<div>
<button>Login</button>
</div>
</form>
</body>
Thank You!!