CSS: Modern
Layout and Style
MODERN SCRIPTING
What is CSS?


It is a language that defines how page elements
marked up with HTML or XHTML are displayed in
the web brow...
CSS 1


It became a recommendation in December
1996



It mainly provides methods of styling text- thus
replacing the <f...
Lets try this:
<html>
<head>
<title>Unstyled Example</title>
</head>
<body>
<h1>hello world!</h1>

<p>This is Structural X...
Output of Code
Same Code but with external
sheet(using the link element)
<html>
<head>
<title>CSS Example</title>

<link rel="stylesheet"...
Whats inside the test.css link?
h1 {
color:#339900;
background-color: Transparent;
font-family: Verdana, Geneva, Arial, He...
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 on...
Lets examine the code


Each of the rule sets consists of the selector (for example,
h1 or p)



A pair of curly braces ...
Defining Styles


You only need to define how you want your tags
to be styled once.



If further <h1> and <p> elements ...
CSS in NotePad


You may use the NotePad in encoding the
stylesheet that you want to use in your CSS file.



Once that ...
CSS2


It became a recommendation in May 1998



It builds on the CSS1 specification, adding
support for positioning ele...
CSS3


It is still in development and brings with a new,
modular, approach to CSS in order that devices
that do not have ...
Separating Document Structures
from Presentation


Document structure includes your content, marked up in a logical
way b...
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 ...
Embedded CSS


Is one that is placed within a <style> element
between the <head> and the </head> tags of a
document.



...
Embedded CSS
<html>
<head>
<title>Embedded CSS Example</title>
<style type=“text/css”>
h2 {
Font-family: Verdana, Arial, H...
External Stylesheets


This style allows you to fully benefit from CSS.



To make an external stylesheet, you simply ta...
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>
<h...
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Upcoming SlideShare
Loading in …5
×

Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style

822 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
822
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style

  1. 1. CSS: Modern Layout and Style MODERN SCRIPTING
  2. 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. 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.
  4. 4. Lets try this: <html> <head> <title>Unstyled Example</title> </head> <body> <h1>hello world!</h1> <p>This is Structural XHTML</p> </body> </html>
  5. 5. Output of Code
  6. 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>
  7. 7. 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; }
  8. 8. Output of the two Codes
  9. 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. 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. 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. 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. 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. 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. 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.
  16. 16. Ways of Implementing CSS    Inline CSS Embedded CSS External Stylesheet
  17. 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. 18. 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.
  19. 19. 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>
  20. 20. 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.
  21. 21. h2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #cc99cc; }  Save it as global.css,
  22. 22. 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>

×