What is CSS?
CSS was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on - the markup of content, without worry about the design and layout.
CSS didn't gain in popularity until around 2000, when Web browsers began using more than the basic font and color aspects of CSS. And now, all modern browsers support all of CSS Level 1, most of CSS Level 2, and some aspects of CSS Level 3.
Web Designers that don't use CSS for their design and development of Web sites are rapidly becoming a thing of the past. And it is arguably as important to understand CSS as it is to know HTML - and some would say it was more important to know CSS.
CSS is an Abbreviation
It stands for Cascading Style Sheet.
Style sheet refers to the document itself. Style sheets have been used for document design for years. They are the technical specifications for a layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. A style sheet for a Web page serves the same purpose, but with the added functionality of also telling the viewing engine (the Web browser) how to render the document being viewed.
Have Some Choices of How to Use the CSS, either internally or externally.Internal StylesheetFirst we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below.
<head>
<title>My_Css<title>
<style type="text/css">
*CSS Content Goes Here*
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.
External StylesheetNext we will explore the external method. An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />
Or you can also use the @import method as shown below
<style type="text/css">@import url(Path To stylesheet.css)</style>
Either of these methods are achieved by placing one or the other in the head section as shown in example below.
<head>
<title>MY Css<title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>,
<body>
or
<head>
<title>My Css<title>
<style type="text/css"> @import url(Path To stylesheet.css)
</style>
</head>
<body>
By using an external style sheet, all of your (X)HTML files link to one CSS file in order to style the pages. This means, that if you need to alter 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
Cascading Order
In the previous paragraphs, I have explained how to link to a css file either internally or externally. If you understood, than I am doing a good job. If not don't fret, there is a long way to go before we are finished. Assuming you have caught on already, you are probably asking, well can I do both? The answer is yes. You can have both internal, external, and now wait a minute a third way? Yes inline styles also.
Inline StylesIs not mentioned them until now because in a way they defeat the purpose of using CSS in the first place. Inline styles are defined right in the (X)HTML file along side the element you want to style. See example below.
<p style="color: #ff0000;">Some red text</p>
[result]
Some red text
Inline styles will NOT allow the user to change styles of elements or text formatted this way
All the various methods will cascade into a new "pseudo" stylesheet in the following order:
- Inline Style (inside (X)HTML element)
- Internal Style Sheet (inside the <head> tag)
- External Style Sheet
As far as which way is better, it depends on what you want to do. If you have only one file to style then placing it within the <head></head> tags (internal) will work fine. Though if you are planning on styling multiple files then the external file method is the way to go.
Choosing between the <link related=> & the @import methods are completely up to you. I will mention that the @import method may take a second longer to read the CSS file in Internet Explorer than the <link related=> option.
Users with Disabilities
The use of external style sheets also can benefit users that suffer from disabilities. For instance, a user can turn off your stylesheet or substitute one of there own to increase text size, change colors and so on. For more information on making your website accessible to all users please read Dive into accessibility
Power Users
Swapping stylesheets is beneficial not only for users with disabilities, but also power users who are particular about how they read Web documents.
Browser Issues
You will discover as you delve farther into the world of CSS that all browsers are not created equally, to say the least. CSS can and will render differently in various browsers causing numerous headaches.
