Scribd
Upload
68 views

Lesson 4, Intro To CSS and Inline CSS

The document introduces CSS (Cascading Style Sheets) which is used to describe the presentation of HTML documents. It discusses inline styles which allow unique styling for single elements using the style attribute. Various CSS properties are also outlined that control aspects like text formatting, lists, and fonts by setting properties such as color, size, and family. Examples are provided of inline CSS usage in HTML code.

Uploaded by

Aljohn Marilag
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
68 views

Lesson 4, Intro To CSS and Inline CSS

The document introduces CSS (Cascading Style Sheets) which is used to describe the presentation of HTML documents. It discusses inline styles which allow unique styling for single elements using the style attribute. Various CSS properties are also outlined that control aspects like text formatting, lists, and fonts by setting properties such as color, size, and family. Examples are provided of inline CSS usage in HTML code.

Uploaded by

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

 

Intro To CSS and Inline CSS


By: Aljohn S. Marilag
 CSS (Cascading Style Sheet)
 A style sheet language used for describing the presentation
of a document written in a markup language like HTML.

 CSS Property
 Use to define a certain style to be changed i.e.
(background-color, font-family, font-size, width, height)

 Inline Styles
 May be used to apply a unique style for a single element.
 Uses the “style” attribute to apply styles in an element.
 CSS Property
 Use to define a certain style to be changed i.e.
(background-color, font-family, font-size, width, height)
Text Properties
Property Description Values
Sets the color of a
color RGB, hex, keyword
text
Sets the distance normal, number,
line-height
between lines length, %
Increase or decrease
letter-spacing the space between normal, length
characters
Aligns the text in an left, right, center,
text-align
element justify
Adds decoration to none, underline,
text-decoration
text overline, line-through
Indents the first line
text-indent length, %
of text in an element
Controls the letters in none, capitalize,
text-transform
an element uppercase, lowercase
List Properties
Property Description Values

list-style-type, list-style-
Sets all the properties for a
list-style position, list-style-
list in one declaration
image, inherit

Specifies an image as the


list-style-image URL, none, inherit
list-item marker

Specifies where to place the


list-style-position inside, outside, inherit
list-item marker

none, disc, circle, square,


decimal, decimal-leading-
zero,
armenian, georgian, lower-
Specifies the type of list-
list-style-type alpha, upper-alpha, lower-
item marker
greek,
lower-latin, upper-latin,
lower-roman, upper-roman,
inherit
Font Properties
Property Description Values

font-style, font-variant, font-weight,


Sets all the font properties in one font-size/line-height, font-
font
declaration family, caption, icon, menu, message-
box, small-caption, status-bar, inherit

font-family Specifies the font family for text family-name, generic-family, inherit

xx-small, x-small, small, medium,


font-size Specifies the font size of text large, x-large, xx-large, smaller,
larger, length, %, inherit

font-style Specifies the font style for text normal, italic, oblique, inherit

Specifies whether or not a text should


font-variant normal, small-caps, inherit
be displayed in a small-caps font

normal, bold, bolder, lighter,


100, 200, 300, 400, 500, 600, 700,
font-weight Specifies the weight of a font 800, 900, inherit
Careful, many of these are not
supported!
 CSS Properties Complete List:
https://www.w3schools.com/cssref
<!DOCTYPE html>
<html>
<head>
<title> Intro to CSS </title>
</head>
<body>
<h1> Home </h1>
<img src=“”/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Intro to CSS </title>
</head>

<body style="background-image:url(‘ITPC222.jpg');background-size:cover;">

<h1 style="color:black;font-family:verdana;"> Home </h1>

<img src="ITPC222.jpg" style="width:350px;height:100px;border-radius:50%;">

</body>

</html>

You might also like