CSS Introduction


Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

Cascading Style Sheets (CSS) are the major role in web design. Removing most or all of the presentational information from an (X)HTML file and placing it in a style sheet has numerous advantages, file sizes, huge bandwidth savings, and easier maintenance. What is more, by keeping all presentational information separate from the core content of a site, the web designer is able to make small or large changes to a whole web site in a matter of seconds. These are just a few advantages that style sheets give us, and why web designers cannot stop talking about it.

Following type of CSS we used:

  • Inline
  • Embedded
  • External
  • Imported

Inline Styles

Inline styles make use of the style attribute applied to specific tags within the document, where the actual style value is declared using the form name:value, or property:value, if you want to use the correct terminology. There is a more detailed explanation of correct CSS syntax later in the “Effective CSS Syntax” section.

Example

Applying CSS Edututorials.com

Click an example below.

Embedded Styles

Embedded styles still have you working exclusively within the (X)HTML template, but this time all styles are grouped together in the head of the document, as part of one element.

Example

Applying CSS Edututorials.com

Click an example below.

External Styles

I don’t want to influence you too much here, but please use this method for your day-to-day CSS sites! Forget all the pros and cons of inline and embedded styles, and rejoice over external style sheets. In this example, your external style sheet will only contain one rule, but this sheet will grow to be the most influential file of the whole web site.

Within the <head> section, and after the <title> element, paste the element <link rel="stylesheet" type="text/css" href="external.css" /> and save the file. This line tells the browser to look for an external file called external.css, which is a CSS file, and that it is stored in the same directory.