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