How to change from inline CSS to external? - html

Question

I'm very new to css, html and asp.net. I'm trying to clone a website in order to learn web tech concepts. Well, when i write everything in inline css, everything works fine. But when put these inline css codes into an external file, it's all messed up. How can i fix this? I always face this trouble when I use external css. Some of my previous codes are affecting my following or later codes and I face this trouble.
I don't understand how css works. I use classes with dots, ids with # but can't uderstand yet how to put them in an order between my html codes.
I want to add a JSFiddle When I hover on recipes there's a new div pops up. There are 3 new divs in that popped up div. The 1st div has a list holding the info of soup, legume etc. I want those 3 divs stay next to each other. I want to be able to style them. I don't know how to style nested elements by using class and id. This leads to trouble. To clarify nested elements have a look at this please:
div
paragraph
div
list
a
how to style these elements from an external CSS file instead of inline CSS such as style="bla bla bla"
here's my codes and pics.
.auto-style1 {
width: 100%;
}
.aMain {
text-decoration: none;
color: black;
background-color: #ddd6d6;
display: inline-flex;
width: 100px;
height: 30px;
font-size: 13.5px;
justify-content: space-between;
align-items: center;
margin-left: 180px;
}
.divLogin {
border-style: solid;
border-width: 1px;
height: 46px;
width: 120px;
float: right;
margin-right: 180px;
margin-left: 16px;
margin-top: 12px;
background-color: #ffffff;
border-radius: 5px;
}
.pIcon {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.pLoginText {
float: right;
margin-right: 6px;
margin-top: 5px;
font-size: 15px;
text-align: center;
}
.divSendRecipe {
border-style: solid;
border-width: 1px;
width: 140px;
height: 46px;
float: right;
margin-top: 12px;
border-width: 1px;
background-color: #ff6a00;
border-radius: 5px;
}
.pSendRecipe {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.divSearch {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 46px;
float: right;
margin-top: 12px;
margin-right: 16px;
border-width: 1px;
background-color: #ffffff;
}
.divSearch .divSearchContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 200px;
float: right;
margin-top: 2px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.divSearch:hover .divSearchContainer {
display: block;
background-color: #ffffff;
}
.divSearch .divSearchContainer span {
display: inline-block;
margin-left: 10px;
margin-top: 12px;
font-size: 18px;
font-weight: bold;
color: white;
}
.divSearch .divSearchContainer a {
display: inline-block;
background-color: #ddd6d6;
width: 80px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
}
.divSearch input[type=search] {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 360px;
padding-left: 6px;
float: left;
}
.divSearch button {
all: unset;
cursor: pointer;
width: 46px;
height: 100%;
float: right;
font-size: 16px;
font-weight: lighter;
background-color: #d91616;
color: white;
text-align: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.divSearch button:hover {
font-size: 20px;
}
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
/*.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
float:left;
margin-top: 52px;
position: absolute;
display: inline;
}*/
/*.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}*/
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
.image {
height: 40px;
width: 40px;
border: none;
position: absolute;
top: 23px;
left: 42px;
}
<head runat="server">
<title></title>
<link href="testCSS.css" rel="stylesheet" />
<link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 30px; background-color: #ddd6d6">
<i class="fas fa-home"></i>MAIN PAGE
</div>
<div style="height: 70px; background-color: #ffffff">
<a href="mainPage.aspx">
<asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
</a>
<div class="divLogin">
<p class="pLoginText">
<strong>Log In<br />
or Sign Up</strong>
</p>
<p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
</div>
<div class="divSendRecipe">
<p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
<p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
</div>
<div class="divSearch">
<input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
<button><i class="fas fa-search"></i></button>
<div class="divSearchContainer">
<div>
<span>Popular Searchs</span><br />
cake
cookie
pasta
dessert
wet cake
browni
pastry
</div>
<div><span>My Last Searchs</span></div>
</div>
</div>
</div>
<div style="z-index: -1; height: 70px; background-color: #d91616;">
<table class="table">
<tr>
<td class="td">RECIPES<img class="image" src="pics/cook book.png" />
<div class="divContainer">
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
<ul>
<li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
</ul>
</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div3</div>
</div>
</td>
<td class="td">VIDEOS<img class="image" src="pics/camera.png" />
<div class="divContainer" style="margin-left:-124px;">videos</div>
</td>
<td class="td">TRENDS<img class="image" src="pics/trends.png" /></td>
<td class="td">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></td>
</tr>
</table>
</div>
<div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
this is what my codes do:
this is what i want it to do:
this is how my website looks.

Answer 1

when put these inline css codes into an external file, it's all messed up. how can i fix this? i always face this trouble when i use external css.
You can your css in a separate .css file and import it to your HTML file inside the <head></head> tags.
I think the below example explains it clearly.
Here I have my CSS in a separate .css file called myStyle.css. Then I have imported it to my HTML file. Remember in this example, both files are inside the same directory. Of course, you can put them anywhere and change the href accordingly.
/* myStyle.css */
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
</body>

Answer 2

The code share in the question
is not separating your CSS code into another file, but it is putting it inside the file as text, which is not evaluated as CSS. First, try to put that CSS code into a style tag as a proof-of-concept:
<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
margin-top: 52px;
float:left;
position: absolute;
display: inline;
}
.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
</style>
Once that works, you can proceed in separating the CSS code into a file.
Linking a CSS file
Let's create a CSS called style.css. Remember where it is and add this code to your head tag:
<link rel="stylesheet" href="/my/correct/path/style.css">
Now, load your page in the browser. Look at the Console of your Dev Tools. If you see an error that states that the file was not successfully loaded, then you have specified the wrong path. Fix the path until loading your page no longer complains about the file not being loaded correctly.
Moving the CSS
Now copy the inner content of your style tag discussed earlier and paste into your style.css. Don't copy the <style type="text/css">, nor the </style. Remove the style tag. Reload the page. Make sure that for now style.css does not contain anything else. Work until the page reflects your styling.
Resolve conflicts
Now, assuming that you have different external CSS that conflicts with your rule, the first question is: do you need the external CSS? If not, then don't load it. If yes, then adjust your rules to be more specific than the remote CSS's rules if you want your CSS to be reflected. Change your structure if necessary. Work on your structure and design bit-by-bit until you fix all conflicting rules and your page looks good.
Test in several browsers
When you are done with your changes, load your page in several browsers and see whether some browsers don't handle your design well. If so, find out what the problems are and fix them.