[go: up one dir, main page]
Scribd
Upload
23 views52 pages

Itc122 Web Design Lesson Viii Ix

The document provides information about various CSS properties for styling text, including: - Text color allows setting text color by name, hex, or RGB values. - Text alignment uses text-align to set horizontal alignment as left, right, center, or justified. - Text decoration sets or removes underlines, overlines, and line-throughs using text-decoration. - Text transformation transforms text to uppercase, lowercase, or capitalize using text-transform. - Text indentation indents the first line of a text block using text-indent. The document includes code examples demonstrating the use of each property in CSS rules and HTML elements.

Uploaded by

Patrick De Guzman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views52 pages

Itc122 Web Design Lesson Viii Ix

The document provides information about various CSS properties for styling text, including: - Text color allows setting text color by name, hex, or RGB values. - Text alignment uses text-align to set horizontal alignment as left, right, center, or justified. - Text decoration sets or removes underlines, overlines, and line-throughs using text-decoration. - Text transformation transforms text to uppercase, lowercase, or capitalize using text-transform. - Text indentation indents the first line of a text block using text-indent. The document includes code examples demonstrating the use of each property in CSS rules and HTML elements.

Uploaded by

Patrick De Guzman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 52

ITC122

WEB DESIGN
CSS BORDER PROPERTIES
The CSS border properties allow you to specify the style, width, and color of an element's border.

ACTCSS23.html
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}ACT
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;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>


<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>
CSS MARGINS
The CSS margin properties are used to create space around elements,
outside of any defined borders.

Margin - Individual Sides


CSS has properties for specifying the margin for each side of an
element:
 margin-top
 margin-right
 margin-bottom
 margin-left
All the margin properties can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
element
CSS MARGINS
ACTCSS24.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<div>This element has a margin of 70px.</div>

</body>
</html>
MARGIN - INDIVIDUAL SIDES
ACTCSS25.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of
100px, and a left margin of 80px.</div>
</body>
</html>
MARGIN - SHORTHAND PROPERTY

To shorten the code, it is possible to specify all the margin properties


in one property.

If the margin property has four values:


margin: 25px 50px 75px 100px;
 top margin is 25px
 right margin is 50px
 bottom margin is 75px
 left margin is 100px
MARGIN - SHORTHAND PROPERTY
ACTCSS26.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of
75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
MARGIN - SHORTHAND PROPERTY

If the margin property has three values:


margin: 25px 50px 75px;
 top margin is 25px
 right and left margins are 50px
 bottom margin is 75px

If the margin property has two values:


margin: 25px 50px;
 top and bottom margins are 25px
 right and left margins are 50px

If the margin property has one value:


margin: 25px;
 all four margins are 25px
CSS PADDING
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an
element:
 padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:


 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent
element
PADDING - INDIVIDUAL SIDES
ACTCSS27.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>
</body>
PADDING - SHORTHAND PROPERTY

To shorten the code, it is possible to specify all the padding


properties in one property.
Individual padding properties:
 padding-top
 padding-right
 padding-bottom
 padding-left

If the padding property has four values:


padding: 25px 50px 75px 100px;
 top padding is 25px
 right padding is 50px
 bottom padding is 75px
 left padding is 100px
PADDING - SHORTHAND PROPERTY

If the padding property has three values:


padding: 25px 50px 75px;
 top padding is 25px
 right and left paddings are 50px
 bottom padding is 75px

If the padding property has two values:


padding: 25px 50px;
 top and bottom paddings are 25px
 right and left paddings are 50px

If the padding property has one value:


padding: 25px;
 all four paddings are 25px
CSS HEIGHT AND WIDTH

Setting height and width


The height and width properties are used to set the height and
width of an element.

The height and width can be set to auto (this is default. Means
that the browser calculates the height and width), or be specified
in length values, like px, cm, etc., or in percent (%) of the
containing block.
CSS HEIGHT AND WIDTH
ACTCSS28.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<div>This element has a width of 100%.</div>

</body>
</html>
ACTCSS29.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<p>This div element has a height of 200px and a width of 50%:</p>

<div></div>

</body>
THE CSS BOX MODEL

All HTML elements can be considered as boxes. In CSS, the term


"box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content.
CSS OUTLINE
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand
out".

 Outline Style
 The outline-style property specifies the style of the outline, and can have one of the following
values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
ACTCSS30.html
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
CSS TEXT
Text Color
The color property is used to set the color of the text. The color is
specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)“
Text Alignment
The text-align property is used to set the horizontal alignment of a
text.
A text can be left or right aligned, centered, or justified.
Text Decoration
The text-decoration property is used to set or remove decorations
from text.
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
TEXT COLOR
ACTCSS31.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}

h1 {
color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page
is defined in the body selector.</p>

</body>
</html>
TEXT ALIGNMENT
ACTCSS32.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>
TEXT DECORATION
ACTCSS33.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
TEXT TRANSFORMATION
ACTCSS34.html
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>


<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>
CSS TEXT
Text Indentation
The text-indent property is used to specify the indentation of the first
line of a text.
Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.
Line Height
The line-height property is used to specify the space between lines
Text Direction
The direction property is used to change the text direction of an
element.
Word Spacing
The word-spacing property is used to specify the space between the
words in a text.
Text Shadow
The text-shadow property adds shadow to text.
TEXT INDENTATION
ACTCSS35.html
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-indent: 50px;
}
</style>
</head>
<body>

<p>The late Florentino Cayco, Sr., first Filipino Undersecretary of Public


Instruction and illustrious educator, conceptualized the birth and administered
the growth of Arellano University.</p>

</body>
</html>
LETTER SPACING
ACTCSS36.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>

</body>
</html>
LINE HEIGHT
ACTCSS37.html
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
TEXT DIRECTION
ACTCSS38.html
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>


<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

</body>
</html>
WORD SPACING
ACTCSS39.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>

</body>
</html>
TEXT SHADOW
ACTCSS40.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow
property.</p>

</body>
</html>
CSS OPACITY / TRANSPARENCY
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent.

ACTCSS41.html
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more
transparent:</p>

<p>Image with 50% opacity:</p>


<img src="au.png" alt="Forest" width="200" height="200">

</body>
</html>
TRANSPARENT HOVER EFFECT
ACTCSS42.html
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="au.jpg" alt="au logo" width="170" height="100">
<img src="it.jpg" alt="au logo" width="170" height="100">
<img src="aulogo.jpg" alt="au logo" width="170" height="100">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other
elements than the a element.</p>
</body>
CSS NAVIGATION BAR

Navigation Bars
 Having easy-to-use navigation is important for any web
site
 Navigation Bar are the list of Links

 A navigation bar needs standard HTML as a base


VERTICAL NAVIGATION BAR EXAMPLES
ACTCSS43.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
ACTIVE/CURRENT NAVIGATION LINK
ACTCSS44.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>


<p>In this example, we create an "active" class with a green background color and a
white text. The class is added to the "Home" link.</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
CENTER LINKS & ADD BORDERS
ACTCSS45.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>


<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
EXAMPLES
ACTCSS46.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover {
background-color: #111;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
ACTIVE/CURRENT NAVIGATION LINK
ACTCSS47.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
BORDER DIVIDERS
ACTCSS48.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
</body>
FIXED NAVIGATION BAR
ACTCSS49.html
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>


<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
STICKY NAVBAR
ACTCSS50.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll
position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support
sticky positioning. Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>
<p>Some text to enable scrolling.</p>

</body>
</html>
END

You might also like