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

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 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.

Lets try this:
<html>
<head>
<title>Unstyled Example</title>
</head>
<body>
<h1>hello world!</h1>

<p>This is Structural XHTML</p>
</body>
</html>

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;
}

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>

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

Similar to Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style (20)

More from Perry Mallari

More from Perry Mallari (14)

Recently uploaded

Recently uploaded (20)

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