HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC

INTRODUCTION TO
CASCADING STYLE
SHEETS
Quarter 4
BLESILDA B. VOCAL

LEARNING
OBJECTIVES
◦understand what a CSS is,
◦identify the ways on how to
apply CSS to HTML, and;
◦ understand what selectors,
properties and values are.

What is Cascading Style Sheet(CSS)?
1.HTML
2.JAVASCRIPT
3.CSS

Defines the behavior
Defines the appearance and style
Defines the structure

What is CSS?
Cascadin
g
Style Sheet

CSS
Fonts Colors Positioning Animation

What is CSS?
◦Cascading Styles Sheets (CSS) is a way to style and
present HTML.
◦Whereas the HTML is the meaning or content, the
style sheet is the presentation of that document.
◦It is a styling language used to add style, layout, and
visual presentation to web pages written in HTML or
XML markup languages

Cascading Style Sheet
◦Cascading Style Sheets, fondly referred to as CSS, is a
simple design language intended to simplify the process of
making web pages presentable.
◦CSS handles the look and feel part of a web page.
◦CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

Why Use CSS?
◦CSS is used to define styles for
your web pages, including the
design, layout and variations in
display for different devices
and screen sizes.

Parts of Style Rule
◦Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
◦Property − A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS
properties. They could be color, border etc.
◦ Value − Values are assigned to properties. For example,
color property can have value either red or #F1F1F1 etc.

EXAMPLE
◦ In this example all <p> elements will be center-aligned, with a red text color:

Advantages of CSS
◦ CSS saves time − You can write CSS once and then reuse same sheet
in multiple HTML pages. You can define a style for each HTML element
and apply it to as many Web pages as you want.
◦ • Pages load faster − If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So less code means faster
download time.
◦ • Easy maintenance − To make a global change, simply change the
style, and all elements in all the web pages will be updated automatically.

Advantages of CSS
◦ Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
◦ • Multiple device compatibility − Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
◦ • Global web standards − Now HTML attributes are being deprecated and it
is being recommended to use CSS. So, it is a good idea to start using CSS
in all the HTML pages to make them compatible to future browsers

HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC

You can put CSS Style Rule Syntax as follows
selector { property: value }
Table { border: 1 px solid #C00 }
•table is a selector that selects the HTML element(s) that you want to style. In this case, it's selecting all the
<table> elements.
•{} brackets are used to enclose the declaration block that contains the property-value pairs for the selected
element(s).
•border is the CSS property being applied to the selected element(s). It sets the border around the table.
•1px is the value of the border-width property, which sets the width of the border to 1 pixel.
•solid is the value of the border-style property, which sets the style of the border to a solid line.
•#C00 is the value of the border-color property, which sets the color of the border to a shade of red.

The Type Selectors
◦ This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings.
h1 { color: #36CFFF; }
The selector h1 is targeting all the <h1> elements in
the HTML document and applying the color property
with a value of #36CFFF. This means that all <h1>
elements will have their text color set to the specified
value, which in this case is a shade of blue.

The Universal Selectors
◦Rather than selecting elements of a specific type, the
universal selector quite simply matches the name of
any element type
* {
color: #000000;
}

The Descendant Selectors
◦ Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As
given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.
◦ This is a CSS rule that sets the text color of all <em> elements that
are descendants of <ul> elements to black (#000000).
◦ <ul> is the selector for an unordered list element, and <em> is the
selector for an emphasized text element. The space between them
indicates that <em> is a descendant element of <ul>. By setting the
color property to #000000 (which is black), this CSS rule will change
the text color of all <em> elements within a <ul> element to black.

◦<ul>
◦ <li><em>Item 1</em></li>
◦ <li><em>Item 2</em></li>
◦</ul>

Applying CSS
Create a webpage and apply the following below;
1. Black as background color.
2. Add Heading 1 and write the title of this module with white as text color.
3. For the content add paragraph use 20 pixel for text size and then write your
reflection/generalization about this lesson. Minimum of 5 sentences. 4. Use Yellow for text
color content. 5. Use Forte as style of the text

CSS COLORS,
COMMENTS
Quarter 4

Learning Objectives
◦understand the different CSS
measurement units, use
comments to explain codes and
identify the different color values
to specify a color.

CSS units
◦Pixels -The most widely used
measurement unit. A pixel
does not actually correlate to
a physical pixel on your
screen, as that varies, a lot,
by device (think high-DPI
devices vs non-retina
devices).
◦Percentages -let you specify
values in percentages of that
parent element’s
corresponding property.

Relative units
◦em is the value assigned to that element’s font-size,
therefore its exact value changes between elements.
◦rem is similar to em, but instead of varying on the current
element font size, it uses the root element (html) font size.
◦ex is like em, but inserted of measuring the width of m, it
measures the height of the x letter.
◦ch is like ex but instead of measuring the height of x it
measures the width of 0 (zero).

CSS Comments
◦ 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.
◦ A CSS comment is
placed inside the <style>
element, and starts with /*
and ends with */:

CSS Colors
◦CSS uses color values to specify a
color. Typically, these are used to
set a color either for the foreground
of an element or else for the
background of the element.

Following table lists all the possible formats

1. CSS Colors - Hex Codes
◦A hexadecimal is a 6-digit representation of a
color. The first two digits(RR) represent a red
value, the next two are a green value(GG),
and the last are the blue value(BB). Colors
are specified using predefined color names,
or RGB, HEX, HSL, RGBA, HSLA values.

Following are the examples to use Hexadecimal notation.

2. CSS Colors - Short Hex Codes

CSS Background Color You can set the
background color for HTML elements
<!DOCTYPE html>
<html> <body> <h1 style="background-color:DodgerBlue;">Hello
World</h1> <p style="background-color:Tomato;"> The quick brown fox
jumps over the lazy dog. </p> </body> </html>

CSS Border Color
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body> </html>

Hands on Activity: Create the CSS / HTML code for the
given output.

Learning Objectives
At the end of the lesson
◦you will be able to learn
the CSS background
properties and apply how
to set backgrounds of
various HTML elements.

The background color of an element is specified by the background-
color property. The background color of a page is defined in the
body selector:
body {
background-color: #338844;
}

Background Properties
◦ background-image property is used to set the background image of an element.
◦ background-color property is used to set the background color of an element.
◦ background-repeat property is used to control the repetition of an image in the background.
◦ background-position property is used to control the position of an image in the background.
◦ background-attachment property is used to control the scrolling of an image in the
background.
◦ background-property is used as a shorthand to specify the number of other background
properties.

We can set the background image by calling local stored images as shown below.
<html>
<head>
<style>
body {
background-image: url("html.png");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>

Background Color
background-color: color | transparent |
inherit;
For example:
body {
background-color: #338844;
}
Color values in CSS are most often specified in the following
formats:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255, 0, 0)"

Opacity / Transparency
Example
div {
background-color: green;
opacity: 0.3;
}

Transparency using RGBA
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha
parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Background Repeat
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.
Syntax:
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;

Values Repeat
The image is repeated both horizontally and
vertically.
body {
background-image: url("images.jpg");
background-repeat:repeat;
}
repeat-y: The image is repeated vertically
only.
body {
background-repeat:repeat-y;
}
repeat-x: The image is repeated horizontally only.
body {
background-repeat:repeat-x;
}
no-repeat: the image is not repeated: only one copy of the
image is drawn.
body {
background-repeat:no-repeat;
}
inherit: Takes the same specified value as the property for
the element's parent.
body {
background-repeat:inherit;
}

Background 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), let's try out
the following example:
Syntax: background-position: value
body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
background-position: right top;
}

<html>
<head>
<style>
body {
background-image: url("lebron.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p><b>LEBRON JAMES</b></p>
</body>
</html>

<html>
<head>
<style>
body {
background-image: url("lebron.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p><b>LEBRON JAMES</b></p>
</body>
</html>

Background-attachment
◦ The background-attachment property specifies whether a background image is fixed with regard to
the viewport or scrolls along with the containing block.
Syntax:
background-attachment: scroll | fixed | local | inherit;
Values scroll :
If specified, the background image scrolls with the element.
body {
background-image: url("img.jpg");
background-attachment: scroll;
}

◦ The background-attachment property specifies whether a background image is fixed with regard to the
viewport or scrolls along with the containing block.
Syntax:
fixed :
If specified, the background image does not scrolls with the element.
body {
background-image: url("bg.jpg");
background-attachment: fixed;
}

◦ The background-attachment property specifies whether a background image is fixed with regard
to the viewport or scrolls along with the containing block.
Syntax:
inherit: Takes the same specified value as the property for the element's parent.
body {
background-image: url("bg.jpg");
background-attachment: inherit;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('lebron.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>LEBRON JAMES</p>
<p> LEBRON JAMES </p>
</body>
</html>

Create the CSS / HTML Codes using background properties for the given output. Write
them in your answer sheet.
Output:
Hint:
*Background color is blue
*p color is #FFFFFF

Generic Font Families
◦ In CSS there are five generic font families:
1.Serif fonts have a small stroke at the edges of each letter.
They create a sense of formality and elegance.
2.Sans-serif fonts have clean lines (no small strokes
attached). They create a modern and minimalistic look.
3.Monospace fonts - here all the letters have the same fixed
width. They create a mechanical look.
4.Cursive fonts imitate human handwriting.
5.Fantasy fonts are decorative/playful fonts.

Difference Between Serif and Sans-serif Fonts

Font properties of an
element:
• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how bold or light a font
appears
• The font-size property is used to increase or decrease the size of a font.
• The font property is used as shorthand to specify a number of other font properties.

Set the Font Family
◦ <html>
◦ <head>
◦ </head>
◦ <body>
◦ <p style = "font-family:georgia,garamond,serif;"> This text is rendered in either georgia,
garamond, or the default serif font depending on which font you have at your system. </p>
◦ </body>
◦ </html>

Set the Font Style
◦ Following is the example, which demonstrates how to set the font style of an element. Possible values are normal,
italic and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;"> This text will be rendered in italic style </p>
</body>
</html>

Set the Font Variant
◦ The following example demonstrates how to set the font variant of an element. Possible values are normal and small-
caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;"> This text will be rendered as small caps </p>
</body>
</html>

Set the Font Weight
◦ The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal,
bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;"> This font is bold. </p>
<p style = "font-weight:bolder;"> This font is bolder. </p>
<p style = "font-weight:500;"> This font is 500 weight. </p>
</body>
</html>

Set the Font Size
◦ The font- size property is used to control the size of fonts. Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style = "font-size:20px;"> This font size is 20 pixels </p>
<p style = "font-size:small;"> This font size is small </p>
<p style = "font-size:large;"> This font size is large </p>
</body>
</html>

Set the Font Size Adjust
◦ This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;"> This text is using a font-size-adjust value.
</p>
</body>
</html>

Set the Font Stretch
◦ This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-
condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used. </p>
</body>
</html>

Shorthand Property
◦ <html>
◦ <head>
◦ </head>
◦ <body>
◦ <p style = "font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once.
◦ </p>
◦ </body> </html>

• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how
bold or light a font appears
• The font-size property is used to increase or decrease the size of a font.
• The font property is used as shorthand to specify a number of other
font properties.

Learning Objectives:
◦At the end of the lesson you
will be able to understand
how to manipulate text using
CSS properties.

You can set following text properties of an element:

Set the Text Color
<html>
<head>
</head>
<body>
<p style = "color:red;"> This text will be written in red. </p>
</body>
</html>

Set the Text Direction
◦ The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;"> This text will be rendered from right to left </p>
</body>
</html>

Set the Space between Characters
◦ <html>
◦ <head>
◦ </head>
◦ <body>
◦ <p style = "letter-spacing:5px;"> This text is having space between letters. </p> </body
◦ </html>

Set the Space between Words
◦ <html>
◦ <head>
◦ </head>
◦ <body>
◦ <p style = "word-spacing:5px;"> This text is having space between words.
◦ </p>
◦ </body>
◦ </html>

Set the Text Indent
◦ <html>
◦ <head>
◦ </head>
◦ <body>
◦ <p style = "text-indent:1cm;"> This text will have first line indented by 1cm and this line will
remain at its actual position this is done by CSS text-indent property. </p> </body>
◦ </html>

Performance Task No.1
◦Design a personal blog or website with a
color scheme that reflects your personality
or interests using css
Choose a color scheme that reflects your personality or
interests.
For example, if you are a nature lover, you may want to use
shades of green and brown. If you are a music enthusiast, you
may want to use bold and vibrant colors like red, yellow, and
blue.
For the additional content add paragraph use 20 pixel for text size and then write
your reflection/generalization about this lesson. Minimum of 5 sentences.

Learning
Objectives
◦At the end of the lesson, you
will be able to learn the CSS
border properties that allow you
to define the border area of an
element's box.

BORDER PROPERTIES
• The border-color specifies the color of a border.
• The border-style specifies whether a border should
be solid, dashed line, double line, or one of the other
possible values.
• The border-width specifies the width of a border.

The border-color Property
◦ The border-color property allows you to change the color of the border surrounding an element. You can
individually change the color of the bottom, left, top and right sides of an element's border using the
properties.
• border-bottom-color changes the color of bottom border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.

The border-style Property
• none − No border. (Equivalent of border-width:0;)
• solid − Border is a single solid line.
• dotted − Border is a series of dots.
• dashed − Border is a series of short lines.
• double − Border is two solid lines.
• groove − Border looks as though it is carved into the page.
• ridge − Border looks the opposite of groove.
• inset − Border makes the box look like it is embedded in the page.
• outset − Border makes the box look like it is coming out of the canvas.
• hidden − Same as none, except in terms of border-conflict resolution for table elements

• border-bottom-style changes the style of bottom border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border.

The image has 9 different style. This is the following

The Image Hoverlay
◦ The overlay-image class container encapsulates all the necessary structure:
◦ -original image,
◦ -original overlay text block,
◦ -image/text overlay block
◦ With a builder, it can be replaced by an existing container block (for example it could be the Divi "code" module, to which we simply add
the overlay-image class). displayed on mouse hover.

The following example shows all flip
images properties:

The Responsive Image
◦ A responsive, mobile friendly image gallery. You can use it
as is or you can modify it how you want. It doesn't have to
be full width either. Give the gallery element a width and
it will fit to that making it easy to be right aligned or
centered within a page.

The Image Modal
◦ A modal is a dialog box/popup window that is displayed on top of the current page.
Example

PERFORMANCE
TASK
WEBSITE DESIGN

TASK: CREATE A SCHOOL WEBSITE
USING HTML AND CSS THAT INCLUDES
THE FOLLOWING PAGES AND
FEATURES:

Homepage
•Design an engaging homepage
that represents your school.
•Include a header with the school
logo and a navigation menu
with links to other pages.
•Add a hero section with a
captivating image or slideshow
and a brief welcome message.

About Us
• Create a page that provides information
about your school.
• Include the school's history, mission, vision,
and core values.
• Add relevant images or videos to enhance
the content.

Academics:
• Design a page that highlights the academic programs
and courses offered at your school.
• Include a description of each program, its benefits,
and any unique features.
• Present the information in an organized and visually
appealing manner.

Faculty and Staff:
• Create a page that introduces the faculty and
staff members at your school.
• Include their names, roles, qualifications, and
a brief bio.
• Optionally, add their profile pictures for a
personal touch.

Student Life:
• Design a page that showcases the
vibrant student life at your school.
• Include information about clubs,
sports teams, extracurricular
activities, and events.
• Add images, videos, or
testimonials to highlight student
achievements and experiences.

Admissions:
• Create a page with all the necessary information for
prospective students and parents.
• Include admission requirements, procedures,
deadlines, and contact details.
• Optionally, provide a downloadable application
form.

Contact Us:
• Design a page that includes contact information
for your school.
• Include the school's address, phone number,
email, and social media links.
• Optionally, include a contact form for visitors to
send messages or inquiries.

Styling and Visual
Design
• Use CSS to style your website and make it
visually appealing.
• Choose appropriate fonts, colors, and layouts
that align with your school's brand.
• Ensure consistency in design elements such as
headers, buttons, and forms.

Criteria Points
Design and Layout
Effective use of color, typography, and layout
Consistent design elements throughout the website
Attention to detail in design and aesthetics
25 Points
Content and Structure
Clear and concise information on each page
Well-organized structure and navigation
Relevant and engaging content for each section
25 Points
CSS Styling
Effective use of CSS to style the website
Consistent and appropriate use of fonts, colors, and layout
CSS code is clean and well-structured
25 Points
Interactivity
Implementation of interactive elements such as forms, buttons, or animations
Interactive elements are functional and enhance the user experience
10 Points
Timeliness
Completion of the project within the specified deadline
5 Points (DEADLINE: APRIL 30, 2024)
Work Ethics
Active participation and contribution to the group project
accountability for assigned tasks and responsibilities
10 Points

Learning Objective:
◦you will be able to learn the
how to use link using CSS

Properties of Links
◦The link signifies unvisited hyperlinks.
◦ The :visited signifies visited hyperlinks.
◦The :hover signifies an element that currently has the user's
mouse pointer hovering over it
◦The :active signifies an element on which the user is
currently clicking.

You can set following font properties of
an element:
◦ The font-family property is used to change the face of a font.
◦ The font-style property is used to make a font italic or oblique.
◦ The font-variant property is used to create a small-caps effect.
◦ The font-weight property is used to increase or decrease how bold or light
a font appears.
◦ The font-size property is used to increase or decrease the size of a font.
◦ The font property is used as shorthand to specify a number of other font
properties.

HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC

More Related Content

Similar to HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC (20)

Recently uploaded (20)

HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC

Editor's Notes