Scribd
Upload
13 views12 pages

CSS Basics and Implementation Guide

This document provides an introduction to cascading style sheets (CSS) and how to apply CSS designs to HTML. It contains 3 sections that: 1) Explain what CSS is and how it describes how HTML elements are displayed, 2) Familiarize with different CSS properties, and 3) Import CSS styles to HTML and create external CSS files to modify HTML properties. The document includes examples of CSS syntax, selectors like id and class, and how to link an external CSS file to HTML.

Uploaded by

April Joy Gonzales
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
13 views12 pages

CSS Basics and Implementation Guide

This document provides an introduction to cascading style sheets (CSS) and how to apply CSS designs to HTML. It contains 3 sections that: 1) Explain what CSS is and how it describes how HTML elements are displayed, 2) Familiarize with different CSS properties, and 3) Import CSS styles to HTML and create external CSS files to modify HTML properties. The document includes examples of CSS syntax, selectors like id and class, and how to link an external CSS file to HTML.

Uploaded by

April Joy Gonzales
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

Designing

using css
Topic

ES5
Computer Fundamentals and Programming
Contents of this Lecture

Here’s what you’ll find in this Lecture:

1. Introduction to CSS – Explain what Cascading Style Sheet is.


2. Different properties in CSS – Be familiarize with the different CSS.
3. Applying designs to HTML using CSS – import CSS styles to HTML
and create CSS file to modify properties of HTML.
01.

Introduction to CSS
Cascading
Style Sheet
CSS stands for Cascading Style Sheet.
CSS describes how HTML elements
are to be displayed.
Here’s how you start
making your design
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
body{background-color:lightblue;text-align:center;}
h1{color:blue;font-size:40px;}
p{font-family:verdana;font-size:20px;}
</style>
</head>
<body>
<h1>My First CSS Heading</h1>
<p>My first CSS paragraph.</p>
</body>
</html>
Big letters
Accent

CSS Syntax
1 60
12 12
3

12
RED OR BLACK?

Declaration Declaration

h1{color:blue;font-size:40px;}
Selector Value Value
Property Property
DECORATIVE
ELEMENTS

Import a
CSS File
DROP
SHADOW
BASE LINE

SWASH
How to import?

Put all the styles inside


the style.css

01 02 03
Create a file style.css Use the link tag inside the head element like this:
<link rel="stylesheet" href="style.css">
Try this!
HTML x CSS

<!DOCTYPE html> body{


<html> background-color:orange;
<head><title>Import CSS</title> font-family:verdana;
<link rel="stylesheet" href=".\style.css"> }
</head>
<body> h1{
color:white;
<h1>My First CSS Example</h1> }
<p>This is a paragraph.</p>
p{
</body> font-size:20px;
</html> }
CSS id selector
The id selector uses the id attribute of an HTML element to select a specific element.

<!DOCTYPE html> body{


<html> background-color:orange;
<head><title>Import CSS</title> font-family:verdana;
<link rel="stylesheet" href=".\style.css"> }
</head> h1{
<body> color:red;
}
<h1>My First CSS Example</h1> #me{
<h1 id="me">My First CSS Example</h1> color:white;
<h1>My First CSS Example</h1> }

</body> p{
</html> font-size:20px;
}
CSS class selector
The class attribute is often used to point to a class name in a style sheet.

<!DOCTYPE html> body{


<html> background-color:orange;
<head><title>Import CSS</title> font-family:verdana;
<link rel="stylesheet" href=".\style.css"> }
</head> h1, p{
<body> color:red;
<h1>My First CSS Example</h1> }
<h1 id="me">My First CSS Example</h1> #me{
<h1 class="c1">My First CSS Example</h1> color:white;
}
<p>Another CSS Example</p> .c1{
<p>Another CSS Example</p> font-family:"Time New Roman";
<p class="c1">Another CSS Example</p> font-style:italic;
</body> }
</html>
p{
font-size:20px;
}
TOP LINE

Thanks!
DIFFERENT
ORNAMENTS

You might also like