Scribd
Upload
42 views

Introduction To CSS

This document provides an introduction to Cascading Style Sheets (CSS) in 3 sections: 1. It defines CSS and explains that CSS is used to describe how HTML elements are displayed on different mediums and that CSS saves time by controlling layout across pages. 2. It explains CSS syntax with selectors that point to HTML elements to style and declaration blocks with properties and values to specify styles. 3. It demonstrates CSS properties for background colors, images, and controlling image repetition, showing code examples and their output.

Uploaded by

Jennifer Contreras
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
42 views

Introduction To CSS

This document provides an introduction to Cascading Style Sheets (CSS) in 3 sections: 1. It defines CSS and explains that CSS is used to describe how HTML elements are displayed on different mediums and that CSS saves time by controlling layout across pages. 2. It explains CSS syntax with selectors that point to HTML elements to style and declaration blocks with properties and values to specify styles. 3. It demonstrates CSS properties for background colors, images, and controlling image repetition, showing code examples and their output.

Uploaded by

Jennifer Contreras
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Lesson 2 - Introduction to CSS

Cascading Style Sheets

Jennifer O. Contreras Coloma


Head – Innovation, Research and Development Centre (IRDC)
Introduction to CSS

Learning Objectives
• Research training for faculty members
• Objective: To train the faculty members to make publishable papers for
journals and conference presentation.
• Activities:
• Simulation of making publishable papers
• Enhancement in research writing to avoid plagiarism
• Learning the proper way of citing and writing bibliographical entries
• Review of statistical treatment of data
• Create an account in research gate to get more citation
Cascading Style sheets (CSS)
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple
web pages all at once External stylesheets are stored in CSS
files
 CSS is a language that describes the style of an HTML document.
 CSS describes how HTML elements should be displayed.
CSS Saves a Lot of
Time and Effort!

CSS is used to define styles for your


web pages, including the design,
layout and variations in display for
Why use different devices and screen sizes.
CSS? The style definitions are normally
saved in external .css files.
With an external stylesheet file, you
can change the look of an entire
website by changing just one file!
 
CSS Syntax
 A CSS rule-set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces. 
CSS Comments
• A CSS Comments are used
to explain the code, and
may help when you edit the
source code at a later date.
• Comments are ignored by
browsers.
• Example
• A CSS comment starts
with /* and ends with */.
Comments can also span
multiple lines: 
CSS Background
CSS background-color
• The background-color property specifies the background
color of an element.

OUTPUT
CSS background-color
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)“
• Example The <h1>, <p>, and <div> elements will have different background colors: 
CSS background-color

OUTPUT
CSS background-repeat: no-repeat
Showing the background image only once is also specified by
the  background-repeat property specifies an image to use as the
background of an element.
OUTPUT
By default, the image is repeated so it covers the entire element.
CSS background-repeat
By  background-image property repeats an image both
horizontally and vertically.

OUTPUT
CSS background-repeat: no-repeat

OUTPUT
Showing the background image only once is also specified by
the background-image property repeats an image both horizontally
and vertically.

You might also like