Scribd
Upload
5 views9 pages

Introduction To CSS Free Compu Lesson

This document provides an introduction to CSS (Cascading Style Sheets), detailing its purpose as a styling language for webpages. It covers the syntax and layout of CSS, types of selectors (element, class, and ID), and methods for loading CSS in HTML (inline, internal, and external). The document emphasizes the importance of using external CSS for styling multiple webpages efficiently.

Uploaded by

corneliuskandulu
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
5 views9 pages

Introduction To CSS Free Compu Lesson

This document provides an introduction to CSS (Cascading Style Sheets), detailing its purpose as a styling language for webpages. It covers the syntax and layout of CSS, types of selectors (element, class, and ID), and methods for loading CSS in HTML (inline, internal, and external). The document emphasizes the importance of using external CSS for styling multiple webpages efficiently.

Uploaded by

corneliuskandulu
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

COMPILED BY RODLICK NDOVIE

INTRODUCTION
TO CSS
TOPICS
01 Overview of CSS
02 Syntax/Layout Of CSS
03 Types O f Selectors

04 Ways To Load CSS In HTML


CSS It is a styling language which is
used to modify the appearance of the
webpage.

CSS
CSS stands for Cascading Style
Sheets.
SYNTAX & LAYOUT OF CSS
Layout
Selector {
property 1 : Value ;
property 2 : Value ;
}
Example
h1 {
background-color : blue ;
color : white;
}
TYPES OF SELECTORS
This is when html elements are used as selectors

01 ELEMENT SELECTOR For example


h1 {
background-color : blue ;
color : white;
}

02 CLASS SELECTOR Commonly used selector, it is used to apply styles to html


elements that has a specific class attribute
it is defined by prefixing the class name with a dot ( . )
Example
In HTML elements:
<h1 class=“heading-1> Welcome</h1>

In CSS file :
.heading-1 {
color : blue;
}
TYPES OF SELECTORS
It is similar to class selector the only difference is that
03 ID SELECTOR an HTML element can have one ID selector and it is
Unique
it is defined by prefixing the class name with a #
followed with the assigned name in HTML
Example

In HTML elements:
<h1 id=“heading”> Welcome</h1>

In CSS file :
#heading {
color : blue;
}
WAYS TO LOAD CSS
There are three ways to load CSS in HTML which are inline, Internal and External

01 INLINE

It is done by adding CSS attributes inside HTML Elements


Example

<h1 style =“color : blue ; ”> Welcome To PLC</h1>

02 INTERNAL

This is by adding a style Element in the head section of HTML Page


Example
<style>
body { background-color : skyblue ; }
</style>
WAYS TO LOAD CSS
There are three ways to load CSS in HTML which are inline, Internal and External

03 EXTERNAL

This uses external CSS File to add styles to the multiple Webpages
It is the most recommended way to load CSS In our webpages

Loading External CSS

To add External CSS file you have to create file with .css extension to your
predefined folder (it is advisable to use the [Link] name for easy identification of your
styling file) add below link element to head section of the HTML page

<link rel=“stylesheet” href=“[Link]”>


THANK
YOU
Compiled By Rodlick Ndovie

You might also like