CSS (Cascading Style Sheets) is a language that defines how HTML elements are displayed on different devices. CSS separates document structure from presentation by defining styles like colors and fonts that are applied to elements. There are three ways to implement CSS - inline within HTML elements, embedded within <style> tags in the head section, or through an external .css stylesheet linked via the <link> tag. External stylesheets allow styles to be defined once and applied across multiple pages for consistency.
2. What is CSS?
It is a language that defines how page elements
marked up with HTML or XHTML are displayed in
the web browser or on other devices.
Example, how a page is printed.
CSS is like a “template” that defines the way
that each HTML element looks when displayed.
3. CSS 1
It became a recommendation in December
1996
It mainly provides methods of styling text- thus
replacing the <font> tag. Which is deprecated
in HTML 4.
6. Same Code but with external
sheet(using the link element)
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>hello world!</h1>
<p>This is Structural XHTML</p>
</body>
</html>
9. What was inside the CSS file?
The mark up consists of two rule sets, one for h1
(text within <h1></h1> tags)
And one for p (text within <p></p> tags).
10. Lets examine the code
Each of the rule sets consists of the selector (for example,
h1 or p)
A pair of curly braces ( { } )
Inside the curly braces are the directives, which states
how you wish the selector to be displayed in the screen
The directive themselves consist of property and value
combinations separated by a colon (:).
In English, you are saying “this is what to change , and
this is the value I want to change it to”.
11. Defining Styles
You only need to define how you want your tags
to be styled once.
If further <h1> and <p> elements are added to
the HTML documents, they will also be styled by
the CSS.
12. CSS in NotePad
You may use the NotePad in encoding the
stylesheet that you want to use in your CSS file.
Once that you defined the stylesheet, you can
save it using the extension name .css like the one
we used in the example “text.css”.
13. CSS2
It became a recommendation in May 1998
It builds on the CSS1 specification, adding
support for positioning elements (meaning
images, blocks of text, or other items on your
pages) and support for different “media
descriptors”.
14. CSS3
It is still in development and brings with a new,
modular, approach to CSS in order that devices
that do not have the capability to support the
entire specification can support necessary
modules.
As of November 2011, there are over 50 CSS
modules published from the CSS Working Group.
Some of these are Selectors, Namspaces and
Color and are all recommended by the W3C in
2011.
15. Separating Document Structures
from Presentation
Document structure includes your content, marked up in a logical
way by the us of tags that describe the content‟s meaning rather
than how it should be displayed. This include paragraphs (<p>),
heading levels (h1 to h6), line breaks (<br />), references to image
files (<img>), hyperlinks to other documents (<a>) and divs and
spans (<div> and <span>)
Presentation means any way of describing how the document
structure should be displayed. This is the whole purpose of CSS, but
in HTML this includes color attributes, align attributes, <center>
elements, and <font> elements.
17. Inline CSS
These are applied to one page element at a time within the flow of
the document. They use a style attribute with a value equal to the
declaration part of the rules below:
<h1 style="color:sienna;margin-left:20px;">This is a paragraph.</h1>
This style will only effect this heading and if you make another, you
have to type again the code.
An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly!
18.
19. Embedded CSS
Is one that is placed within a <style> element
between the <head> and the </head> tags of a
document.
The style rules described in it will only affect that
particular document.
20. Embedded CSS
<html>
<head>
<title>Embedded CSS Example</title>
<style type=“text/css”>
h2 {
Font-family: Verdana, Arial, Helvetica, sans-serif;
Color:#cc99cc;
}
</style>
</head>
<body>
<h2>
Text to be styled
</h2>
</body>
</html>
21. External Stylesheets
This style allows you to fully benefit from CSS.
To make an external stylesheet, you simply take
a simple style rules and place them into a file
with the extension name „.css‟ then link it to the
document you want it affected.
23. then attach it to your document by adding the
follow line code between <head></head> tags of
your HTML document:
<html>
<head>
<title> External CSS Example</title>
<link rel="stylesheet" type="text/css" href="global.css" />
</head>
<body>
<h2>
Text to be styled using the external stylesheet.
</h2>
</body>
</html>