CSS Website Folders
Listening Video
CSS Website Folders
A good way to set up a website's styling is to create a "style" folder that will contain all of your .css files. You can also choose to put style specific imagery into that folder as well for relative referencing of the stylistic images. Inline CSS methods work great for quick stuff on a single page project, but if you want the best and most organized way to manage a big robust and dynamic site, use external styling and keep everything as organized as possible.
Set up your website project folder similar to the illustration below. This structure is going to be very helpful for staying organized and adding/editing styles as you build on. Since the goal for using external CSS is to make design changes and site management easier, we will also want to keep a nice tidy directory structure as we build on.
The following code example below demonstrates how you can specify external CSS stylesheets for your web page using the HTML<link> element, which is used to specify external resources.
I will sometimes put all of my website styling specific background images and such style specific imagery directly into the style folder to reference them there. It is realy up to you to determine what makes most sense for you, as images used for styling your site can be referenced from anywhere they reside on your web server.
Set up your website project folder similar to the illustration below. This structure is going to be very helpful for staying organized and adding/editing styles as you build on. Since the goal for using external CSS is to make design changes and site management easier, we will also want to keep a nice tidy directory structure as we build on.
The following code example below demonstrates how you can specify external CSS stylesheets for your web page using the HTML<link> element, which is used to specify external resources.
CSS CODE EXAMPLE
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>My Web Page</title>
</head>
Referencing stylistic images in your style sheet from the images folder--> "../images/my_pic.jpg"<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>My Web Page</title>
</head>
I will sometimes put all of my website styling specific background images and such style specific imagery directly into the style folder to reference them there. It is realy up to you to determine what makes most sense for you, as images used for styling your site can be referenced from anywhere they reside on your web server.
0 Response to "CSS Website Folders"
Post a Comment