Scribd
Upload
2 views

Introduction to CSS

The document provides an introduction to CSS, detailing how stylesheets can be applied to web pages through inline, internal, and external methods. It explains the CSS box model, which includes content, padding, borders, and margins, as well as how to set background images and text colors. The most common practice is to use external CSS files for styling multiple HTML pages.

Uploaded by

s.badal0705
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Introduction to CSS

The document provides an introduction to CSS, detailing how stylesheets can be applied to web pages through inline, internal, and external methods. It explains the CSS box model, which includes content, padding, borders, and margins, as well as how to set background images and text colors. The most common practice is to use external CSS files for styling multiple HTML pages.

Uploaded by

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

Introduction to CSS

Objectives

1 Style Sheets & Web


Pages
Use stylesheets to create web pages
Style Sheets & Web
Pages
Applying CSS

CSS can be applied in the following ways:


▪ Inline - by using the style attribute
inside HTML elements

▪ Internal - by using a <style> element in


the <head> section

▪ External - by using a <link> element to


link to an external CSS file

The most common way to add CSS, is to


keep the styles in external CSS files.
Inline Stylesheets

▪ An inline CSS is used to apply a unique style


to a single HTML element.

▪ An inline CSS uses the style attribute of an


HTML element.

▪ Syntax:
<h1 style=
“background-color:red”>Hello</h1>
Inline Stylesheets
Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
External CSS

▪ An external style sheet is used to define the style of many HTML pages.

▪ To use an external style sheet, add a link to it in the <head> section of each HTML page.
Background Image

▪ The background image property sets


one or more background images for an
element.

▪ By default, a background image is


placed at the top-left corner of an
element, and is repeated both vertically
and horizontally

▪ Syntax:
<style>
body{
background-image:url("BG.png");
}
</style>
CSS Colour Properties

▪ The colour property specifies the colour of text.

Syntax:

Inline stylesheets
CSS Colour Properties

▪ External Stylesheets: A separate file with.css extension is designed with all the basic styling components
and it is linked with the .html file.

Syntax:
abc.css-containing all the styling as shown:
CSS Box Model

▪ In CSS, the term "box model" is


used when talking about design
and layout.

▪ The CSS box model is essentially a


box that wraps around every HTML
element.

▪ It consists of margins, borders,


padding, as well as the actual
content.
CSS Box Model

▪ Content - This is the content of a box, where text and


images appear.

▪ Padding - This clears an area around the content. The


padding is transparent.

▪ Border - This is a border that goes around the padding and


content.

▪ Margin - This clears an area outside the border. The margin


is transparent.
Implementing Borders, Padding and Margins
Output

You might also like