Practicing with html and css


#1

Recently I have started putting my html and css skills to the test, however, I do not understand how to properly link my html file to the css file. Or to be more specific, how does it work? Do I just make a new page(in notepad) and add the same link in it? Or do I have to do something more?


#2

With the <link> element in the <head>.

The element takes three principle attributes: rel, type and href.

rel="stylesheet"    This attributes describes the relationship to the document.

type="text/css"     This attributes describes the MIME type of the resource.

href="styles.css"   This is the location of the resource (an URL).

Eg.

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

XML compliant HTML5 has two other variations that explicitly close the otherwise void element.

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

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

We don't need to follow this practice unless we are serving pages as application/xml. Our documents at this stage are text/html so can follow HTML 4 syntax rules.

You can use Notepad but when saving, be sure to set the encoding to UTF-8 else the page could have strange characters displayed. A more suitable text editor that is free and works great is Notpad++. Once installed you can set it as the default text editor when clicking .txt, .css and .html files as well as all the languages you may be writing (Edit with option).

Create a safe area in your documents folder and isolate each project in its own folder within that. Each folder can be arranged in roughly the same way.

_projects
  + project_name
    + css
      - styles.css
    + js
      - script.js
    + images
      - logo.png
    - index.html

#3

But do I need to open a new notepad page, and will I need to add the same link in the CSS file? I assume I create a new notepad page and use <link rel="stylesheet" type="text/css" href="(my file/url">, right?


#4

Create each file in its own page and save in the folder that describes their mimetype.

The path to the style sheet will be,

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

The index.html file is called the root document, and is always in the top level of the folder.

The style sheet contains no other information than style rules and perhaps some comments. Never write HTML in a CSS file (or any other language).

When loading multiple style sheets, the order in which they load has an important bearing on the cascade. Style sheets that override default styles load later. When loading a CSS file from a resource like jQuery or Bootstrap, load the jQuery first, followed by Bootstrap followed by your style sheets. Always load styles before script.


#5

So the order of the files in the folder DO matter, correct?

So I put the html AND css files in that folder?


#6

Order is of no importance in folders. They are simply storage spaces and have no order.

The things that need order are load sequence, and the CSS cascade. We never run script while the page is loading, which is why you will often see the script elements at the end of the HTML so they don't download until the page is in the DOM. Scripts that don't interact with the page can load any time but will affect page load speed. Usually these scripts run immediately after downloading.

Of course a web document has order, just as an outline has order, but that has more to do with structure and semantics.


#7

Put the index.html just inside your project_name folder. The CSS file gets saved in the css folder.


#8

Okay, the project name is 'Fake browser', and I have a 'css' folder inside of that with 'styles.css' inside it(my css code) and also inside Fb is index.htm, but If I click html then it starts the browser, although I can OPEN it by right clicking and selecting 'open with notepad.' Yet whenever I run the html the css does not show up.


#9

So your HTML will look something like this...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fake Browser</title>
  <link href="css/styles.css" rel="stylesheet">
</head>
<body>
  <div id="wrapper">
    <h1>Fake Browser</h1>
  </div>
</body>
</html>

Since you are running the file locally, you don't need a type attribute on your link element. The browser is expecting text/css and can read the header of the file to confirm its MIME type.

The CSS might look like this...

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: url(images/bgrd.png) no-repeat center center;
  background-size: cover;
}
#wrapper {
  width: 95%;
  margin: 0 auto;
  border: 2px solid #666;
}
h1 {
  font-family: "Palatino Linotype", "Times New Roman", sans-serif;
  font-size: 2rem;
}

You will need an image file large enough to use as a background, Change that line to background-color: just to test the style sheet.


#10

Hmmm, here's how I link them

(in html)
<link href="styles.css" rel="stylesheet">

and the css file is inside a folder called css, the css file is called styles.css, shouldn't it work?

(Annoying to say the least... :unamused:)

I feel like I'm missing something obvious...


#11

If the CSS file is in a folder, then it is not on the root path. That is why, "css/styles.css".


#12

mtf is right, you need css/style.css in that case.

What is important to understand here is the relative path (relative path - google serach). with href="styles.css" the html file looks for a file called style.css in the same directory, which doesn't exist, since it is in a sub directory

you have to specify the path relative from where the html file is located

if you are not familiar with path, i recommend to read about path (relative path - wikipeida)


#13

There it is.... Okay it works now, I'll definitely read up on paths. Thanks!