Introduction to CSS

Nov 26, 2019  3738 seen

Introduction to CSS

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.

Internal Stylesheet

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.

<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>

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.

 

External Stylesheet

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 a 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.

 

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 their own to increase text size, change colors, and so on. 

Power Users

Swapping stylesheets is useful not only for people with disabilities but also for power users who are particular about how they read Web documents.

Browser Issues

You will discover as you inquire further into the world of CSS that all browsers are not created equally.