Web development basics introduction to css.

WEB DEVELOPMENT BASICS
BY
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI

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

SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Fancy Fonts</title>
</head>
<body>
I'm a paragraph written in red font, but one of my words is
blue! </body></html>

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

SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>Even Fancier Fonts</title>
</head>
<body>
Much of this is regular text, but some of it is fancy! We
can use our newly fancified font to add some
flair to our website. It'd be a royal pain to
make each of these span tags fancy individually, but it's a
cinch with CSS!
</body></html>

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

SAMPLE HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
I want to be SIZE 44 font!
</body>
</html>

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

Web development basics introduction to css.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Mehr von Kalluri Vinay Reddy

Mehr von Kalluri Vinay Reddy (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web development basics introduction to css.