Scribd
Upload
7 views

COMP 10 CSS

Uploaded by

nova bel supang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

COMP 10 CSS

Uploaded by

nova bel supang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Objectives:

A. Experiment with fonts.


B. Choose the background color that
complements the text color and
vice versa.
C. Input special characters and
comments.
Cascading Style Sheets
defining the characteristics of the design
elements used in HT ML document.

Basic pattern of a CSS command:


property : value
Basic pattern of a CSS command:

property : value

the feature of the style itself


a paragraph you
want to style
HTML CSS
Contents of In charge of the
the webpage; presentation; formatting
meaning
Types of CSS
1. In-line Style Sheet – the first, most specific,
and highest priority style sheet. It contains CSS
commands embedded or placed inside HT ML
tags.
Types of CSS
2. Internal Style Sheet – the second priority sheet
which resembles a summary of CSS commands located at
the upper portion of the HT ML document.
Types of CSS
3. External Style Sheet – the third and most highly
recommended type of CSS sheet which lists all of the
CSS commands in a separate document.
<html>
<head> p{
<link rel="stylesheet" type="text/css" href="external.css"/>
<title>Stylissimo</title>
font-size: 80%;
</head> }
<h2>Self-Regeneration</h2>
<body>
h2 {
<dl> font-family: Verdana;
<dt><em>phoenix, phenix</em></dt>
<dd>a bird of gorgeous plumage, sacred to the sun, reborn from <br />
}
the ashes of the funeral pyre which it made for itself<br /> em {
when each life span of 500 or 600 years was over.</dd>
</dl>
color:red;

CSS
<p>from <em>New Webster's Dictionary and Thesaurus</em></p> font-weight: bolder;
</body>
</html>
}
p{
font-size: 80%;
}
h2 {
font-family: Verdana;
}
em {
color:red;
font-weight: bolder;
}
<html>
<head>
<title>Stylissimo</title>
</head>
<body>
<h2><font face="Verdana">Self-Regeneration</font></h2>
<dl>
<dt><font color="red"><b><i>phoenix, phenix</i></b></font>
<dd>a bird of gorgeous plumage, sacred to the sun, reborn from <br />
the ashes of the funeral pyre which it made for itself<br />
when each life span of 500 or 600 years was over.</dd>
</dl>
<p><font size="2em">from <font color="red"
size="2em"><b><i>New Webster's Dictionary and Thesaurus
</i></b></font></font></p>
</body>
</html>
Deprecated Tags and Attributes
Tag Description Replacement
<center> Centers text <p style=“text-align:center”>

<u> Underlines text Text style sheets


Defines strike through
<s> or <strike> text Text style sheets
<font> Identifies font
characteristics Font style sheets
Style Sheet Syntax
CSS Syntax: 3 Parts
selector { property : value }

attribute

HTML tag you


want to define
CSS Syntax
p { font-family : arial }

p { font-family : arial ; font-style : italic }

p{
font-family : arial ;
font-style : italic ;
}
Typeface of the Characters
• Font-family = the font that your text will be in
• Font-size
1. Old 7 Size Font System
a. xx-small
b. x-small
c. Small
d. Medium
e. Large
f. x-large
g. xx-large
Typeface of the Characters
2. Larger or smaller – relative to the Old 7 Size
Font System
3. % - percent relative to the default font size of
the browser, e.g., 150%
4. pt – point size, the font-sizing system of
Windows, e.g., 22pt
5. em – the size of the point is multiplied by the value of
the number, e.g., 3em is three times the size of
1em
Typeface of the Characters
• Font-style = possible values for this property are:
italic, normal, and oblique

• Font-weight = how thick each letter will become;


normal, lighter, bold, and bolder
p {
font-size: 80%;
}
h2 {
font-family: Verdana, “Dream of me” , Garamond;
font-size: 2em;
font-style: oblique;
}
dl {
font-family: “Lucida Console”, Tahoma, Arial;
font-size: 110%;
}
em {
font-weight: bolder;
}
CSS Colors, Background,
Fonts, and Text
Objectives:
a. Demonstrate an understanding of the CSS Colors,
backgrounds, fonts, and text
b. Apply CSS colors, backgrounds, fonts and text into a
webpage.
c.The learners create an interactive website
CSS Colors: Colors in CSS can be specified by
name (like “red”), hex value (like “#ff0000”), RGB value
(like “rgb(255,0,0)”), or HSL value (like “hsl(0, 100%,
50%)”).

For example, to set the text color of a paragraph to red,


you would use the following CSS:
p{
color: red;
}
CSS Backgrounds: The background of an
element in CSS can be set using the background-
color property.

For instance, to set the background color of the


entire webpage to blue, you would use: body {
background-
color: blue;
}
CSS Fonts: The font-family property is used
in CSS to specify the typeface of the text.

For example, to set the font of all headings to


Arial, you would use:
h1, h2, h3, h4, h5,
h6 {
font-family: Arial;
}
CSS Text: There are many CSS properties to
style text, such as text-align for alignment, text-
decoration for underline or over line, and text-
transform for changing case.
h1 {
For example, to center align a
text-align: center;
heading and transform its text to text-transform:
uppercase, you would use: uppercase;
}
ACTIVITY TIME!
Directions: Create a simple webpage about your
favorite hobby. Use CSS to style the page with
different colors, a unique background, a readable
font, and styled text. Remember, the goal is to
create an interactive and visually appealing
website.
CSS Borders, Margins, and Paddings
A. Demonstrate an understanding of the
CSS borders, margins, and paddings.
B. Apply CSS borders, margins, and
paddings.
C. The learners create an interactive
website.
CSS Borders: The border property in CSS
is used to set the border around an HTML
element. It can be specified with a width,
style, and color.

The border-style property specifies what kind


of border to display.
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the
border-color value
•ridge - Defines a 3D ridged border. The effect depends on the
border-color value
•inset - Defines a 3D inset border. The effect depends on the border-
color value
•outset - Defines a 3D outset border. The effect depends on the
border-color value
•none - Defines no border
•hidden - Defines a hidden border
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Border Width
The border-width property specifies the
width of the four borders.

The width can be set as a specific size (in


px, pt, cm, em, etc) or by using one of the
three pre-defined values: thin, medium, or
thick.
p.one { p.two {
border- border-
style: solid; style: solid;
border- border-
width: 5px; width: medium;
} }

p.three { p.four {
border- border-
style: dotted; style: dotted;
border- border-
width: 2px; width: thick;
} }
CSS Border Color
The border-color property is used to set the color of
the four borders.
The color can be set by:
•name - specify a color name, like "red"
•HEX - specify a HEX value, like "#ff0000"
•RGB - specify a RGB value, like "rgb(255,0,0)"
•HSL - specify a HSL value, like "hsl(0, 100%,
50%)"
•transparent
p.two {
p.one {
border-
border-
style: solid;
style: solid;
border-
border-color: red;
color: green;
}
}

p.three {
border-
style: dotted;
border-
color: blue;
}
Specific Side Colors
The border-color property can have from
one to four values (for the top border, right
border, bottom border, and the left border).
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
CSS Border - Shorthand Property

The border property is a shorthand property for


the following individual border properties:
•border-width
•border-style (required)
•border-color
p{
border: 5px solid red;
}

You might also like