Example of css template
Example of css template
Here is a basic CSS template that you can use for any website. This template sets some essential styles such as colors, fonts, and layout to make the page look more professional.
Basic CSS Template
/* Importing a font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap');
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Cairo', sans-serif;
}
/* Styling the body */
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;
}
/* Styling the main heading */
h1 {
color: #222;
text-align: center;
margin-bottom: 20px;
}
/* Styling buttons */
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #0056b3;
}
/* Styling the main container */
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Styling links */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
How to Use the Template with HTML
You can link this CSS file to an HTML page by saving it as style.css and then linking it inside the HTML file like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Website!</h1>
<p>This is an example of using a simple CSS template to enhance the page's design.</p>
<button>Click Here</button>
</div>
</body>
</html>
With this setup, you’ll get a clean and well-structured page design. Would you like any specific customizations in the template?
Posts
Comments
Post a Comment