CSS
- css called cascading style sheet
- css describes the style of html
- css save a lot of works to developer
syntax of css
h2 {
color:red;
font-size:12px;
}
- h2 - selection
- color - property
- red - value
- color:red; - declaration
3 ways to add css styles in our html document
- Inline style
- Internal
- External
1.Inline
<p style="color:red;"> about uki...... </p>
here is a paragraph. and a ccs style used in that html's <p> line. it's called inline css.
2.Internal
<html>
<head>
<style>
body {
background-color: red;
}
p {
color: black;
}
</style>
</head>
<body>
<p>i am a uki student</p>
</body>
</html>
3.External
<html>
<head>
<link rel="stylesheet" type="text/css" href="data.css">
</head>
<body>
<h1>i'm a uki student </h1>
a
</body>
</html>
here is a heading's style linked in a css document which is called external css. most of the developers using external css
css backgroundcolour
<html>
<head>
<style>
h1 {
background-color: red;
}
p {
background-color: blue;
}
</style>
</head>
<body>
<h1>here is the red colour /h1>
<p>here is the blue colour</p>
</body>
</html>
we can use css colors like this format
p {background-color:black;}
css background image
<head>
<style>
body {
background-image: url("https://image.spreadshirtmedia.net/image-server/v1/mp/designs/140238303,width=178,height=178/nerd-kode-klippet-inn-sekskant.png");
background-repeat: no-repeat;
background-position:right center;
margin-right: 5px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
css border
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid blue;
}
</style>
</head>
<body>
<h2>uki life</h2>
<p>color blue</p>
</body>
</html>
<html>
<head>
<style>
p {
border: 5px solid blue;
}
</style>
</head>
<body>
<h2>uki life</h2>
<p>color blue</p>
</body>
</html>
we can use the border like this format border: border's width border's type and border's color then border radius: enough radius like a round shape
css margin
css margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>uki</h2>
<div>uki life</div>
</body>
</html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>uki</h2>
<div>uki life</div>
</body>
</html>
css margin is where will we pix our content? which limits of the distance from outside of the page
css pading
<!DOCTYPE html><html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>uki</h2>
<div>It is a full scholarship based Accelerator program for Coding in Jaffna, Sri Lanka targeting students who has completed Advanced Level examinations and don’t have access to university education or any other form of vocational education. It is aimed to provide the necessary training to enter Computer Software industry or to start an IT startup.
</div>
</body>
</html>
Padding is a distance between content to border
css height and width
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>uki</h2>
<p>uki life</p>
<div>It is a full scholarship based Accelerator program for Coding in Jaffna, Sri Lanka targeting students who has completed Advanced Level examinations and don’t have access to university education or any other form of vocational education. It is aimed to provide the necessary training to enter Computer Software industry or to start an IT startup.
</div>
<p>uki</p>
</body>
</html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>uki</h2>
<p>uki life</p>
<div>It is a full scholarship based Accelerator program for Coding in Jaffna, Sri Lanka targeting students who has completed Advanced Level examinations and don’t have access to university education or any other form of vocational education. It is aimed to provide the necessary training to enter Computer Software industry or to start an IT startup.
</div>
<p>uki</p>
</body>
</html>
how to display our content in our web page.we can set our content placement by height and width.
Css box model
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>uki:</h2>
<img src="http://uki.life/wp-content/uploads/2016/11/aaa-2.jpg" width="350" height="263" alt="Klematis">
<div>This the logo of uki</div>
</body>
</html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>uki:</h2>
<img src="http://uki.life/wp-content/uploads/2016/11/aaa-2.jpg" width="350" height="263" alt="Klematis">
<div>This the logo of uki</div>
</body>
</html>
different between margin border padding and the content
Css outline
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}</style>
</head>
<body>
<h2>the uki batch stone</h2>
<p class="ex1">uki1</p>
<p class="ex2">uki2</p>
<p class="ex3">uki3</p>
<p class="ex4">uki4</p>
</body>
</html>
Css text
<html>
<head>
<style>
body{
color: green;
text-align: center
;
text-decoration: none;
text-transform: uppercase;
text-indent: 50px;
letter-spacing: 3px;
direction: rtl;
word-spacing: 10px;
text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>uki batch 4</h1>
<p>It is a full scholarship based Accelerator program for Coding in Jaffna, Sri Lanka targeting students who has completed Advanced Level examinations and don’t have access to university education or any other form of vocational education. It is aimed to provide the necessary training to enter Computer Software industry or to start an IT startup.
</p>
</body>
Css font
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>uki-family</h1>
<p class="serif">uki batch4</p>
<p class="sansserif">we are the good family</p>
</body>
</html>
Css icon
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>
Css links
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">share it</a>
</body>
</html>
