Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx

• A simply designed language intended to
simplify the process of making web pages
presentable.
• Allows you to apply styles to HTML documents.
• It describes how a webpage should look.
• It prescribes colors, fonts, spacing, etc.
In short, you can make your website look
however you want.
 easy to learn and understand but
 it provides powerful control over the
presentation of an HTML document.
 Most commonly, CSS is combined with the
markup languages HTML
CSS Basics

CSS saves time: can write CSS once and reuse the same sheet in multiple HTML pages.
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, B/c, it 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.
Multiple Device Compatibility − Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using
CSS in all the HTML pages to make them compatible to future browsers.
Why CSS?

Types of CSS
 Inline CSS: is a method of applying styling directly to
individual HTML elements using the “style” attribute
within the HTML tag,
 allowing for specific styling of individual elements within
the HTML document, overriding any external or internal
styles. <!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
4th
Year REGULAR Students!!
</p>
</body> </html>

i.e. the CSS is embedded within the
<style> tag inside the head
section of the HTML file.
External CSS:
contains separate CSS files that
contain only style properties with
the help of tag attributes (For
example class, id, heading, … etc).
CSS property is written in a
Internal or Embedded CSS:

Internal or Embedded CSS: Example
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<div
class="main">
<div
class="GFG">4th
Year ICT
</div>
</div>

External CSS Example:
body {
background-color:powderblue;
}
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
#geeks {
font-style: bold;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link
rel="styleshe
et“ href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">4th
year
</div>
<div id="geeks">
IT portal
</div>
</div>
• HTML • CSS(style.css)

A style rule is made of three parts:
Selector − A selector is an HTML
tag at which a style will be
applied. like <h1> or <table> etc.
Property − A property is a type of
attribute of HTML tag. Put simply,
all the HTML attributes are
converted into CSS properties.
They could be color, border etc.
CSS - Syntax

CSS - Syntax
Example: table{ border :1px solid #C00; }

h1 {
color:
#36CFFF;
}
The Universal Selectors:
 Rather than selecting
elements of a specific type,
the universal selector quite
CSS - Syntax

.black { color: #000000; }
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants
but have different functionality. Consider the following example −
body > p { color: #000000; }
Multiple Style Rules:
need to define multiple style rules for a single element.
combine multiple properties and corresponding values into a single block
h1 {
color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform:
lowercase; }
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the
following example −
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform:
lowercase; }
CSS - Syntax

element.
 It can be used to apply a single
background image or multiple
background images.
 defining the background color, size, position, repeat behavior, and other
related properties.
CSS Background –
With Image And Background
CSS - Background
<html> <head>
<style> body { background:
url('images/scenery2.jpg') center/40%
50% no-repeat fixed padding-box content-
box lightblue; }
</style>
</head> <body> <h2>Shorthand
Background</h2>
</body> </html>

 a set of text characters with a
consistent design and style.
 It includes the shape, size, weight,
and other attributes of the
characters in a typeface
CSS Fonts - With Multiple Values:
CSS - Font
<html>
<head>
<style>
p { border: 2px solid blue; } </style>
</head> <body>
<h2>Font Shorthand Property</h2>
<p style = "font: oblique normal bold 20px
Arial, sans-serif;"> Shorthand Property Font
</p> </body> </html>

The selection of an appropriate font-
family is very important.
it affects and reflects different styles,
emotions and readability.
Each classification has its own
connotations and usages.
CSS- Font Family
<html>
<head>
<style> p { padding: 5px; border: 2px solid blue; } </style>
</head>
<body>
<h2>Font-family</h2> <p style = "font-family: 'Times New
Roman', Times, serif;"> The text will be either 'Times New
Roman', Times, or serif. </p>
<p style = "font-family: Arial, Helvetica, sans-serif;"> The text
will be either 'Arial', Helvetica, or sans-serif. </p>
</body> </html>

refers to the height of the characters
in relation to the text's baseline.
Larger fonts are typically used for
headlines or titles to grab attention,
while smaller fonts are suitable for
body text or captions to ensure
readability.
CSS- Font Size
<html>
<head>
<style> p { padding: 5px; border: 2px solid blue; } </style>
</head> <body>
<h2>Font-size</h2> <p style = "font-size: large;"> The font-size is
large. </p>
<p style = "font-size: 15px"> The font-size is 15px. </p>
<p style = "font-size: x-small;"> The font-size is x-small. </p>
<p style = "font-size: 60%;"> The font-size is 60%. </p>
<p style = "font-size: 2vw;"> The font-size 2vw. </p> </body>
</html>

A table is an HTML element used to
display data in a structured format
with rows and columns. It is created
using the <table> tag in HTML and
can be styled using CSS properties.
CSS-Table
<html> <head>
<style> </style>
<table>
<thead> <tr> <th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th> </tr>
</thead> <tbody>
<tr> <td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td> </tr>
<td>Data 2</td>
<td>Data 3</td> </tr>
</tbody> </table> </body> </html>

In CSS the various properties that are
applied to align them are as follow:
text-align (sets
the horizontal alignment of the text
content within table cells (<th> or
<td>). It can take following values:
Center, left, right,justify
CSS-Table Alignment
<html> <head>
<style>
table, td, th { border: 2px solid black; }
table { border-collapse: collapse; width: 50%; }
td { text-align: center; } </style>
</head> <body>
<h2>Text-align Property</h2>
<table> <tr> <th>Header 1</th> <th>Header 2</th>
<th>Header 3</th> <th>Header 4</th> </tr>
<td>Data 2</td> <td>Data 3</td> <td>Data 4</td> </tr> <tr>
<td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data
4</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data
3</td> <td>Data 4</td> </tr>
</table> </body> </html>

want to collect some data from the
site visitor. They have input
fields for users to enter
information, labels to identify the
input fields, and buttons to submit
the form or perform an action. It
change the appearance of form
elements, such as text fields,
checkboxes, radio buttons, select
CSS-Forms
<form>
<input type="text" id="username"
name="username" placeholder="Username">
<input type="password" id="password"
name="password" placeholder="password">
<textarea id="message" name="message"
rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit"> </form>

.
CSS-Forms
<html> <head> <style>
input[type="text"],
input[type="password"], textarea { font-
family: Arial, sans-serif; font-size: 16px;
color: blue; } label{ color:brown; } form{
display: grid; } </style> </head> <body>
<h2>Font and Text Styling</h2> <form>
<input type="text" id="username"
name="username"
placeholder="Username">
<input type="password"
id="password" name="password"
placeholder="password"> <textarea
id="message" name="message"
rows="4"
placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form> </body> </html>

The width property of an image is used to set the width of an image. This property can have a
value in length or percentage.
The border property of an image is used to set a border to an image.
CSS allows an image to be set as a background for another element. The property that can
CSS-Image
Images are powerful tools that can enhance the design, communication, and
user experience of a webpage.
it is not recommended to include a lot of images, careful selection and
placement of images can greatly contribute to the success of a website.
several CSS properties that can be used to style an image
CSS Image Height, Width, Border, As Background:
 The height property is used to set the height of an image(a value in
length or percentage.

.
<html>
<head> </head> <body>
<h2>Image Height</h2> <div>
<p>Height in length - 300px</p>
<img style="height: 300px;"
src="images/orange-flower.jpg"
alt="orange-flower"> </div> <div>
<p>Height in percentage - 30%</p>
<img style="height: 30%;"
alt="orange-flower"> </div> <p>Height
- auto</p> <img style="height: auto;"
alt="orange-flower"> </div> </body>
</html>
<html> <head> </head>
<body> <h2>Image Width</h2> <div>
<p>Width in length - 300px</p>
<img style="width: 300px;"
src="images/pink-flower.jpg"
alt="pink-flower"> </div> <div>
<p>Width in percentage - 30%</p>
<img style="width: 30%;"
alt="pink-flower"> </div> <div>
<p>Width - auto</p> <img
style="width: auto;"
alt="pink-flower"> </div> </body>
</html>
Image Height
Im
age
W
idth

<html> <head> </head>
<body> <h2>Image
Border</h2> <div> <img
style="border: 10px inset
black; margin-bottom=5px;"
src="images/white-flower.jpg"
alt="white-flower"> <img
style="border: 10px dashed
red;" src="images/white-
flower.jpg" alt="white-
flower"> </div> </body>
</html>
<html> <head>
<style>
body { background-
color: beige;
background-image:
url(images/logo.png); }
</style> </head>
<body> </body>
</html>
Image Border
Image As
background

Forms
Font
Tables
Background
CSS Summary
Images
Borders

Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx

More Related Content

Similar to Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx

Recently uploaded

Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx