PRIYA K

Posted on May 9

CSS

#css #webdev #beginners #tutorial

CSS (Cascading Style Sheets)
To add Styles to HTML
Styles-->adding colors,fonts,size,borders etc..,
Css is not a programming language.Css is not a Markup language either.
CSS is a Style Sheet Language. CSS is a rule-based language.

How to define Style for HTML Elements
1.In Line

<h1 style="color:red"> Priya </h1>

2.By Using Style Tag:

<html>
<head>
<style type="text/css">
h1{
   color:blue;
  }
</style>
</head>
<h1> Boopathi </h1>

3.keep separate CSS file
name as
Style.CSS


h1{color:red}

name as
index.html


<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>

4.Basic Structure Of CSS

tagname{
    property:value;
      }

eg.

h1{color:red;}

5.CSS comments = (/* Comments*/)
6.code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code: css

h1{
   color:red;
   font-size: 5em;
}
p{
  color:black;
 }

Multiply Property values: code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code:style1.Css

p{
  color:red;
  width: 500px;
  border: 1px solid black;
}

8.Selecting Multiple Elements
code: html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<h1> Priya </h1>
<p> This is the book </p>

code:style1.css

p,h1{
  color:red;
  width: 500px;
  border: 1px solid black;
}

9.CSS Selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
p{
  text-align:center;
  color:red;
}
</style>
</head>
<body>
  <p>At W3Schools you will find complete references.</p>
  <p id="para1"> this style </p>
  <p> matches </p>
</body>
</html>

10.id selectos= apply selectors to more than one paragraph.

<!DOCTYPE HTML>
<html>
<head>
<style>
#para1{
  text-align:center;
  color:red;
}
#para2{
  text-align:center;
  color:blue;
}
</style>
</head>
<body>
  <p>At W3Schools you will find complete references.</p>
  <p id="para1"> this style </p>
  <p id="para2"> Book </p>
  <p> matches </p>
</body>
</html>

11.class selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
.abcd{
  text-align:center;
  color:red;
</style>
</head>
<body>
  <h1 class="abcd"> where the wind blows </h1>
  <p class="bcde"> how the sea seems</p>

</body>
</html>

12.more than one class (keep . before the class name)

<!DOCTYPE HTML>
<html>
<head>
<style>
p.abcd{
  text-align:center;
  color:red;
  }
p.pqrs{
  font-size:300%
  }
</style>
</head>
<body>
  <h1 class="abcd"> clear appearance </h1>
  <p class="abcd"> in the middle </p>
  <p class="abcd pqrs"> Everything Changes</p>
</body>
</html>

13.Universal Selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
*{
  text-align:center;
  color:red;
</style>
</head>
<body>
  <h1> Good Morning </h1>
  <p> Red </p>
  <p id ="para1"> Red Only </p>
  <p id > This also Red Only </p>
</body>
</html>

14.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
a[target] {
   background-color:yellow;
}
</style>
</head>
<body>
  <h2> CSS[attribute] Selector </h2>
  <p> see where the yellow color changes </p>
  <a href ="https://www.ilugc.in" target="_blank"> ILUGC </a>
  <a href ="https://www.wikipedia.org" target="_blank"> Wikipedia 
</a>
</body>
</html>

15.

<!DOCTYPE HTML>
<html>
<head>
<style>
a[href] {
   background-color:yellow;
}
</style>
</head>
<body>
  <h2> CSS[attribute] Selector </h2>
  <p> see where the yellow color changes </p>
  <a href ="https://www.ilugc.in" target="_blank"> ILUGC </a>
  <a href ="https://www.wikipedia.org" target="_blank"> Wikipedia 
</a>
</body>
</html>

16.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[title~=linux] {
   border: 5px solid red;
}
</style>
</head>
<body>
  <h2> [attribute~="value"] see style </h2>
  <p> attribute Style Changes </p>
  <img src="rabbit.jpeg" title="animal" width="150" height="250">  
  <img src="linux.jpeg" title="linux" width="150" height="250"> 
  <img src="linux.jpeg" title="logo of linux" width="150" height="250"> 
</body>
</html>

17.CSS Attribute Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class |= top] {
  background:yellow;
</style>
</head>
<body>
  <h2> CSS [attribute|="value"] Selector </h2>
  <h1 class="top-header"> Day dreamers </h1>
  <p class="top-text"> what i saw  </h1>
  <p class="topcontent"> Seeing God </h1>

CSS [attribute^="value"] Selector class^ --> starts with specified value

<!DOCTYPE HTML>
<html>
<head>
<style>
[class ^= "abc"] {
  background:pink;
}
</style>
</head>
<body>
  <h1> CSS [attribute^="abcd"] Selector </h1>
  <p class="abcd"> what i saw  </h1>
  <h1 class="bcde-123">change direction </h1>
  <p class="abcdefgh"> Seeing God </h1>
</body>
</html>

CSS [attribute$="value"] Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class $= "xyz"] {
  background:pink;
}
</style>
</head>
<body>
  <h2> CSS [attribute$="value"] Selector </h2>
  <div class="abc_xyz"> what i saw  </div>
  <div class="abc">change direction </div>
  <div class="stuvwxyz"> Seeing God </div>
  <p class ="abc-xyz">Do everything by making plans </p>
</body>
</html>

CSS [attribute*="value"] Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
[class *= "xy"] {
  background:pink;
}
</style>
</head>
<body>
  <h2> CSS [attribute *="value"] Selector </h2>
  <div class="abc_xyz_1"> what i saw  </div>
  <div class="xyabz">change direction </div>
  <div class="stuvwxyz_"> Seeing God </div>
  <p class ="aby-xz">Do everything by making plans </p>
</body>
</html>

Descendant Selector

<!DOCTYPE HTML>
<html>
<head>
<style>
div p{
  background:yellow;
}
</style>
</head>
<body>
  <h2> Descendant Selector </h2>
  <div>
    <p> iam p, div between two.</p>
    <p> iam also p, div between two.</p>
    <section><p> i too p,div between two.</p></section>
  </div>
  <p> iam living in p only </p>
  <p> iam living in p only </p>
</body>
</html>

Child Selector(>)

<!DOCTYPE HTML>
<html>
<head>
<style>
div > p{
  background:yellow;
}
</style>
</head>
<body>
  <h2> Descendant Selector </h2>
  <div>
    <p> iam p, div between two.</p>
    <p> iam also p, div between two.</p>
    <section><p> i too p,div between two.</p></section>
  </div>
  <p> iam living in p only </p>
  <p> iam living in p only </p>
</body>
</html>

nth type of selectors

<!DOCTYPE HTML>
<html>
<head>
<style>
/* Select the second element of div siblings */
div: nth-of-type(2) {
    background: red;
    color:yellow;
}
/* Select the second li element in a list*/
li: nth-of-type(2) {
    background: lightgreen;
    color:red;
}
/* Select every third  element among any group: nth-of-type(3) {
    background:yellow;
}
</style>
</head>
<body>

<div>
<p> Believe yourself </p>
</div>

<div>
<p> Past memories </p>
</div>

<div>
<p> Leader </p>
</div>
<ul>
  <li> Mahatma Gandhi </li>
  <li> Nehruji </li>
  <li> Indira Gandhi </li>
  <li>  nethaji </li>
  <li> Chandra Bose </li>
</ul>
</body>
</html>

24.
document ->html-> index.html
document ->html->style ->style1.css

Text:
color --> "#ff0000","rgb(0,255,0)","red"
text-align --> Left,Right,center,Justify
text-decoration --> link
text-transform --> uppercase,lowercase,capitalize
text-indent -->

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="first"> Dont Giveup! Keep on Trying! </p>
<p class="second">Even through it seems to be impossible,It will happen in your life one day</p>
<p class="third">All the very best Friends! Wait to receive the suprises in your life!!!!!</p>
</body>
</html>

style.css

p.first
{color:green;text-decoration:overline;text-transform:uppercase;test-indent:50px;}
p.second
{color:#0000ff;text-align:right;text-decoration:line-through;text-transform:lowercase;}
p.third
{color:rgb(255,0,0);text-align:center;text-decoration:underline;text-decoration:capitalize;}

25.Font:
font-family
font-style: Normal,Italic,Bold,Oblique
font-size: px,em

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="first"> Dont Giveup! Keep on Trying! </p>
<p class="second">Even through it seems to be impossible,It will happen in your life one day</p>
<p class="third">All the very best Friends! Wait to receive the suprises in your life!!!!!</p>
</body>
</html>

style.css

p.first{font-family:"Tiems New Roman",Times,serif; font-style:Oblique;font-size:10;}
p.second{font-style:italic;font-size:20;}
p.third{font-style:bold;font-size:30;}

Link: decorate link by color,font-family,font size

a:link =
a:hover =
a:active =
a.vsited=

index.html


<html>
<head>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<a href="https://freetamilebooks.com/ebooks/-eliya_tamilil_software_testing/" target="_blank"> Click here for Software Testing book </a>
</body>
</html>

style1.css

a:hover{color:red;background-color:yellow;}
a:active{color:white;background-color:black;}
a:visited{color:blue;background-color:lightgreen;}

List: Ordered List Unordered List

CSS

index.html

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body>

Types Of Testing

<ol>
<li> Funtional Testing </li>
<li> Non- Funtional Testing </li>
</ol>

Types of non-functional testing

<ul>
<li> Funtional Testing </li>
<li> Automation Testing </li>
</ul>
</body>
</html>

style.css

ol li{list-style-type:upper-roman;}
ol li{list-style-type:upper-circle;}

28.Visibility Property:
Display:
inline

style.css:


ol li{visibility: hidden;}
ol li{display:inline;}

TABLES:

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body> <table>

<tr>
<th> Name </th>
<th> Marks </th>
<th> Rank </th>
</tr>

<tr>
<th> priya </th>
<th> 450 </th>
<th> 3 </th>
</tr>

<tr>
<th> boopathi </th>
<th> 550 </th>
<th> 2 </th>
</tr>

</table></body>
</html>

style.css

table{width:"60%";height:"40%"; border:3px solid red;}
th{border:2px solid green;}
th{border:1px solid orange;}

29.

<html>
<head>
<link rel="stylesheet" href="styles/style1.css">
</head>
<body> <table>

<tr>
<th> Name </th>
<th> Marks </th>
<th> Rank </th>
</tr>

<tr>
<th> priya </th>
<th> 450 </th>
<th> 3 </th>
</tr>

<tr>
<th> boopathi </th>
<th> 550 </th>
<th> 2 </th>
</tr>

</table></body>
</html>

style.css

table{width:"60%";height:"40%"; border:3px solid red;}
th{border:2px solid green;}
th{border:1px solid orange;}

table{width:60%;height:40%;border:3px solid red;
border-collapse:collapse;}

30. Divisions:
index.html

This is the book


style.css

div{width:"60%";height:"40%"; border:3px solid red;margin:25px;}



style.css

div{width:"60%";height:"40%"; border:3px solid : red;margin:25px;padding:25px;}


31.Body Background:

index.html

1oth time success

style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: repeat-x;
}



style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: repeat-y;
}


style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: no-repeat;
}


style1.css

body{background-color:skyblue;}
body{background-image: url("../linux.jpeg");}

body{
background-image:url("../linux.jpeg");
background-repeat: no-repeat;
background-position:right-top;
}

32. POSITIONING:static

index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.static {
position: static;
border: 3px solid #73AD21;
}


33.positioning:fixed
index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.fixed {
position: fixed;
bottom:0;
right :0;
width: 300px;
border: 3px solid #73AD21;
}


34.positioning:absolute

index.html:

<!DOCTYPE html>

position: static;

1oth time failure


style1.css:

div.absolute{
position: absolute;
top:80px;
right :0;
width: 300px;
height: 200px;
border: 3px solid #73AD21;
}


35.positioning:sticky

36.Box model - where the content should be placed inside the box
rules for box model:
- Content Edge
- Border Edge
- Padding Edge
- Margin

p{
width:200px;
border: 3px solid red;
padding: 40px 50px 60px 70px;
margin: 100px 5px 300px 400px;
}


37.VIBGYOR with html ,css

38.

<!DOCTYPE html>

Here is a span element which is red, as it is span element Here is a span element which is blue, because it inherits from its parent. Here is a span element which is red, because it is span element.


style1.css

span{
color: red;
border: 1px solid black;
}

.extra span{
color: inherit;
}


39.initial
index.html

<!DOCTYPE html>

heading

heading means what


style1.css:

div{
color: red;
border: 1px solid black;
}

h1{
color: initial;
}


40.revert property
div --> parent tag
p--> child tag

index.html:

<!DOCTYPE html>

sun shines

class ="changes"> purple flower


style1.css:

parents{
color: blue;
}
p{
color: red;
}
changes{
color: revert;
}


41.
index.html

<!DOCTYPE html>

style1.css

div.one{margin:5px;padding:5px;border:1px;solid red;float:left;text-align:center;}

div.one img{display:inline; margin:5px; border:1px solid yellow; width:170px; height:150px;}

div.one a:hover img{border:1px solid blue;}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}


42.Opacity
index.html

<!DOCTYPE html>


style1.css

div.one{margin:5px;padding:5px;border:1px;solid red;float:left;text-align:center;}

div.one img{display:inline; margin:5px; border:1px solid yellow; width:170px; height:150px;opacity: 0.4; filter: alpha(opacity=40);}

div.one a:hover img{border:1px solid blue;opacity:1;filter: alpha(opacity=100);}
div.two {text-align:center; font-weight:normal; width:120px; margin:5px;}


43.CSS Layout:
Flex Box: flexbox is designed for one-dimensional layout
index.html((one dimension layout))

<!DOCTYPE html>

one two three

style.css

.wrapper{
display:flex;
}
.wrapper > div {
flex:1;
}


eg...

index.html

<!DOCTYPE html>

home about contact us

style.css

.wrapper{
display:flex;
}
.wrapper > div {
flex:1;
}


43.Grid layout - for two dimensional layout

index.html

<!DOCTYPE html>

one two three four five six


style.css

.wrapper{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}

44.

DEV Community

CSS

position: static;

position: static;

position: static;

heading

Top comments (0)