Home/ Questions/Q 9140135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:28:36+00:00

I am trying to learn CSS, so far it seems that changing HTML to

  • 0

I am trying to learn CSS, so far it seems that changing HTML to CSS is more of just changing font, colors, text size, tables and background to some CSS statements.

My problem is I am not sure what HTML I still need and what to remove.
Where do I put the CSS stuff?
Basic HTML trying to learn with this easy one:

<html>
<head>
<title>CSS practice</title>
</head>

<body style="background-color:white;">

<table border="1" width="990" bgcolor="#99CCFF">
  <tr>
    <td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b>    </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">&nbsp;
  <p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
  <a href="index.html"> Home </a><br><br>
  <a href="about.html"> About Me </a><br><br>
  <a href="outreach.html"> Outreach </a><br><br>
  <a href="contact.html"> Contact Me </a><br><br>
  <a href="experience.html"> Experience </a><br><br>
  <a href="education.html"> Education </a><br><br> 
  <a href="skills.html"> Skills </a><br><br>

<td width="61%" valign="top">
  <blockquote>
    <p><br>
    <font face="Arial" size="5">Welcome</font></p>
    <p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
    <img src="me.jpg" alt="US"/>
  </blockquote><br><br>
  <p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
  RESERVED </font></td>

<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1">&nbsp;</font></td>
</tr>
</table>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Start from scratch. Building semantic HTML is about focusing only on content, and you will find out that its a lot easier than make the ol’table HTML.

    Table-less, semantic HTML

    Your new HTML should look like this:

    <html>
  <head>
    <title>CSS practice</title>
    <link rel="stylesheet" href="css-file.css" type="text/css">
  </head>

  <body>
    <span>DDDD</span>
    <h1>Personal Portfolio</h1>
    <nav>
      <a href="index.html"> Home </a>
      <a href="about.html"> About Me </a>
      <a href="outreach.html"> Outreach </a>
      <a href="contact.html"> Contact Me </a>
      <a href="experience.html"> Experience </a>
      <a href="education.html"> Education </a>
      <a href="skills.html"> Skills </a>
    </nav>
    <p>Welcome <span>Aspiring CSS programmer</span></p>
    <img src="me.jpg" alt="US"/>
    <span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
  </body>
</html>

    See? Just the contents, nothing about styles at all. Much simpler!

    So after that you can start moving on CSS with your new separated css-file.css (look the css declaration inside the head tag).

    CSS styles

    CSS is just about finding paths to your HTML elements, and then styling it. It’s really easy.

    For example, you could spot and style your title like:

    h1 {
  font-family: "Verdana";
  font-weight: bold;
}

    … your menu buttons like:

    nav a {
  color: blue;
  text-style: italic;
}

    nav a means you want to style every a tag living inside a nav tag, leaving unstyled the a ones outside of a nav tag.

    Well… and this is a path! Build your paths freely, as long they meet their respective targets (the HTML elements).

    Classes and IDs

    Every tag in HTML can have both a class and an id attribute. Apply them freely into your HTML tags to help you spot your elements. Use them like this:

    <span class="class_name" id="id_name">content</span>

    In your CSS, you can refer to a class by putting a dot before the name, like:

    nav a.class_name {
  color: blue;
  text-style: italic;
}

    So the styles will be applied to every a tag that has the class-name class, living inside a nav tag.

    Id‘s will work the same way, but in CSS you refer to them by placing a hash (#) instead of the dot we used for class.

    That’s it, you have already begun. 🙂

    I personally would recommend you start from here: How to make websites.
    And remember… use LOTS of Google.
    You’ll be there in no time.

    • 0