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>
