Learning CSS for beginners.ppt all that are but

What is CSS?
• CSS stands for Cascading Style Sheets
• A specification for the presentation of HTML documents.
Like a template; used to define a style for an HTML
element and then applied across one or more Web pages.
• Provides the ability to separate the layout and styles of a
web page from the data or information. Styles such as
fonts, font sizes, letter spacing, colors, borders, and
margins, can be specified in one place.

Old-School Example
<html>
<head>
<title>Old School</title>
</head>
<body>
<font face=arial size=6>Example Head</font><br>
<p><font size=4>Main text here.</font></p>
<font face=arial size=6>Another Head</font><br>
<p><font size=4>More text here.</font></p>
</body>
</html>

Traditional Markup vs. CSS
Traditional
HTML mixes
presentation
with data
CSS
separates
content from
presentation,
making it
much easier
to manage
both data and
design!

Why CSS?
• Imagine you manage a site with 100+ pages. The boss
wants you to change the font of all headings, which appear
an average of five places per page. Once you’ve done it,
he changes his mind. Now imagine the site has 10,000
pages.
• CSS lets us change a single entry to make immediate
changes.

Cascading?
• Cascading means that the style definitions flow
down into the nested tags.
– Ex. Applying the color red to the <body> element will
cascade down through other elements like <p>

How is CSS implemented?
• CSS can be written for different media (screen, printer,
etc), can be included in an HTML document, or can be a
separate file that is applied to multiple HTML documents.
• Styles can be external, internal, or inline.
– What are the benefits of a separate file vs.
internal/inline?
• We will focus on external style sheets

• Inline style has the highest priority and will override all others
• The style applies only to the HTML element in which it is declared

Internal styles
• They are placed in the <HEAD> section and apply to all elements of a
certain type
• <HEAD>
• <STYLE type = “text/css”>
• H1 {color: blue; font-size: 20pt}
• H2 {color: red; font-family: Arial, sans-serif}
• </STYLE>
• The above CSS – “rules” are applied to all H1 and H2 elements in the
document

Implementing CSS
• First step, write good, well-formed HTML without modifiers.
Use only generic tags like <h1>, <p>, etc.
• Inside the <head> section, add:
<link href="file.css" rel="stylesheet" type="text/css" />
• Create a text file (named with a .css extension)
• Populate the new CSS file with CSS selectors and styles!

Parts of the CSS File
h1 {
color: blue
font-size: 18px;
}
Selector Properties
•The selector is defined by the style (made up of properties).
•All content wrapped in <h1> tags throughout the pages
where the CSS file is linked will be blue and 18 pixels tall.
Style

Basic Syntax
• Selector: Can be any HTML element. The Selector
is simply the tag element linked to a style.
– Example
p { color:red; }
‘p’ is the selector. All text wrapped with the <p> tag will be
colored red

Example CSS file
body{
padding:0px;
margin:0px;
background-color:#FFE8C6;
font-size: 12px;
}
p {
font-family: Tahoma, Helvetica;
color: red;
}
h1 {
font-size: 24px;
}
Defines the <body> tag
Defines the <p> tag
Defines the <h1> tag

New-School: Before CSS
<html>
<head>
<title>New School</title>
</head>
<body>
<h1>Example Head</h1>
<p>Main text here.</p>
<h1>Another Head</h1>
<p>More text here.</p>
</body>
</html>
Note the change from
<font> tags in the Old-
School example to the
<h1> tags, as well as
the elimination of the
<font> tags that were
nested inside the <p>
tags.

New-School: With CSS
<html>
<head>
<title>New School with CSS</title>
<link href="style.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<h1>Example Head</h1>
<p>Main text here.</p>
<h1>Another Head</h1>
<p>More text here.</p>
</body>
</html>
Note the addition of the
<link> tag, which links in
our style sheet.

Selectors: Classes
• We can create classes, which are a named subset
of a tag.
p {
color: red;
}
p.quote {
color: green;
}
Defines the <p> tag
Defines a class of
the <p> tag called
quote.

Selectors: Classes
• A Class selector can be created without a tag,
making it available to any element.
.corrected {
font-style: italic;
text-transform: capitalize;
color: #666699;
text-decoration: line-through;
}
Defines a class of
the <p> tag called
corrected.

Selectors: ID
• An ID selector is intended for single-use.
• Should be used sparingly, since it defines a single
instance of “something”.
#X57 {
letter-spacing: 0.3em
}
Increases letter
spacing for an
element that uses
the id=X57 attribute

Selectors: Contextual
• Contextual selectors are made up of two or more selectors
separated by white space.
• They take precedence over simple selectors.
• This contextual selector draws <em> text in a <p> with a
yellow background; <em> text elsewhere would be
unaffected.
p em {
background: yellow;
}

Selectors: Pseudo Classes
• Define the state of certain selectors, such as the <a> tag’s link,
hover, visited and active states.
a:link {
color: black;
}
a:hover {
color: blue;
font-size: 125%;
}
a:visited {
color: green;
font-weight: bold;
}
Defines the link state
of the <a> tag
Defines the visited
state of the <a> tag
Defines the hover
state of the <a> tag

Selectors: Pseudo Elements
Special capabilities of the <p> selector:
p:first-line {
font-variant: small-caps;
}
p:first-letter {
font-size: 300%;
float: left
}
First line of <p> will be
in small caps
First letter of <p> will
be large

Comments
• Comments are valuable in CSS files too!
/* This is a comment */

• CLASSES
• Class declarations are preceded by a period and apply to all elements of the class:
• <STYLE>
• .highlight {color: red; font-style: italic}
• </STYLE>
• <BODY>
• <P class= “highlight”>……..</P>
•
• ELEMENTS
• Elements are declared starting with # and are applied to only one element referenced by an ID
•

• NB:
• Two types of paragraphs in your document:
• One is right aligned paragraph
• The other is center aligned paragraph
• How to do it with styles?
• Solution: Use class selector
• <STYLE>
• p.right {text-align: right}
• Class
• Tag/element name which is optional
• <p.center { text-align: center}
• </STYLE>
• Now use the class attribute in your HTML document as:
• <p class = “right”>
• Right aligned paragraph
• <p class = “center”>
• Center aligned paragraph
• </p>
•
• NB: Only one class can be specified per HTML document
• <STYLE>
• #name {text aligned: center}
• </STYLE>
• <BODY>
• <H1 ID = “name”>

Resources
• Training: http://www.w3schools.com/css/
• W3C: http://www.w3.org/Style/CSS/
• http://www.w3schools.com/css/css_reference.asp

Learning CSS for beginners.ppt all that are but

More Related Content

Similar to Learning CSS for beginners.ppt all that are but (20)

Recently uploaded (20)

Learning CSS for beginners.ppt all that are but