Hi dear welcome to Ascode Blog . In this post we are going to learn to bsic css types how we can write css ; Css can be write three ways
1). External Css2). Inline Css
3). Internal Css
... First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
1). External Css2). Inline Css
3). Internal Css
... First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Types of css</title>
</head>
<body>
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores, corrupti deserunt. Culpa, veritatis perspiciatis non quasi odio similique maxime ipsum necessitatibus, consectetur tempore eaque facere obcaecati aliquid, earum saepe expedita.
</div>
</body>
</html>
EXTERNAL CSS
.container {
padding: 20px; font-size: 2rem; font-weight: bold; margin: 20% 10%; background: #111; color: #fff; border-radius: 5px;
}
INLINE CSS
<div style=" padding: 20px; font-size: 2rem; font-weight: bold; margin: 20% 10%; background: #111; color: #fff; border-radius: 5px;">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores, corrupti deserunt. Culpa, veritatis perspiciatis non quasi odio similique maxime ipsum necessitatibus, consectetur tempore eaque facere obcaecati aliquid, earum saepe expedita.
</div>
INTERNAL CSS
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores, corrupti deserunt. Culpa, veritatis perspiciatis non quasi odio similique maxime ipsum necessitatibus, consectetur tempore eaque facere obcaecati aliquid, earum saepe expedita.
</div>
<style>
.container {
padding: 20px; font-size: 2rem; font-weight: bold; margin: 20% 10%; background: #111; color: #fff; border-radius: 5px;}
</style>
0 Comments