WEB DEVELOPMENT BASICS
BY
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI
HTML AND CSS
LECTURE 8
TOPICS
CSS introduction
what is css?
why separate form, linking to html file?
Self-closing tags?
WHAT CSS IS?
CSS which stands for Cascading Style Sheets is a language used to
describe the appearance and formatting of y...
SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Fancy...
SAMPLE CSS FILE
P
{
color: GREEN;
}
Span
{
color:blue;
}
WHY SEPARATE FORM FROM FUNCTION?
There are two main reasons for separating your
form/formatting (CSS) from your functional...
SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Even ...
SAMPLE CSS FILE
Span
{
font-family:cursive;
}
LINKING THEM ?
You know you should write your CSS in a totally separate file. But
how do you make sure your HTML file can ...
SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<link type="text/css" rel="stylesheet"...
SAMPLE CSS FILE
p
{
font-size: 44px;
}
REFERENCES
• www.codecademy.com
Head first web design .
Learning web design-Jennifer Niederst Robbins
www.w3schools.com
Thank you
Any doubts
Email: kalluri.vinayreddy@gmail.com
Upcoming SlideShare
Loading in …5
×

Web development basics introduction to css.

576 views

Published on

this ppt brings an idea about the cascading styling sheets
and their linking advantage to html file

Published in: Education, Technology
1 Comment
0 Likes
Statistics
Notes
  • To extend the business scope to indefinite range of targeted audience, eCommerce propagation is only the best way to succeed in the business. to build a strong and effective online web solution, there are certain elements to be perfectly framed which includes, design, CSS, HTML and link building.Hence this presentation exerts valuable guidance to the entrepreneurs to construct their web business layout in such a way it should acquaint with their competitors.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
576
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
33
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Web development basics introduction to css.

  1. 1. WEB DEVELOPMENT BASICS BY KALLURI VINAY REDDY 12MSE1013 VIT CHENNAI
  2. 2. HTML AND CSS LECTURE 8
  3. 3. TOPICS CSS introduction what is css? why separate form, linking to html file? Self-closing tags?
  4. 4. WHAT CSS IS? CSS which stands for Cascading Style Sheets is a language used to describe the appearance and formatting of your HTML. A style sheet is a file that describes how an HTML file should look like ,that’s it. We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that.
  5. 5. SAMPLE HTML FILE <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Fancy Fonts</title> </head> <body> <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p> </body></html>
  6. 6. SAMPLE CSS FILE P { color: GREEN; } Span { color:blue; }
  7. 7. WHY SEPARATE FORM FROM FUNCTION? There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML): 1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style=“color:red”) over and over 2. You can apply similar appearance and formatting to several HTML pages from a single CSS file
  8. 8. SAMPLE HTML FILE <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Even Fancier Fonts</title> </head> <body> <p>Much of this is regular text, but some of it is <span>fancy</span>! We can use our <span>newly fancified font</span> to add some <span>flair</span> to our website. It'd be a <span>royal pain</span> to make each of these span tags <span>fancy</span> individually, but it's a cinch with <span>CSS</span>!</p> </body></html>
  9. 9. SAMPLE CSS FILE Span { font-family:cursive; }
  10. 10. LINKING THEM ? You know you should write your CSS in a totally separate file. But how do you make sure your HTML file can see that CSS information? You do this by putting a <link> tag in between <head>tags of your html page. <link> tag needs three attributes: 1. A type attribute that should always be equal to “text/css” 2.A rel attribute that should always be equal to “stylesheet” 3.A href attribute that should point to the web address of your css file
  11. 11. SAMPLE HTML FILE <!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <p>I want to be SIZE 44 font!</p> </body> </html>
  12. 12. SAMPLE CSS FILE p { font-size: 44px; }
  13. 13. REFERENCES • www.codecademy.com Head first web design . Learning web design-Jennifer Niederst Robbins www.w3schools.com
  14. 14. Thank you Any doubts Email: kalluri.vinayreddy@gmail.com

×