Scribd
Upload
5 views

CSS 1st Class

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

CSS 1st Class

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
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