PHP - Introduction to PHP CSS

Introduction to PHPIntroduction to PHP
CSSCSS

Objectives:
- “What is CSS?”
- Structure of CSS
- How to use CSS in your webpage
Web Workshop: CSS

CSS stands for “Cascading Style Sheets”
Cascading: refers to the procedure that determines
which style will apply to a certain section, if you
have more than one style rule.
What is CSS?

Style: how you want a certain part of your page to
look. You can set things like color, margins, font, etc
for things like tables, paragraphs, and headings.
What is CSS?

Sheets: the “sheets” are like templates, or a set of
rules, for determining how the webpage will look.
What is CSS?

So, CSS (all together) is a styling language – a set of
rules to tell browsers how your webpage should
look.
What is CSS?

“Style” is a command that you set to tell the browser
how a certain section of your webpage should look.
You can use style on many HTML “elements”
(like <p> <h1> <table> etc)
What is “Style”

Two parts: (1) selector and (2) declaration.
Selector: the HTML element you want to add style to.
<p> <h1> <table> etc
Declaration: the statement of style for that element.
Made up of property and value.
How to write style rules

Selector {declaration;}
Declaration = {property: value;}
Property: what aspect you want to change
ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.

selector {property: value;}
Essentially means:
The thing I want to change
{the aspect of that thing I want to change: what I
want it to be;}

Selector {property: value;}
h1 {color: red;}
Means: Speaking of my heading1, I want the text
color to be red.

I want the color of the text in my paragraph
to be yellow.
p {color: yellow;}
This is the text in this paragraph.

h1 {color: blue;
background-color: green;}
Means:
Speaking of my heading1, I want the text color to be
blue and the background color to be green.

I want the text color of my link to be red
and the background color to be yellow.
a{color: red;background-color: yellow;}
This is my link

There are three types of style-rule-places that we will
cover:
- Inlined
- Internal Style Sheet
- External Style Sheet
Where do I put my style rules?

<html>
<head><title>My Wonderful Example</title>
</head>
<body>
<p>What was I thinking?</p>
</body>
</html>
a) Inlined example-1
Original html
code

a) Inlined example-2
<body>
<p style=“text-align: center; font- weight:
bold; color: yellow;”>What was I thinking?</p>
</body>
What was I thinking?

b) Internal-2
body
{
text-align: left;
font-family: Trebuchet,
verdana;
}
</style>
</head>

Internal: Statement of style
…
</style>
this is a style
sheet (style type)
written (text) in
css (CSS)
language

Internal: Brackets & Declaration
body
{
text-align: left;
font-family: trebuchet, verdana;
}
</style>
I want the
“align text”
property to be
given the value
of “left”

c) External
<html>
<head><title>My Way</title>
<link rel="stylesheet"
href="http://www2.hawaii.edu/~myway. css"
type="text/css“>
</head>
<body> </body>
</html> Link to a
separate css page

ThankThank You !!!You !!!
For More Information click below link:
Follow Us on:
http://vibranttechnologies.co.in/php-classes-in-mumbai.html

PHP - Introduction to PHP CSS

More Related Content

What's hot (17)

Similar to PHP - Introduction to PHP CSS (20)

More from Vibrant Technologies & Computers (20)

Recently uploaded (20)

PHP - Introduction to PHP CSS

Editor's Notes