Lesson - 03 Web Development CSS

CSS Cascading Style Sheets Prepared by: DR. WELLANIE M.
MOLINO
Technological University of the Philippines
CSS Introduction
 CSS is the language we use to style an HTML

document.
 CSS describes how HTML elements should be

displayed.
Types of CSS
Inline CSS
<h3 style = “color:green” heading with inline </h3>

Used for single HTML Element.
Internal CSS
<head>
<style>
h3 {color:green;}
</style>
</head>
Used for single page.
External CSS
<head>
<link rel = “stylesheet” href=“heading.css”>
</head>
Used for many pages.
CSS Syntax
A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then
applied to the corresponding elements such as paragraphs, headings, etc. in the document.
A CSS rule have two main parts, a selector and one or more declarations:
 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. Multiple CSS declarations are
separated with semicolons, and declaration blocks are surrounded by curly braces.
CSS Selector
 CSS selectors are the rule set that is used to select the HTML content on HTML
pages so that they can be styled as we choose.
 The style rules associated with that selector will be applied to the elements
that match the selector pattern.
 Selectors are one of the most important aspects of CSS as they allow you to
target specific elements on your web page in various ways so that they can be
styled.
Universal Selector
The universal selector, denoted by an asterisk (*), matches every single element on the page.
Example:
Output:
Element Type Selector
An element type selector matches all instance of the element in the document with the
corresponding element type name.
Example:
Output:
ID Selector
The id selector is used to define style rules for a single or unique element. The id selector is
defined with a hash sign (#) immediately followed by the id value.
Example:
Output:
Class Selector
The class selectors can be used to select any HTML element that has a class attribute. All the elements
having that class will be formatted according to the defined rule. The class selector is defined with a period sign (.)
immediately followed by the class value.
Example:
Output:
Descendant Selector
You can use these selectors when you need to select an element that is the descendant of another
element.
Example:
Output:
Child Selector
A child selector is used to select only those elements that are the direct children of some element.
A child selector is made up of two or more selectors separated by a greater than symbol (>).
Example:
Output:
Group Selector
Often several selectors in a style sheet share the same style rules declarations. You can group them into a
comma-separated list to minimize the code in your style sheet. It also prevents you from repeating the same
style rules over and over again.
Example:
Output:
Attribute Selector
Attribute Selector means the property, character or behavior of the Selector.
CSS Colors
 The color property defines the text color (foreground color in general) of an element.
 For instance, the color property specified in the body selector defines the default text
color for the whole page. Let's try out the following example to see how it works:
In CSS, Color can be set in 7 ways –
1.color-name – The actual name of the color.

2.color-code – The Hexadecimal code of the color.
3.rgb– rgb stands for Red, Green and Blue.
4.rgba– rgba stands for Red, Green, Blue and Alpha.
5.hsl– hsl stands for Hue, Saturation and Lightness.(Added as part of CSS3).
6.hsla– hsla stands for Hue, Saturation, Lightness and Alpha(Added as part of CSS3).
7.hwb– hwb is the amount of Hue, Whiteness and Blackness(Added as part of CSS4).
CSS Colors
You can specify your color values in various formats. Following table lists all the possible
formats −
Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}
CSS Colors
Color Names
HTML Color Names
Hexadecimal
RGB
CSS Colors
Color Name
<h1 style="background-color:DodgerBlue;">Hello World</h1

<h1 style="color:Tomato;">Hello World Text Color</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
CSS Colors
Color Name
<h1 style="background-color:DodgerBlue;">Hello World</h1

<h1 style="color:Tomato;">Hello World Text Color</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
CSS Background Color
The background-color property specifies the background color of an element.
 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the

background.
 The background-position property is used to control the position of an image in the

background.
 The background-attachment property is used to control the scrolling of an image in

the background.
 The background property is used as a shorthand to specify a number of other

background properties.
CSS Set the Background Color
The background-color property is used to set the background color of an element.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>
CSS Set the Background Image
The background-image property set an image as a background of an HTML element.
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
CSS Repeat the Background Image
The background-repeat property allows you to control how a background image is

repeated or tiled in the background of an element. You can set a background image to repeat
vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
CSS Repeat the Background Image
Similarly, you can use the value repeat-y to repeat the background image vertically
along the y-axis, or the value no-repeat to prevent the repetition altogether.
CSS Set the Background Image Position
• The background-position property is used

to control the position of the background
image. If no background position has been
specified, the background image is placed at
the default top-left position of the element i.e.
at (0,0),
• Values for position can be expressed as

keywords (top, bottom, left, right, center),
percentage or length.
background-position:100px;
background-position: right top;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
CSS Set the Background Attachment
The background-attachment property determines whether the background image is fixed

with regard to the viewport or scrolls along with the containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
CSS Background Shorthand Property
The background property is a shorthand property for setting all the individual background
properties, i.e., background-color, background-image, background-repeat, background-
attachment and the background-position property at once.
Using the shorthand notation the above example can be written as:
CSS Fonts
Web Safe Fonts
CSS Fonts
The CSS font properties define the font family, boldness, size, and the style of a text.
The font properties are: font-family, font-style, font-weight, font-size, and font-variant.
CSS Font Style
• The font-style property is used to

set the font face style for the text
content of an element.
• The font style can be normal, italic

or oblique. The default value is
normal.
CSS Font Size
The font-size property is used to set the size of

font for the text content of an element.
Using the Combination of Percentage and EM

The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters that make up a word.
The word-spacing property is used to add or subtract space between the words of a sentence.
The text-indent property is used to indent the text of a paragraph.
The text-align property is used to align the text of a document.
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
CSS Text
TextColor
Text Color TextTransformation
Text Transformation
Word Spacing
TextAlignment
Text Alignment
TextDecoration
Text Decoration
LetterSpacing
Letter Spacing
Text Indentation
CSS Text
CSS Box Model Hierarchy
The CSS box model is essentially a box

that wraps around every HTML element. It
consists of: margins, borders, padding,
and the actual content
Explanation of the different parts:
Content - The content of the box, where text and

images appear
Padding - Clears an area around the content. The
padding is transparent
Border - A border that goes around the padding
and content
Margin - Clears an area outside the border. The
margin is transparent
The box model allows us to add a border around

elements, and to define space between elements.
Margin and Padding Shorthand
Positioning in CSS
The position property specifies the type of

positioning method used for an element
(static, relative, absolute, fixed, or sticky).
 Static
 Relative
 Absolute
 Fixed
 Initial
 Inherit
https://css-tricks.com/almanac/properties/p/position/
REFERENCES
https://www.w3schools.com/css/
https://www.tutorialspoint.com/css/index.htm
https://htmldog.com/guides/css/
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
https://www.tutorialrepublic.com/css-tutorial/
https://www.csstutorial.net/
https://css-tricks.com/
<!DOCTYPE html> body{
<html lang="en"> background-color: #f4f4f4;
<head> color: #555555;
<meta charset="UTF-8"> font-family: Arial, Helvetica, sans-serif;
<meta name="viewport" content="width=device-width, font-size: 16px;
initial-scale=1.0"> line-height: 1.6em;
<title>Document</title> margin: 0;
<link rel="stylesheet" href="style.css"> }
</head> #main-header{
<body> background-color:teal;
<header id="main-header"> color: #ffffff;
<div class="container"> }
<h1>My Webpage</h1>
</div> .container{
</header> width: 80%;
<nav id="navbar"> margin: auto;
<div class="container"> overflow: hidden;
<ul> }
<li><a href="home.html">Home</a></li> #navbar{
<li><a href="#">About Us</a></li> background-color: #333333;
<li><a href="#">Service</a></li> color: #ffffff;
<li><a href="#">Contact Us</a></li> }
</ul> nav ul{

padding: 0px;

Lesson - 03 Web Development CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson - 03 Web Development CSS

Uploaded by

Copyright:

Available Formats

CSS Cascading Style Sheets Prepared by: DR. WELLANIE M.

 CSS is the language we use to style an HTML

 CSS describes how HTML elements should be

<h3 style = “color:green” heading with inline </h3>

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

In CSS, Color can be set in 7 ways –

1.color-name – The actual name of the color.

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

<h1 style="background-color:DodgerBlue;">Hello World</h1

<h1 style="background-color:DodgerBlue;">Hello World</h1

The background-color property specifies the background color of an element.

 The background-color property is used to set the background color of an element.

 The background-image property is used to set the background image of an element.

 The background-repeat property is used to control the repetition of an image in the

 The background-position property is used to control the position of an image in the

 The background-attachment property is used to control the scrolling of an image in

 The background property is used as a shorthand to specify a number of other

The background-repeat property allows you to control how a background image is

• The background-position property is used

• Values for position can be expressed as

The background-attachment property determines whether the background image is fixed

• The font-style property is used to

• The font style can be normal, italic

The font-size property is used to set the size of

Using the Combination of Percentage and EM

The direction property is used to set the text direction.

The text-indent property is used to indent the text of a paragraph.

The text-align property is used to align the text of a document.

The text-decoration property is used to underline, overline, and strikethrough text.

The CSS box model is essentially a box

Explanation of the different parts:

Content - The content of the box, where text and

The box model allows us to add a border around

The position property specifies the type of

</ul> nav ul{

You might also like