Css news template

Here is a basic CSS news template that you can use as a starting point:

HTML Structure

<!-- Header -->
<header>
  <h1>News</h1>
  <nav>
    <ul>
      <li><a rel="nofollow" target="_blank" href="#">Home</a></li>
      <li><a rel="nofollow" target="_blank" href="#">About</a></li>
      <li><a rel="nofollow" target="_blank" href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- Main Content -->
<main>
  <section class="news-list">
    <h2>Latest News</h2>
    <ul>
      <li>
        <h3>News Title 1</h3>
        <p>News summary 1</p>
        <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
      </li>
      <li>
        <h3>News Title 2</h3>
        <p>News summary 2</p>
        <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
      </li>
      <!-- Add more news items here -->
    </ul>
  </section>
</main>

<!-- Footer -->
<footer>
  <p>&copy; 2023 News Website</p>
</footer>

CSS Styles

/* Global Styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
}

/* Header Styles */

header {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
}

header h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  color: #ccc;
}

/* Main Content Styles */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

.news-list {
  margin-top: 2em;
}

.news-list h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.news-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li {
  margin-bottom: 1em;
}

.news-list h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.news-list p {
  font-size: 1em;
  margin-bottom: 1em;
}

.read-more {
  font-size: 1em;
  color: #337ab7;
  text-decoration: none;
}

.read-more:hover {
  color: #23527c;
}

/* Footer Styles */

footer {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
  clear: both;
}

footer p {
  font-size: 0.8em;
  margin-bottom: 0;
}

This template includes a basic header with a navigation menu, a main content section with a news list, and a footer. You can customize the styles to fit your needs.

Note that this is just a starting point, and you will likely need to add more styles and modify the existing ones to fit your specific design requirements.