Scribd
Upload
11 views

CSS -Notes Lyst1313

The document provides an introduction to CSS, explaining its role in controlling the visual presentation of web pages. It outlines three methods for applying CSS: inline, internal, and external, detailing their specific uses and syntax. Examples illustrate how to modify styles such as font size, color, and alignment using these methods.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

CSS -Notes Lyst1313

The document provides an introduction to CSS, explaining its role in controlling the visual presentation of web pages. It outlines three methods for applying CSS: inline, internal, and external, detailing their specific uses and syntax. Examples illustrate how to modify styles such as font size, color, and alignment using these methods.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Front End Technologies

CSS - Day 1

Agenda
▪ CSS Introduction
▪ Inline CSS
▪ Internal CSS

CSS INTRODUCTION:
Cascading Style Sheets, fondly referred to as CSS,
is the World Wide Web Consortium standard for
the visual presentation of web pages. With CSS,
you’re going to completely control the presentation
of your pages, often without even changing your
HTML. CSS is used to define styles for your web
pages, including the design,
layout and variations in display for different devices and screen sizes.
CSS is a set of rules that we are telling to the html that this is how the
styling should be.
There are three ways to apply CSS to the HTML page they are:
o INLINE CSS
o INTERNAL CSS
o EXTERNAL CSS

Full Stack Web Development HTML TapAcademy


Inline CSS: An inline CSS is used to apply a unique style to a single
HTML element. It uses the style attribute of an HTML element.

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 for
many HTML pages. To use an external style sheet, add a link to it in
the <head> section of each HTML page.

Syntax of CSS:

Property: value
Syntax of CSS is the property name and a value, separated by a colon.
Property can be many things like Colours, Font-family, Background
and each property have their own values. We can include multiple
property: value pair, separated by semi-colon.
Let us now understand with an example how property: value can be
used

Full Stack Web Development HTML TapAcademy


Output:

Full Stack Web Development HTML TapAcademy


As we can see in the above example style attribute helps us to modify
our text, viewed in the page. This modification includes changing font
size, font family, font color etc. Not only the texts but also we can
change the style of a body are part of a page. In above example we have
used a property color with a value red and we can see the difference in
the output screen after styling, we can change value of color blue, black,
violet etc.,
In the above example we have seen how to apply color to the text, now
we will see with the example how to apply background color to the
text using background property and a value.

Output:

Full Stack Web Development HTML TapAcademy


Now we will see how to change font of a text and alignment of a text.
To change the font of a text font-family property should be used and to
align we have to make use of text-align, let us understand with an
example.

Output:

Full Stack Web Development HTML TapAcademy


If we want to apply styling for all <p> tags in the above example,
inline CSS is an inefficient way as adding CSS rules to every HTML
element is time-consuming and makes your HTML structure messy.
To overcome this problem we can make use of Internal CSS, now let
us understand how to use internal css with an example.

Example-1:

Full Stack Web Development HTML TapAcademy


Output:

As we can see in the above example using this CSS style is an effective
method of styling a single page. Let us understand this with one more
example.

Full Stack Web Development HTML TapAcademy


Example -2:

Full Stack Web Development HTML TapAcademy


Output:

As we can see from Example1 and Example2 styling for both the
example is same but using internal css style, styling for multiple pages
is time-consuming as you need to put CSS rules to every page of your
website. This can be overcome using External CSS.

Full Stack Web Development HTML TapAcademy

You might also like