CSS

It's high time we added some CSS styles to our HTML markup. We'll not deep-dive into the details about the styles itself, as this is not a tutorial on Web Design. The stylesheet can be downloaded from here in its final shape. Add the Site.css stylesheet to the project, and don't forget to set the Copy To Output Directory property to Copy If Newer.

In order to include the stylesheet in our HTML markup, let's add the following to our View:

let cssLink href = linkAttr [ "href", href; " rel", "stylesheet"; " type", "text/css" ]

let index = 
    html [
        head [
            title "Suave Music Store"
            cssLink "/Site.css"
        ]

This enables us to output the link HTML element with href attribute pointing to the CSS stylesheet.

There's two more things before we can see the styles applied on our site.

A browser, when asked to include a CSS file, sends back a request to the server with the given url. If we have a look at our main WebPart we'll notice that there's really no handler capable of serving this file. That's why we need to add another alternative to our choose WebPart:

    pathRegex "(.*)\.css" >=> Files.browseHome

The pathRegex WebPart returns Some if an incoming request concerns path that matches the regular expression pattern. If that's the case, the Files.browseHome WebPart will be applied. (.*)\.css pattern matches every file with .css extension. Files.browseHome is a WebPart from Suave that serves static files from the root application directory.

The CSS depends on logo.png asset, which can be downloaded from here.

Add logo.png to the project, and again don't forget to select Copy If Newer for Copy To Output Directory property for the asset. Again, when the browser wants to render an image asset, it needs to GET it from the server, so we need to extend our regular expression to allow browsing of .png files as well:

        pathRegex "(.*)\.(css|png)" >=> Files.browseHome

Now you should be able to see the styles applied to our HTML markup.

GitHub commit: d40731ce9a0b0d7328de480815aa90fdf2d77a88

Files changed:

• App.fs (modified)
• Site.css (added)
• SuaveMusicStore.fsproj (modified)
• View.fs (modified)
• logo.png (added)