Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web: CSS

No description
by

marco nikolai villaflor

on 23 April 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web: CSS

Associate it
Analyze it
Apply it
What does the subject make you think of?
Break the subject into parts. Tell how it is made.
Describe the subject's uses.
Use any reasoning to argue for or against the subject.
Argue For
or Against It

Basic

HTML

&
CSS

ELEMENTS
HTML stands for
H
yper
T
ext
M
arkup
L
anguage
.
Describe it
Examine the subject closely and describe what you see.
WEB PAGE
Compare it
What is it similar to? What is it different from?
Source: http://www.w3schools.com/css/default.asp
What is
HTML
?

{color: blue; font-size: 12px;}
Property
Value
Property
Value
Selector
Declaration
Declaration
+
CREATING A SIMPLE
Here are some basic elements that you will need to start your new web page.
HTML documents are also called web pages
The way of styling your web page.
Web Design:

CSS

"How important is design in a web page or site?"
"What is CSS?"
"How does CSS works?"
" What are the elements that build up a webpage? "
h1
HTML Tags
http://www.w3schools.com/html/html_basic.asp
<html>

<head>

<title>

<body>

<p>

<br>
<i>

<u>

<b>

<li>

<ol>

<ul>
HTML File
<html>
<head>
<title>
My Web Page
</title>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>
INSTRUCTION:
How to save HTML File?
Save the new file with the:

File Name:

"Sample1"
File Type:

"Hypertext Markup Language(*.html)"
or
Save the new file with the:

File Name:


"Sample1.html"
File Type:

"All Files(*.*)"
HTML is a
markup language
.
A markup language is a
set of
markup tags
.
The
tags
describe
document content
.
HTML documents
contain

HTML tags
and

plain text
.
What is
CSS
?

External Style Sheets are stored in CSS files.
HTML is a language for describing web pages.
HTML documents are also called
web pages
.
CSS stands for
C
ascading
S
tyle
S
heets
.
Styles define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem.
External Style Sheets can save a lot of work.
CSS Syntax
<h1>

<h2>

<h3>

<h4>

<h5>

<h6>
<input>

<button>

<select>

<option>

<hr>
These tags are some of the most basic HTML tags.
Suggested Software Text Editing Tools:
Windows Notepad
Notepad++
Sublime
Use any reasoning to argue for or against the subject.
Argue For
or Against It
The
selector
points to the HTML element you want to style.
The
declaration

block
contains one or more declarations separated by
semicolons
and
declaration groups
are surrounded by curly braces.
Each declaration includes a
property name and a value
, separated by a
colon
.
<a href=”http://www.google.com”>
This is a link tag to Google.com
</a>
<p>
This is a paragraph tag

</p>
<div>
This tag represents a division in the page (called a “div”)
</div>
<img src=
”C:\Desktop\image.png” alt=”My Image”
/>
<h1>

This is heading 1… the largest heading
</h1>
<h2>
This is heading 2… the second largest heading
</h2>
Heading tags are defined h1 - h6
Heading tags work just like headings in your favourite word processor
<br/>
is a line break and can be used inside text-nodes
<ul>
is a unordered list. It has children known as
<li>
list items.
Next to each list item will be a bullet.

HTML with CSS
CSS References
<html>

<head>
<title> Sample 1</title>
</head>

<body>
<h1>Application Form</h1>
</body>

</html>
HTML
Output
.button-default
{
border: 1px solid;
padding: 5px;
background: none;
border-radius: 5px;
border-color: gray;
color: gray;
font-weight: none;
font-face: Arial;
}
CSS
h1
{
text-transform:uppercase;
font: 40px century gothic,arial;
color: red;
text-align: center;
}
.text
{
border: 1px solid;
padding: 5px;
background: none;
border-color: #C9C9C9;
border-radius: 5px;
font-color: #C9C9C9;
font-weight: none;
font-face: Arial;
}

.text:focus
{
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
• Color
• Background and Borders
• Basic Box
• Flexible Box
• Text
• Text Decoration
• Fonts
• Writing Modes

• Table
• Lists and Counters
• Animation
• Transform
• Transition
• Basic User Interface
• Multi-column

• Paged Media
• Generated Content
• Filter Effects
• Image/Replaced Content
• Masking
• Speech
• Marquee

CSS Property Groups
HTML & CSS
<html>

<head>
<title> Sample 1</title>
</head>

<body>
<input class="button-default" type="button" value="Submit"/>
</body>

</html>
Output
<html>

<head>
<title> Sample 1</title>
</head>

<body>
<input type="text" class="text" placeholder="Type text here">
</body>

</html>
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Full transcript