Introduction to CSSNov 26, 2019 1928 seen
Now it's time to learn about some CSS basics. CSS (cascading style sheet) files allow separating web sites an HTML content from its style. Whenever you use your HTML file to arrange the content, but all of the presentation for example fonts, colors, background, borders, text formatting, link effects and etc, are accomplished within a CSS.
That's why you have some choices of how to use the CSS - internally or externally.
First, we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each HTML file you want to style with the CSS. Find the format for this in the example below.
CSS Content Goes Here
Here, each HTML file contains the CSS code needed for styling the page. That means any changes are wanted to make to one page, will have to be made to all. This type can be good if you need to style only a page, or if you want different pages to have different styles.
Next, we will explore the external method. Any CSS file can be created with any HTML editor or text such as "Notepad" for example or something like that. A CSS file contains no HTML, only CSS. You just need to save it with the .css file extension. You can link to the file simply by placing one of the following links in the head section of every HTML file that is going to be styled with CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” /> or you can also use the @import <style type=”text/css”>@import url(Path To stylesheet.css)</style>
If you need to adjust the design of all your pages, you only need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
- Easier Maintenance
- Reduced File Size
- Reduced Bandwidth
- Improved Flexibility
Users with Disabilities
Users with disabilities also can benefit from the use of external style sheets. For instance, a user can turn off your stylesheet or substitute one of there own to increase text size, change colors and so on.
To swap stylesheets is useful not only for people with disabilities but also for power users who are particular about how they read Web documents.
You will discover as you inquire further into the world of CSS that all browsers are not created equally.