Popular Layout

Welcome!

Making websites more affordable and easy to manage.

Why I like internal style sheets more than external when it's for a static website or a one-page or two-page website.

It's easier to scroll up and down in the code editor rather than having to click back and forth between multiple tabs. If I'm working on a project that has two pages that are straightforward and similar to one another, for most cases, the outline of the style sheet would be consistent between one another. I'm going to have the same header and title for the website, the menu bar is going to be the same, as well as the footer. Usually, the different features will involve the main content such as the text, the images, removing the hero section, and sometimes the layout of the main content sections.

So I put the style sheet in the index file for the homepage and the style sheet in the about file, for example, for the page with the mission statement or the history. Some developers don't like this because it's not best practice or because they feel like there's too much "clutter" in the text editor for that file. And I do understand that with an internal style sheet I have to scroll and scroll, which may become tedious to scroll past through multiple edits. Especially if I go a little overboard with the background graphics. But I guess at that point it's a matter of which practice someone finds more or less tedious. I don't know if you're like me, but I don't want to constantly be switching back and forth between tabs. And I don't have auto save turned on in my IDE so that's an extra step added; clicking the save button. I don't need to add to that.

Besides, I'm already dealing with a million open tabs in my browser anyways. And I know the simple solution would be, "Well, then why don't you just close more of those tabs? Since you're so tired of dealing with so many tabs." The rebuttal to that is because well, I'm using them. I'm using all of those tabs. That's why they're open. That's why they're there. I'm already going back and forth between different blocks of code that I'm implementing, and different variations of essentially the same website because I need to see that comparison.

There is a difference between an 88% zoom in the style sheet and a 92% zoom in the style sheet or a 98% zoom in the style sheet. Plain and simple, it is just easier to do that visually if I don't have to go to the IDE and make sure that I'm opening up the index.html tab and then going to open up the style.css tab and then making sure I'm saving both of them between different adjustments. The email button in the bottom of the footer is styled the way I want it to be, but maybe it turns out I actually don't like that it's next to the phone number. I don't have to switch between tabs in the editor to make sure of all that. And if I were doing bigger projects, and when I do bigger projects, I definitely have different sheets because it does get a little bit more tedious when you have those bigger projects, especially if there are multiple flexboxes involved. But for static websites, there's just no need for anything but internal style sheets.

Um Um what are the most important things to remember?

Your page keeps breaking. You haven't a clue as to why. You played by the rules. You put in your time. Yet, here you are again with a broken page. Who could the culprit be? Oh, whoever could it be?

There's four suspects in the lineup. You need to take a hard long look to see who it is. And these four suspects go by the following: quotation marks, semicolons, a closing section, or a closing div. So you need to go back through and check if you have quotation marks around strings, if you're missing a semicolon where it's supposed to be, if you're missing a closing section, or if you've added an extra closing div. These are the highly likely culprits who might just be behind the reason why your page is broken again.

Don't forget. Don't forget. Don't forget. I forgot.

I'll just scroll down and I'll scroll down and I'll keep going through the style sheet, and then something catches my eye. There's a period missing in front of this word. The word is "section." I think to myself, "Oh, I need to put a period there." So that's what I do. I put a period in front of the section container that's before the .section-one container. Then I scroll down and I scroll down, and I keep scrolling until I reach the line of code that I originally intended to edit. I save the file and reload the link in the browser. The whole page is broken.

I begrudgingly ask myself, "Why?" So I check the text editor and go back over the previous changes I made. Then it dawns on me, "Oh yeah, that's right. I'm not supposed to put a period there." Sometimes I make mistakes while coding; it's part of the process. After I learn what the issue is, what I'm supposed to do usually sticks in my head better. But for some reason with this particular rule, I have to keep reminding myself of it. The section container without the period doesn't have it because it's handling every section without a class in the HTML structure. I don't need to add a period to this particular part. The section-one structure with a period is aimed at one specific class. The fact that it's missing is not a typo.