View source for Css/Training/What is CSS

<div style='float: right;background: white;border:1px dashed black;padding: 1ex;margin-left: 1ex;'>

* [[css/Training|CSS Educational Materials]]
** [[css/Training#Week_1|Week 1]]
*** [[css/Training#Introduction_to_CSS|Introduction to CSS]]
**** [[css/Training/What_is_CSS|What is CSS]]
**** [[css/Training/Syntax|Syntax]]
**** [[css/Training/Selectors|Selectors]]
**** [[css/Training/Create_CSS|Create CSS]]

</div>

= What is CSS? =
CSS is a Style Sheet Language.

== Description ==
CSS stands for Cascading Style Sheet. CSS can format the document content(written in HTML or other markup language):
* layout
* colors
* fonts
... etc.

CSS is designed primarily to enable the separation of the document content and document format. As a result, we can improve content accessibility, can similarly format two or more documents.

<pre>
p{
  color: red;
  font-size: 12px;
  background-color: green;
}
</pre>


== Adding style to HTML ==
There are three ways of providing styling information for the Web browsers.

=== Linking style sheet ===
You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by '''<link>'''. 

This offers several benefits:
* Authors and Web site managers may share style sheets across a number of documents (and sites).
* Authors may change the style sheet without requiring modifications to the document.
* User agents may load style sheets selectively (based on media descriptions).


[example.html]
  <head>
    '''<link rel="stylesheet" type="text/css" href="example.css">'''
  </head>

[example.css]
  '''p{'''
    '''color: red;'''
    '''foto-size: 120%;'''
  '''}'''

''Note: Don't worry. You will learn the about CSS's syntax in the next chapter.''


See also [[html/Elements/link|The link element]].


=== Internal style sheet ===
You can put style sheet rules in the head of the document by '''<style>'''.


[example.html]
  <head>
    '''<style>'''
      '''p { color: red; font-size:120%; }'''
    '''</style>'''
  </head>
  <body>
    &lt;p&gt;This is a paragraph</p>
  </body>


See also [[html/Elements/style|The style element]].


=== Inline style sheet ===
The start tags can contain style sheet rules directly in HTML documents by '''the style attribute'''.


[example.html]
  &lt;p '''style="color: red; font-size:120%; "'''&gt;This is a paragraph</p>


''In the next chapter, you will learn the CSS [[css/Training/Syntax|Syntax]].''