Web Design Course: CSS lecture 3

Web Programming and
Design
CSS (Cascading Style Sheet)
By: Gheyath M. Othman

CSS Font
2
CSS font properties define the font family, boldness, size, and the style of a text.
Property values Description
font use all property together Sets all the font properties in one
declaration
font-family “Times new roman”, Calibri, … Specifies the font family for text
font-size Pixel, em, percent ( 1em= 16px ) Specifies the font size of text.
font-style Normal, italic, oblique Specifies the font style for text
font-variant Normal, small-caps Specifies whether or not a text should be
displayed in a small-caps font
font-weight Normal, bold, length Specifies the weight of a font
CSS Font Properties e6_font-properties>>
Note: The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font. If the name of a font family is more
than one word, it must be in quotation marks, like: "Times New Roman".

CSS Font
3
Font example: e6_font-properties>>
<!DOCTYPE html><html><head>
<style>
p.Family { font-family: Monospace,"Times New Roman";}
p.thick { font-weight: bold; }
p.italic { font-style: italic; }
p.size { font-size: 25px; }
p.var { font-variant: small-caps; }
</style>
</head>
<body>
<p class="family">This is a paragraph ---font family.</p>
<p>This is a paragraph.</p>
<p class="var">This is a paragraph ---small caps.</p>
<p class="thick">This is a paragraph ---bold.</p>
<p class="italic">This is a paragraph ---italic.</p>
<p class="size">This is a paragraph ---size.</p>
</body></html>

CSS Text
4
color Color Sets the color of text
direction ltr, rtl Specifies the text direction/writing direction
letter-spacing Normal, length Increases or decreases the space between
characters in a text
line-height Normal, Number, length, % Sets the line height
text-align Left, right, center, justify Specifies the horizontal alignment of text
text-decoration None, underline, overline
line-through
Specifies the decoration added to text
CSS Text Properties:
CSS text properties used to manipulate text.

CSS Text
5
text-indent Length, % Specifies the indentation of the first line in a text-
block
text-shadow None, color, length Specifies the shadow effect added to text
text-transform None, capitalize, uppercase,
lowercase
Controls the capitalization of text
vertical-align Top, middle, bottom, length,
sub, super, …
Sets the vertical alignment of an element
white-space Normal, pre, nowrap Specifies how white-space inside an element is
handled
word-spacing length Increases or decreases the space between words in
a text

6
Text example:
<!DOCTYPE html><html><head><style>
p.co{color:red}
div.one { direction: ltr}
p.letter{ letter-spacing: 10px}
p.big { line-height: 400%}
p.align { text-align: left}
p.deco { text-decoration: underline}
p.indent { text-indent: 1cm}
p.shadow { text-shadow: 3px 3px #FF0000; }
p.uppercase {text-transform: uppercase}
.super { vertical-align: super; }
p.pre { white-space: pre }
p.word { word-spacing: 30px}
</style></head> <body>
<p class="co">Text color</p>
<div class="one"> from left to right </div>
<p class="letter">Letter spacing</p>
<p class="big">line height</p>
<p class="align">text align</p>
<p class="deco">text decoration</p>
<p class="indent"> text indent</p>
<p class="shadow"> text shadow</p>
<p class="uppercase">uppercase text</p>
<p>X<span class="super"/>2</span></p>
<p class="pre">white space handling </p>
<p class="word">word spacing</p> </body></html>
Text_all>>

CSS Links
7
• Links can be styled in different ways.
• Links can be styled with any CSS property (e.g.color, font-family, background, etc)
a {
color: #FF0000;
}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
•a:link - a normal, unvisited link
•a:visited - a link the user has visited
•a:hover - a link when the user mouses over it
•a:active - a link the moment it is clicked
e1_a-links>>
a:link {color: #FF0000;}
a:visited {color: red;}
a:hover {color: blue;}
a:active {color: #CCEECC;}

CSS Borders
8
• The CSS border properties allow you to specify the style, size, and color of an
element's border.
• In HTML we use tables to create borders around a text, but with the CSS border
properties we can create borders with nice effects, and it can be applied to any
element.
• The border property is a shorthand for the following properties:
✓ border-width
✓ border-style (required)
✓ border-color
p {
border: 5px solid red;
}
width
style
Color
NOTE: border-style must be used if you want to use CSS border effect.

CSS Borders
9
All CSS Border properties:
Property Description values
border Sets all the border properties in one
declaration
Border-width , border-style, border-
color
border-width Sets the width of the four borders Thin, medium, thick, length
border-style Sets the style of the four borders None, hidden, dotted, dashed, solid
Double, groove, ridge, inset, outset
border-color Sets the color of the four borders color name, hexa, rgb
border-bottom Sets all the bottom border properties
in one declaration
Border-bottom-color, border-bottom-
style, border-bottom-width
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-left Sets all the left border properties in
one declaration
Border-left-color, border-left-style,
border-left-width
border-left-color Sets the color of the left border

Property Description Values
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties
in one declaration
Border-right-color, border-right-style,
border-right-width
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-top Sets all the top border properties
in one declaration
Border-top-color, border-top-style,
border-top-width
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
CSS Borders
10
All CSS Border properties:

CSS Borders Examples
11
Example -1/ border-width:
<style>
p.one { border-style: solid;
border-width: 25px;
}
p.two { border-style: solid;
border-width: medium;
}
p.three { border-style: solid;
border-width: thick;
}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
</body></html>
border-width

12
Example -2/ border-style:
<!DOCTYPE html><html><head><style>
p.none {border-style: none;}
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.hidden {border-style: hidden;}
</style></head><body>
<p class="none">No border.</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="hidden">A hidden border.</p>
</body></html>
border-style

13
Example -3/ border-color:
<style>
p.one { border-style: solid;
border-color: #0000ff;
}
p.two { border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three { border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four { border-style: solid;
border-color: #ff0000 #00ff00 blue
rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body></html>
NOTE: four colors start from: Top right bottom left
border-color

CSS3 border-radius
14
border-radius property values
Also you can use different values for each corner
The border-radius property is a shorthand property for setting the four border-*-
radius properties. which are:
1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
border-radius: 25px;
1
4 3
2
border-radius: 25px 10px 15px 0px;

border-radius example
15
<style>
div{ text-align:center;
width:350px;
height:35px;}
div.all { border: 2px solid #a1a1a1;
border-radius: 25px; }
div.tl { border: 2px solid #a1a1a1;
border-top-left-radius: 25px; }
div.tr { border: 2px solid #a1a1a1;
border-top-right-radius: 25px; }
div.bl{ border: 2px solid #a1a1a1;
border-bottom-left-radius: 25px; }
div.br { border: 2px solid #a1a1a1;
border-bottom-right-radius: 25px; }
</style>
</head><body>
<div class=‘all’>all corners will be affected </div><br>
<div class=‘tl’>top left corner will be affected </div><br>
<div class=‘tr’>top right corner will be affected </div><br>
<div class=‘bl’>bottom left corner will be affected </div><br>
<div class=‘br’>bottom right corner will be affected </div><br>
</body></html>

CSS Outlines
16
• An outline is a line that is drawn around elements (outside the borders) to make
the element "stand out". The outline properties specify the style, color, and
width of an outline.
• The outline is not a part of an element's dimensions; the element's total width
and height is not affected by the width of the outline.
Syntax: outline: outline-color outline-style outline-width;

CSS Outlines
17
All CSS Outline Properties:
Property Description Values
outline Sets all the outline properties
in one declaration
outline-color
outline-style
outline-width
outline-color Sets the color of an outline color_name, hex_number, rgb_number
outline-style Sets the style of an outline None, dotted, dashed, solid, double, groove
ridge, inset, outset
outline-width Sets the width of an outline Thin, medium, thick, length

CSS Outlines
18
Example:outline
<style>
p.out {
outline: #00ff00 groove 15px;
}
p.all{
outline-style: groove;
outline-color: #00ff00;
outline-width: 15px;
}
</style>
</head>
<body>
<p class='out'> IE8 supports the outline
properties if a !DOCTYPE is specified.</p><br>
<p class='all>has the same style like above</p>
</body></html>
outline

CSS3 box-shadow
19
Box-shadow property values
The CSS3 box-shadow property applies shadow to elements.
box-shadow: 25px 10px 15px 10px red inset;
Horizontal shadow Vertical shadow
blur effect (optional) Shadow color (optional)
Spread (optional)
Inner shadow(optional)
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur Optional. The blur distance
spread Optional. The size of shadow. Negative values are allowed
color Optional. The color of the shadow. The default value is black
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

Box-shadow example
20
<style>
div {
width: 300px; height: 100px;
background-color: yellow;
box-shadow: 15px 15px 25px 5px orange;
}
</style>
</head><body>
<div>this is box shadow without inset</div>
</body></html>
<style>
div {
width: 300px; height: 100px;
background-color: yellow;
box-shadow: 15px 15px 25px 5px orange inset;
}
</style>
</head><body>
<div>this is box shadow with inset</div>
</body></html>

Web Design Course: CSS lecture 3

More Related Content

What's hot (20)

Similar to Web Design Course: CSS lecture 3 (20)

Recently uploaded (20)

Web Design Course: CSS lecture 3