CODEWITHSUNDEEP
htmlcss
DeNvEr
DeNvEr

Reputation: 11

HTML and CSS are not linking/ communicating

I am new to HTML coding, and so far, I am really hooked! But, I have run into quite a problem... my HTML and CSS do not link together properly. I have taken several tutorials, but change the outcome of my website. Is there, outside of the code, a means of linking the two, besides being in the same file, that I am missing? Or am I simply messing up? Here is my code:

@charset "UTF-8" backround-color: black;
 font-family: Verdana, Geneva, Arial, sans-sarif;
 padding:0px;
 margin:0px;undefined}undefined/* CSS Document */undefined/* The body tag style applies to all elements on the page*/undefined body {
 wrapper {
     width: 960px;
     height: 800px;
     margin-left: auto;
     margin-right: auto;
     background-color: #F25F29;
}
/* The column-1 ID style is floated right*/
 column-1 {
     float;
     right;
     width: 600px height: 600px;
     background: #55D9D9 
}
/* The column-2 ID style is floated left*/
 column-1 {
     float;
     left;
     width: 360px height: 600px;
     background: #F2B544 
}
/* Selector for tags seperated by commas applies the style to all tags*/
 h1,h2,h3,h4,h5,h6,p,li {
     margin-left: 15px;
}
 h1 {
     color: white;
     padding-top: 15px;
}
/* Selector for tags not written in commas applies in specific circumstances*/
 column-1 h1 {
     padding-top:5px;
     color: black;
     font-size:36px;
}
/* Advanced web design relies on class or ID style boxes*/
 .box {
     height: 100px;
     width: 100px;
     float: left;
     margin:15px;
     padding:25px;
     background: #A8D977;
     border:2px solid gray;
}
/* The following pseudo-code applies to the box class when in a hovered state*/
 .box:hover {
     background-color: #F2B544;
}
/* This clear class style terminates float*/
 .clear {
     clear: both;
}undefined}undefined header, footer ( background-color: F27830;undefined color: red;undefined padding-top:5px;undefined padding-bottom:5px;undefined
<!--The HTML5 doctype (document type) decloration is very simple-> <!DOCTYPE HTML> <!--All page content is inside the HTML element-->
<html>
<!--Head element content is not visable in a browser window-->

<head>
    <!--The UTF-8 character set supports all symbols and characters-->
    <meta charset="UTF-8">
    <title>HTML TEMPLATE</title>
    <!--The following link links to our style sheet file-->
    <link rel="stylesheet" type="text/css" href="style.css"> </head>
<!--Content visable in the browser's window is inside the html element-->

<body>
    <!--All our content is enclosed in the wrapper ID style-->
    <div id="wrapper">
        <h1>Heading One Content</h1>
        <!--column-2 ID style is floated left and used for navigation-->
        <div id="column-2">
            <h2>Links...</h2>
            <ul>
                <li>
                    <h3>
                        <a href="#">Link 1</a>
                    </h3>
                </li>
                <li>
                    <h3>
                        <a href="#">Link 2</a>
                    </h3>
                </li>
                <li>
                    <h3>
                        <a href="#">Link 3</a>
                    </h3>
                </li>
            </ul>
            <!--column-1 ID style is floated right and used for content-->
        </div>
        <div id="coulmn-1">
            <h1>Right Coulmmn Heading Here </h1>
            <p> Right column content here </p>
            <div class="box">
                <p>Box Content</p>
            </div>
            <div class="box">
                <p>Box Content</p>
            </div>
            <div class="box">
                <p>Box Content</p>
            </div>
        </div>
        <!--The clear class style clears (removes) float-->
        <div class="clear"></div>
        <h4>Contact info here </h4>
    </div>
</body>

</html>

Upvotes: 0

Views: 97

Answers (4)

FelipeAls
FelipeAls

Reputation: 22171

Your CSS is invalid right at the beginning and then there's no selector and then maybe something else… so it seems like all/many rules are ignored because well, when parsed by a browser they aren't rules!
When a browser sees and tries to parse:

@charset "UTF-8" backround-color: black; font-family: Verdana, Geneva, Arial, sans-sarif; padding:0px; margin:0px; } /* CSS Document */
  • After the first at-rule @charset "UTF-8" there is no semi-colon ;. Browser will parse till he encounters one, see that value "UTF-8" backround-color: black makes no sense for @charset thus ignores the latter
  • Then there's a declaration font-family: Verdana, Geneva, Arial, sans-sarif; with no selector selector { /* declaration(s) */ } so ignored
  • same with padding
  • then I can't say, edit of your post shows that the inline tool from SO also have problems with invalid CSS and it added many undefined (not unexpected)

So first rule of CSS debug is "make sure your CSS is valid". Warnings may be fine but errors no ( most errors when you've experience and you know what you want)
/mylife I once forgot to close a parenthes(ei)s in background-image: url(/some/path/image.jpg; and browser was ignoring 50 lines of CSS till the next )… Time lost+anger but lesson learned ^^

➡️ CSS Validator

Same with HTML btw HTML validator

Syntax highlighting in your editor helps a lot too.

Other useful tips IMHO: verify that this element has a dimension. 0px wide or tall won't help seeing it. Add a background color, can you see it? (add to everything in fact). Why is there a vertical margin or an horizontal scrollbar or why why ⇒ * { outline: 1px dotted blue; }

Upvotes: 0

Evans Koech
Evans Koech

Reputation: 1

I would suggest that you use external css, create a style.css, naming of your css selectors is important I can see that you have used wrapper, column-1, etc use them as ids or classes and while accessing use the #wrapper,

.wrapper for classes

wrapper

Example 

<div class="wrapper">

In your case file 

.wrapper{

css properties }

wrapper for id

Upvotes: 0

James Meas
James Meas

Reputation: 347

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

https://www.w3schools.com/html/html_css.asp

Examples

To set the div somelement's width property in css to 70 pixels, we can use 3 ways.

Inline

<div id="someelement" style="width: 70px;">

Internal

<head>
    <style>
        #someelement { width: 70px; }
    </style>
</head>

External

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css:

#someelement { width: 70px; }

Upvotes: 0

Bhumika Mishra
Bhumika Mishra

Reputation: 11

I would suggest you verify the following and try again:

  • You need to include the CSS in your HTML. Make sure to put the relative path of your CSS file in "href". Following is the code to link your CSS to HTML: <link rel="stylesheet" type="text/css" href="yourcssfilename.css">

  • If you have already linked the CSS, a possibility is that the CSS file might be invalid, i.e any token like " ; , . : or /*" in the middle of the file might be causing a load of CSS properties to fail.

Upvotes: 1

Related Questions