General Guide to CSS
If you want to start using CSS but don’t know where to start, this may be the right place for you. Read how you can start using CSS below.
Introduction
Basically, CSS is the code, inline, internal or external, applying to the HTML code of the webpage. The beauty of the code is that it allows applying similar styling to similar elements throughout the site - the data may be stored only in one or two external files.
Inline code is the code, specified for an individual HTML tag, such as <h2 style="background-color:blue;">subheading</h2>.
Internal styles are put in the <head> of the document between the style tags:
<style type="text/css">
h1 {font-size:200%;}
</style>
External styles is the code put in an external CSS file (stylesheet) with an .css extension (styles.css, for instance), attached via a
<link rel="stylesheet" type="text/css" href="/styles.css">
Basically, the most convenient way is to put all the styles in an external stylesheet by copying the code directly, like this:
<h2 style="background-color:blue;">subheading</h2> gets reworked into
<h2>subheading</h2> in the HTML code and h2 {background-color:blue;} in the external CSS file.
Putting internal styles (the ones between the style tags) into an external stylesheet is really easy. Just copy and paste the code into the external file, save the file and remove the code from the HTML code.
When converting inline styles to external, you’ll need to specify the selector (and probably a class or an ID to the element both in HTML and CSS codes).
CSS syntax
Here are is the basic CSS code: h1 {font-size:140%;}.
Here is what it means: on every page on the site every main heading (<h1>) has a font-size of 140%. To change the look of the main heading on every page, you simply need to change a single line in the stylesheet. Slick, eh?
Now to the details.
h1 in the CSS code is called a selector, because this is what you select to apply styling to.
font-size is a property which you use to define the look of the selector.
140% is the value of the property you used to adjust the look of the selector.
For the code to work properly, all styles, applied to the same selector must be enclosed between curved brackets. Each property and its corresponding value are separated by a semi-colon (:), while every pair of a property and value is separated from another by a colon (;). It is a good idea to end a semi-colon after each property-value entry to keep the habit of doing so, because finding a single mistake in the code may be troublesome if you are not using a validator.
Why Cascading Style Sheets?
The Cascading Style Sheets have gotten their name for a reason. They are called ‘cascading’ because styles are applied in cascades. It means that all the styles that affect the page (browser default styles, external, internal, inline and user defined) are displayed in cascades: browser styles have the lowest priority - they can be overridden by any styles. External styles are displayed if there are no internal or inline styles. Internal styles can only be overridden by inline styles. However, inline styles can be overridden by the user defined styles (if the browser supports this), which have the highest priority.
Let’s see an example of this. For instance, we have the following styles:
- h1 has 200% font-size in the browser default (that’s true in Opera 9, at least)
- external stylesheet has it that
h1 {background:green;font-style:italic;} - internal styles have that
h1 {font-size:140%;} - inline styles have that
<h1 style="background:red;">main heading</h1> - user defined styles want a heading have a normal font style
{font-style:normal;}
Here is how the browser decides how to display the main heading:
- first it checks it default heading font-size - 200% and checks if there are additional styles
- it notices that the external stylesheet has a green background and an italic font style applied to it. No discrepancies here, yet.
- however, the browser also sees that internal styles have 140% font size applied. As internal styles are more important than browser default styles, 140% font size will now be applied to the heading
- inline styles make the heading have a red background, because inline styles override the external styles
- the browser notices that the user defined styles want a normal font style, so the headings will be displayed normally, not with italics.
As each of the higher priority styles has overridden the previous styles, the browser will display the heading according to the following code:
h1 {font-size:140%;font-style:normal;background:red;}
Classes and IDs
As you may want to distinguish certain selectors from others (like you would like to adjust the look of only certain paragraphs), you’ll need to use classes and identifiers. A class or an identifier (ID) is a name you give to a selector to distinguish it from the rest, both in the HTML and CSS Codes. An identifier can only be used once on the web site. Here is an example:
HTML code:<p id="intro">Some text</p> <p class="summary">Summary</p>CSS code:p#intro {font-size:120%;} .summary {font-style:italic;}
In the above example the first paragraph has its font size changed to 120% and the summary paragraph gets its text styled as italics. You may omit the name of the selector in the CSS code (.summary) if there are no other selectors with the same class or selector (no <h1 class="summary"> or <ul class="summary">).
It is generally the best to name the classes and IDs according to the roles their selectors (HTML tags) play in the HTML layout, like ‘topnav’ or ‘content’.
Conclusion
Now you can go on and learn what exactly to specify to change site look. You can search the engines for ‘css reference’ or go to www.w3schools.com/css/default.asp to see CSS examples.
Related posts:
- Basic Guide to CSS
- Social search - another approach to internet marketing
- Web Content Accessibility Guidelines: for web designers?