Scribd
Upload
13 views9 pages

CSS 1st Class

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views9 pages

CSS 1st Class

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS

INTRO TO CSS ( CASCADING STYLE SHEET)


CSS

• CSS stands for Cascading Style Sheets


• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External stylesheets are stored in CSS files
EXAMPLE OF CSS
(REASON BEHIND CSS NEED)

<html> HTML was NEVER intended to contain tags for formatting a web
<body> page!

HTML was created to describe the content of a web page, like:


<h1 style="color:blue;text- <h1>This is a heading</h1>
<p>This is a paragraph.</p>
align:center;">This is a
heading</h1> When tags like <font>, and color attributes were added to the
HTML , it was nightmare for web developers.
<p style="color:red;">This is
a paragraph.</p>
Development of large websites, where fonts and color
information were added to every single page, became a long
</body> and expensive process.
</html>
TYPES OF CSS
(INLINE / INTERNAL / EXTERNAL)

<html> <head> <style>


p{
color: red;
text-align: center; <body>
INTERNAL

} <p style="text-align:center; color: red;">


</style> Hello World!
</head> </p>
</body>
<body>
<p>Hello World!</p>
<p>Again Red Paraghraph.</p> INLINE
</body>
</html>
CSS SYNTAX

• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.

• Each declaration includes a CSS property name and a value, separated by a colon.

• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

<head> <style> •p is a selector in CSS (it points to the HTML element you want to style:
p { <p>).
text-align: center;
color: red; •color is a property, and red is the property value
} •text-align is a property, and center is the property value
</style> </head>
TYPES OF CSS – EXTERNAL CSS

<!DOCTYPE html>
<html> body {
<head>
HTML FILe

background-color: lightblue;
<link rel="stylesheet" href="style.css"
> }
</head>
<body> h1 {
color: navy;
<h1>This is a heading</h1> margin-left: 20px;
<p>This is a paragraph.</p> }
</body>
</html> CSS File (style.css)
CSS CODES TO TRY

<h1 style="border:2px solid Red;">Hello World</h1>

<h1 style="color:Tomato;">Hello World</h1>

<p class="dotted">A dotted outline</p>


<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
TEXT PROPERTIES TO PRACTICE

• background-color: red;
• text-decoration-line: underline;
• text-transform: uppercase;

• text-shadow: 2px 2px red;


COMMENTS IN CSS

• CSS Comments
• Comments are used to explain the code, and may help when you edit
the source code at a later date.
• Comments are ignored by browsers.

/* This is a comment */

You might also like