I hope all is well.
So, currently I am using a self-made template from dreamweaver (which includes a header and a footer) and I use this template to create new pages from it.
Many tutorials style the body and/or html tags inside the stylesheet, which would be fine if you were only creating one page, however I have multiple pages attached to one stylesheet.
So, by following any of the tutorials mentioned above It would completely change the layout on my other pages since they are all linked to the same stylesheet, is there any way around this?
I hope this makes some sort of sense,
Thanks in advance, Mark.
Assuming I understood your question correctly, you can link the same style sheet to multiple HTML pages. You'd just have to write your CSS accordingly.
Example:
.PG1-BOX,
.PG2-BOX{
}
Furthermore, keeping all your external CSS in one style sheet is better for maintainability and reduces loading times. If you had multiple style sheets, the user has to request them all and then download them all whereas maintaining just one stylesheet would reduce this process.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
So I recently finished the HTML and CSS course at Codecademy, and I want to practice coding with html and css. My problem though, is that I don't know where to start. I've been searching around to try and find the information I need, but I can't find anything. I kind of feel like it's so obvious noone's ever needed to ask, but I don't know, so here I am, asking.
While searching for the answer to this question, I could only find sites that teach how to use html and css, like Codecademy, and sites that let you test html code like w3schools.com, but no sites that let you practice html and CSS.
Here's my question:
Are HTML and CSS created as .html and .css files on my computer?
You should ask new question for each of the questions you posted.
Where do I code html?
You can use any text editor. Try Sublime Text - download the app for your operating system and install.
Create a new file, saving it with the file exetension .html. Be sure you saved the file in an easy to find location - like you would with any word processing document or spreadsheet.
Open a browser (Safari, Chrome, Firefox).
Click and drag your new HTML file into the tab window.
Make some changes in your HTML file.
Refresh your browser tab.
You're now on your way to learning more about coding HTML in your local environment.
You can create HTML, CSS and JS files on your hard drive and simply open up the HTML file by double-clicking it (or opening it directly through the browser's file menu).
Typically these files are stored on an HTTP server that provides content when asked... but for your purposes to practice HTML and CSS, you can simply save the files on your hard-drive and open them from there.
Yes, they are (but CSS can be stored on a server as well, see 2.). You can then open the HTML file you're editing in any browser and see the output.
You can include CSS in your HTML file by using:
<link rel="stylesheet" type="text/css" href="path-to-your.css">
The path to CSS file can also lead to an online server, if the CSS file is stored there:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simplest way I can think to answer is:
Are CSS and HTML coded in a file on one's computer?
Yes
If so, how is the CSS connected to the HTML, and how are these connected to a website?
In the HTML file you specify which CSS files will be used in your page (I'm assuming you know what CSS files are for). The web browsers like Internet Explorer, Firefox or Chrome, read the HTML code and produce the sites you see anywhere.
If you are only practicing basic HTML:
Open notepad (Windows+R, type "notepad", enter)
Write some code like the found here: http://www.w3schools.com/html/html_basic.asp
Save your file with .html extension
Open it in your web browser by just double clicking the file
EDIT. Check this other example to see how to reference the CSS files http://www.w3schools.com/html/html_css.asp.
You only need to put your HTML file and CSS file in a folder in your computer, you don't need go to any site to practice this because HTML and CSS code is interpreted directly by your web browser.
Are CSS and HTML coded in a file on one's computer?
yes and no.
Basically CSS can be anywhere; your computer, your server, someone else's server, etc.
Your Chrome blocks some local sources for security reasons, but Firefox handles them pretty well. If you have a static website (that does not involve with any database), you can just create a directory and make html, css, and javascript files and open with Firefox to test.
Otherwise, get hosting services like godaddy, or get a server like Amazon Web Services and put them in there.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
Typically, this is how people do.
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- your body... -->
</body>
</html>
If not, where are HTML and CSS coded for use on the web?
This was answered above.
CSS and HTML are not things that need to be installed on your computer, you just need to create a file with the .html extension, put some code in it and open it with a browser. The browser interprets it automatically, the same goes for CSS. To create HTML pages for practice, all you need to install is an IDE to edit your code.
Ok - everyone has to start somewhere and I'm going to assume you are a novice so if any of this information is too basic, please excuse it.
There are tiers to consider here....First let's break down what the languages do - I'm going to talk about additional languages because I see people already talking about servers and scripting to so I'm going to try and tie this all together for you. I started self taught and learned a lot of hard lessons so hopefully this add's a little bit of an advantage to the learning curve.
SERVER Think of a server as a computer. It run's slightly different software but the principles are the same. It's only job is to store code, interpret it and present it when called. A very popular server software that you'll find is apache so let's focus on this for now. Windows is not a server and can't be used as a server. However, it's possible to edit a server with windows and it's possible to run server software on top of windows just like any other application. You'll hear references to WAMP, LAMP, XAMPP and a bunch of other acronyms but for now you just need to know why they exist and what they do. A server is not required to write and produce html and css documents
HTML The primary purpose of HTML is to tell a web browser what it's looking at. You'll see a lot of HTML4 vs HTML5 and a ton of other arguments that won't make a lot of sense up front. The important thing to remember about HTML is that it is the framework for everything website related. A lot of people will argue that other languages are more important for one reason or another but without html, none of the other languages matter at all. Whatever you know about this is fine for now. Start small and work your way up.
CSS Is amazing. CSS3 is the current standard but there are still some things that are not cross browser compatible. That's a story for another day but the basics are the same everywhere. You define your classes, id's and elements then tell them how they're going to look. The more you get in to CSS the more you'll realize how amazing it really is. It's useful on a lot of levels and plays a big part in some scripting languages. The biggest thing to remember about CSS is that you should write as little as possible. The more rules you write, the more chance there is for overlapping and something you wrote 3 files ago on line 463 is going to dominate a new rule you just wrote. Try and write as much as possible in classes too so you can really make your code globally usable.
PHP/ASP These are just two of the more popular languages that are considered back end languages. When you're thinking of a website, break it down like this. Front end = Browser, Back end = server. Anything that PHP does is on the browser side. As an end user of a website, you'll rarely see it but it's a major component. This is relevant because as you grow, you'll wonder about trying your hand at a back end scripting language. That's great but that's when you're going to start getting in to servers and such so I'm sure you'll hear a lot about the benefits of it but for now, just stay focused on the basics until you're comfortable.
Javascript/jQuery Again, this is just two popular examples of the many scripting languages that are available on the client side(the browser). These languages can generally be viewed(and edited) by the end user. They are extremely useful for changing pages content without reloading the page and they can talk to the server languages as well. Again, get more comfortable first with your basics before branching out here but with the references you're bound to receive to these languages as you learn, it's helpful to know what they do and why.
Editor To edit html you can absolutely use any text editor. Word, notepad, notepad++, sublime-text, wordpad...literally anything that saves in a standard text format. As long as the extension is html, css, etc. The editors geared towards programming offer a lot of features and benefits as compared to the basic editors available in your windows/mac setup. Try your hand at a few different ones and see what suits your taste. You can write one file of html, download the programs and right click to open with each program to see the differences. Personally I recommend Notepad++ but to each his own.
Why is my answer so long? I know this is a majorly overkill answer to your question however I also know how hard it was for me to get started in this field without some very basic knowledge. This should be enough to get you off and running and hopefully help out when you encounter some unfamiliar territory. In the future, if you find yourself looking to get in to the server/scripting world, let me know and I'll pass along a write up I did on setting up xampp for windows.
Good luck!!
You need a text editor to practice your code I recommend downloading Sublime
Its free, in sublime under view you can change syntax which is the language you are programming in you can set it to html or css or any other language you desire.
The structure for "connecting" html and css is usually a simple folder like structure.
Create a folder called Website
In that folder you would have your html file(s) you can call it index.html
Also in that folder you would have sub folder(s) for your CSS and JS but since you are just working with CSS now create a folder named css. This is where you will save your css file that could be called something like style.css
Here is a more through guide on folder and directory structure.
Keep going with Codecademy and build your own projects in the browser.
I'd recommend taking a look at a good example. HTML5 Boilerplate is a good starting point and has some good practices for a project (in my opinoin). This may be a good reference for you to get a feeling of how the javascript and css files can be arranged and linked to. The website is static so you can open the index.html file with a browser to preview it. You can also make changes to the css and javascript files to see how this changes the index.html page.
https://html5boilerplate.com/
You're asking a very broad set of questions but hopefully there's quite a few good answers in here to point you in the right direction. Good luck!
It is technically possible to have both HTML and CSS in one file using the style tags:
<html>
<head>
<title>Title</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Test Text</h1>
</body>
</html>
However it is considered proper practice to use Cascading Style Sheets, which is probably what Code Academy used.
Checkout setting up a WAMP, LAMP, MAMP server depending on your platform (W) Windows, (M) Mac, (L) Linux.
http://www.wampserver.com/en/
https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation
https://www.mamp.info/en/
Then in your respective directory (html_public, Sites, wherever) you will have a local server environment where you can develop locally.
I use the Sites/ setup on a mac
css and javascript are usually linked in the head section of an html document.
You will need a editor - I recommend looking at Sublime Text or Atom.io
If you just want to play around for a while before attempting your own projects, you can build on sandboxes like http://codepen.io
Are CSS and HTML coded in a file on one's computer?
A: depends either you can create both css and html in one file or in different files. If you using lots of css code then everyone will suggest you to write them in different files and you can code them in someone's computer or on server.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
A: you said that you have done html and course and you don't know who to add a css file to a html file. (Use Google sometimes) use this link you Wil get you answer. After coding you can test them using your web development tool if you are developing in a tool. Else use your web browser to test.
I suggest you to visit websites as much as you can an use chrome tool to see how that website is done (you can only find front end parts.)
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages.
[In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
Is it a good practice? Or I should create separate CSS for each page?
An example of that what I have done:
page-1.html:
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
/*
.......
*/
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular
Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
You will allow browsers to cache .css files thus resulting in faster loading times;
It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' #import to divide blocks of code f.e form styles and so on.
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
It's easy for browsers to keep the cache
It's better for maintenance, as you have all your design rules in just one place.
As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
I would recommend you use SCSS or LESS.
These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax.
They will allow you to modularise your code and then com
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I developed a small website with 15-20 pages.
The site consists of -
Header menu.
Content (this is different for each page).
Footer.
I somehow not able to digest the fact that I have to write the code for header menu and footer on all the pages.
Can someone please help me understand how can i manage to write repetitive code in one place and import it or include it in all the pages.
Also, it'll be a bonus if you can mention how can one handle the same case with the javascript code, images and css too?
Your question is very broad and generic AND very much on the right track. It seems as though you are approaching this site building project from a very static perspective while you actually need to approach it dynamically.
The bare minimum that you can do is to use SSI as suggested here:
http://en.wikipedia.org/wiki/Server_Side_Includes
Now, depending on your level of knowledge and willingness to learn you will be able to accomplish this much more elegantly if you use a scripting language such as php for example.
http://www.w3schools.com/php/
Scripting languages allow you to create content once and then include the file with that content with a single line of code into another file. PLUS do a lot more with it down the road if your website needs to grow.
For example, you can create header.php and footer.php and include them in your pages that must also be php files. That way you only create header and footer once and re-use them..
If you create header.php and put your header code into that file ... And then you create somepage.php which is your content page.. In order to include the header code you have to write this into some page.php where you want your header to be
<?Php include('header.php'); ?>
It is important that you respect the html containing elements structure. The SSI method literally injects exact content as is in included file.
You can literally split one file in multiple parts, save them as php and include them into third file and get the same result as the original file was.
You do have to insure that your hosting server supports dynamic scripting language that you want to use. Most hosts support PHP.
Also, as far as including JavaScript goes. If you write JavaScript properly then you can write all your JavaScript code in .js files and then include those files into your php or html files when needed. The same goes for CSS files. You put CSS code into style.css file and link the file to your something.php
This is how you include JavaScript files..
http://www.w3schools.com/tags/att_script_src.asp
You usually put this into element of your page
<script type="text/javascript" src="jsfile.js"></script>
This is how you link a css file with your other files..
http://www.w3schools.com/css/css_howto.asp
You put this into element of your page.
<link rel="stylesheet" type="text/css" href="style.css" />
However,,,
All this is still pretty rudimentary. Maybe you should look into using hosted WordPress or a similar content management system to help you build a nice dynamic web site.
Or, a good way to start, if you have a desire to actually learn, is to learn basics from www.w3schools.com
You will need to go through
HTML and HTML5,
CSS2 and CSS3,
PHP (this is what allows for dynamic stuff- you can try learning python alternatively.. I prefer php myself),
JavaScript,
JSON
And then when you learn JavaScript you will want to get into JavaScript libraries,, like jQuery and ultimately Angularjs (this is a more advanced library but very useful)
Also you will want to learn how to use databases to store data so you don't have to create a new page at all every time. You should look into using MySQL with PHP for that. You could alternatively look into Postgress, liteSQL and other options too.
All of these, except for Angularjs are available to learn for free at w3schools website. You can just google it.
One more thing...
This may seem intimidating but if you suspend that feeling at first and stick through the very first paradigm challenges you will learn that it is not at all that complicated.
Good luck!
P.S.
My web programming career started 15 years ago when I tried building a small site and got frustrated with exactly the same problem you are facing now :)
You may use Server Side Includes (SSI) if your server supports it (http://en.wikipedia.org/wiki/Server_Side_Includes).
As for css and javascript - move code and declaration to separate files and include link to them on your pages (usually in head element) like this: <script type="text/javascript" src="javascript-file.js"></script> and
<link rel="stylesheet" type="text/css" href="css-file.css" /> (see http://www.w3schools.com/tags/att_script_src.asp and http://www.w3schools.com/css/css_howto.asp for details).
Is there a way to add a Javascript segment to each page in my website via CSS?
I am looking to add some Javascript tracking code (for my own benefit (using Google Analytics)) before the closing </head> tag on every page.
The simple question is: is there a way to add code to the HTML on every page of my website between the <head> and </head> tags using CSS to dynamically insert it (as opposed to going through and updating every page manually)?
Thank you,
Mick
No, CSS is a collection of styles to apply to elements (which can handle alternating states of controls, such as :hover), but isn't functional in the way you desire.
However, it seems to me that, if you can reference a CSS file globally, then you could simply place your Javascript in a separate file and reference that in each of your pages with a <script> tag (similar to how you would do with CSS files.)
Furthermore, if you're using a framework such as ASP.NET, then you can use master pages as templates from which relevant pages derive, reducing redundancy of this sort of thing.
Is there a way to add a Javascript segment to each page in my website via CSS?
No. Use a template language (e.g. TT) or include system (e.g. SSI) if you want common HTML across pages.
Nope, you can't add javascript through css. These are different techniques, one for changing the look of your website (css) and one for adding functionality to it (javascript). There is no way to add javascript through css-code.
As all the other answers stated: No, in general not.
Only MS IE offers such a solution, using the behavior-property.
I currently use this for an hover-anything-script for IE6 (included inside a conditional comment), which allows to add the CSS-:hover-selector to any HTML-element:
body {
behavior: url(/js/csshover.htc); }
The csshover.htc is from Peter Nederlof (LGPL).
See also: MSDN HTC Reference
Others have already noted that it's impossible. It seems that your site is static html only. Then you could write a little script that would prepend a link to javascript file before