lesson one fourth quarter fourth year high school css modern layout and style
TRANSCRIPT
CSS: Modern Layout and StyleMODERN SCRIPTING
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.
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.
<html>
<head>
<title>Unstyled Example</title>
</head>
<body>
<h1>hello world!</h1>
<p>This is Structural XHTML</p>
</body>
</html>
Lets try this:
Output of Code
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>
Whats inside the test.css link?
h1 {
color:#339900;
background-color: Transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
p {
color:#003399;
background-color: Transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
Output of the two Codes
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).
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”.
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.
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”.
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”.
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.
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.
Ways of Implementing CSS
Inline CSS Embedded CSS External Stylesheet
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!
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.
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>
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.
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #cc99cc;
}
Save it as global.css,
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>