CSS
[Link]
Introduction To CSS
⚫ Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages.
⚫ More importantly, CSS enables you to do this independently of the HTML
that makes up each web page.
⚫ It describes how a webpage should look: it prescribes colours, fonts,
spacing, and much more.
⚫ In short, you can make your website look however you want. CSS lets
developers and designers define how it behaves, including how elements
are positioned in the browser.
⚫ While HTML uses tags, CSS uses rulesets. CSS is easy to learn and
understand, but it provides powerful control over the presentation of an
HTML document.
❖ Why CSS?
➢ CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
©Topperworld
CSS
➢ Easy Maintenance: To make a global change simply change the
style, and all elements in all the webpages will be updated
automatically.
➢ Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
➢ Superior styles to HTML: CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
➢ Offline Browsing: CSS can store web applications locally with the
help of an offline cache. Using this we can view offline websites.
❖ CSS Version Release Year
❖ Types of CSS
There are three types of CSS which are given below:
1. Inline: Inline CSS contains the CSS property in the body section attached
with the element known as inline CSS.
2. Internal or Embedded: The CSS ruleset should be within the HTML
file in the head section i.e the CSS is embedded within the HTML file.
©Topperworld
CSS
3. External: External CSS contains a separate CSS file that contains only
style property with the help of tag attributes.
Example:
Before CSS: In this example, we have not added any CSS.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
Output:
After CSS: In this example, we added some CSS styling inside the HTML code
only to show how CSS makes a dull HTML page look beautiful.
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige; }
h1 {
color: olivedrab;
border-bottom: 1px dotted darkgreen; }
p{
font-family: sans-serif;
color: orange; }
</style>
</head>
<body>
<main>
<h1>My first Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
©Topperworld
CSS
Output:
❖ CSS Syntax
⚫ A CSS Syntax rule consists of a selector, property, and its value.
⚫ The selector points to the HTML element where the CSS style is to be
applied.
⚫ The CSS property is separated by semicolons.
⚫ It is a combination of the selector name followed by the property:
value pair that is defined for the specific selector.
Syntax:
selector { Property: value; }
For instance, we have declared a heading tag(h1) along with having assigned
some property: value pair that is used to style the heading tag. Here, h1 is the
selector, { color: green; font-family: sans-serif; } is a declaration block and it
can contain one or more declarations separated by semicolons, color: green; is
a property: value pair that is applied to the HTML element in order to style
them.
Declaration Declaration
h1 { color: green; font-family: sans-serif;}
| | | | |
Selector Property Value Property Value
©Topperworld
CSS
Every declaration has a CSS property name and a value, separated by
a colon(:) and is surrounded by curly braces({ }). For declaring the multiple CSS
properties, it can be separated by the semicolon(:).
Let’s define each of these :
• Declaration: A combination of a property and its corresponding value.
• Selector: Used to target and select specific HTML elements to apply styles
to.
• Property: Defines the specific aspect or characteristic of an element that
you want to modify.
• Value: Assigned setting or parameter for a given property, determining
how the selected element should appear or behave.
©Topperworld
