Scribd
Upload
16 views

IG-CSS Notes

Uploaded by

Kaung Si Thu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

IG-CSS Notes

Uploaded by

Kaung Si Thu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

WHAT IS CSS?

 CSS stands for Cascading Style Sheets


 CSS is a language that describes the style of an HTML document.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Text Color {color name, Hex value, RGB and


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)"
Eg:
body {
color: cray;
}

h1 { color:red ;}
h2 { color:rgb(112,128,144);}
p {rgba(179,179,179,.7); } /* a means opacity eg: black with
lightness of 70% */

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}

h1 { color: green;}
h2 { color:rgb(112,128,144);}
p {rgba(179,179,179,.7); }
</style>
</head>

<body>
<h1> This is heading 1 </h1>
<h2>This is heading 2</h2>
<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>

1
Text Alignment {left, right and center}
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.

Eg:
<!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>
</body>
</html>

Text Decoration {overline,underline and strikethrough}


The text-decoration property is used to set or remove decorations from text. The value text-
decoration: none; is often used to remove underlines from links:
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;}
h3 {
text-decoration: underline;
}
</style>
2
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

Text Transformation {uppercase, lowercase and capitalize}


The text-transform property is used to specify uppercase and lowercase letters in a text.

Eg:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize; {This Is Some Text.}

}
</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>

Font Variant {small-caps}


The font-variant property specifies whether or not a text should be displayed in a small-caps
font.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>

p.normal {
font-variant: normal;
3
}

p.small {
font-variant: small-caps; / MY NAME IS HEGE REFSNES./
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>

Text Indentation {Tab}


The text-indent property is used to specify the indentation of the first line of a text:
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel
like criticizing anyone,' he told me, 'just remember that all the people
in this world haven't had the advantages that you've had.'</p>
</body>
</html>

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

4
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

Line Height
The line-height property is used to specify the space between lines: /* line spacing */
Eg:
<!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>
</body>
</html>

Word Spacing
The word-spacing property is used to specify the space between the words in a text.
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

5
<!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>

Font Family
The font family of a text is set with the font-family property.
p {
font-family: "Times New Roman";
}

Text Shadow
The text-shadow property adds shadow to text.
h1 {
text-shadow: 3px 2px red;
}

<!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>
6
</html>

Vertical Align
Set the vertical align of an image in a text.
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}

img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>

<p>An <img src="DSCN2643.jpg" alt="W3Schools" width="270" height="50">


image with a default alignment.</p><br>

<p>An <img class="top" src="DSCN2643.jpg" alt="W3Schools" width="270"


height="50"> image with a text-top alignment.</p><br>
<p>An <img class="bottom" src="DSCN2643.jpg" alt="W3Schools" width="270"
height="50"> image with a text-bottom alignment.</p>

</body>
</html>

Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

7
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique; }
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>

Set Font Size With Em


To allow users to resize the text (in the browser menu), many developers use em instead of
pixels. 1em is equal to the current font size. The default text size in browsers is 16px. So, the
default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

Eg:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */

In the example above, the text size in em is the same as the previous example in pixels.
However, with the em size, it is possible to adjust the text size in all browsers.

8
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize
the text.Unfortunately, there is still a problem with older versions of
IE. When resizing the text, it becomes larger/smaller than it
should.</p>
</body>
</html>

Use a Combination of Percent and Em


The solution that works in all browsers, is to set a default font-size in percent for the
<body> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {

9
font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in
all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Link states
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

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
10
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Text Decoration
The text-decoration property is mostly used to remove underlines from links:

<!DOCTYPE html>
<html>
<head>
<style>

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Background Color
The background-color property can be used to specify a background color for links:
background-image: linear-gradient(red, yellow, green);
background: url("C:/Users/User/Desktop/CSS/CSS image/flower.jpg");
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}

11
a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Advanced - Link Buttons


This example demonstrates a more advanced example where we combine several CSS
properties to display links as boxes/buttons:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>

<body>

<h2>Link Button</h2>
<a href="default.asp" target="_blank">This is a link Button</a>

</body> </html>

12
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link
changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link
changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link
changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link
changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link
changes text-decoration</a></b></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
13
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Mouse over the words to change the cursor.</p>


<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br> </body></html>

Different List Item Markers


The list-style-type property specifies the type of list item marker.

<!DOCTYPE html>
<html>
<head>
<style>

14
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol> </body> </html>

15
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Styling List With Colors


We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag
will affect the individual list items:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;}
ul li {
background: #cce5ff;
margin: 5px;
}
</style>

16
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Table Borders
To specify table borders in CSS, use the border property.
border: 4px dotted blue;
border: 5px solid red;
border: double;

Table border width


 border-width: thin medium thick 10px;
o top border is thin
o right border is medium
o bottom border is thick
o left border is 10px

 border-width: thin medium thick;


o top border is thin
o right and left borders are medium
o bottom border is thick

 border-width: thin medium;


o top and bottom borders are thin
o right and left borders are medium

 border-width: thin;
o all four borders are thin

Border Style Examples:


 border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double

17
o left border is dashed

 border-style: dotted solid double;


o top border is dotted
o right and left borders are solid
o bottom border is double

 border-style: dotted solid;


o top and bottom borders are dotted
o right and left borders are solid

 border-style: dotted;
o all four borders are dotted

Border Color
If the border-color property has four values:
 border-color: red green blue pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink

If the border-color property has three values:


 border-color: red green blue;
o top border is red
o right and left borders are green
o bottom border is blue
If the border-color property has two values:
 border-color: red green;
o top and bottom borders are red
o right and left borders are green
If the border-color property has one value:
 border-color: red;
o all four borders are red

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>

18
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>

Collapse Table Borders


The border-collapse property sets whether the table borders should be collapsed into a single
border:
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

If you only want a border around the table, only specify the border property for <table>:

table {
border-collapse: collapse;
border: 1px solid black;
}

Table Padding
To control the space between the border and the content in a table, use the padding property
on <td> and <th> elements:

th, td {
padding: 15px;
text-align: left;
}

Hoverable Table
19
Use the :hover selector on <tr> to highlight table rows on mouse over:
tr:hover {background-color:#f5f5f5;}

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd)
table rows:

tr:nth-child(even) {background-color: #f2f2f2;}

Table heading Color


The example below specifies the background color and text color of <th> elements:

th {
background-color: #4CAF50;
color: white;
}

Table with all styles:

<!DOCTYPE html> </* id style*/


<html>
<head>
<style>
#customers {
font-family: Arial;
border-collapse: collapse;
width: 100%;
}

#customers td, #customers th {


border: 1px solid #ddd;
padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}


#customers tr:hover {background-color: #ddd;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>

20
<body>
<table id="customers">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Rounded Images
21
Use the border-radius property to create rounded images:
img {
border-radius: 8px; /*rounded corner*/
}

img {
border-radius: 50%; /*circle*/
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>

<img src="paris.jpg" alt="Paris" width="300" height="300">

</body>
</html>

Thumbnail Images
Use the border property to create thumbnail images.

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

<img src="paris.jpg" alt="Paris">

Example: /*Thumbnail Image:*/


<!DOCTYPE html>
<html>
<head>
<style>

img {

22
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>

<h2>Thumbnail Images</h2>
<p>Use the border property to create thumbnail images:</p>

<img src="paris.jpg" alt="Paris" style="width:150px">

</body>
</html>

<!DOCTYPE html> /*Thumbnail Image as link:*/


<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
/* h-offset v-offset blur/spread
color insert*/
}
</style>
</head>
<body>

<h2>Thumbnail Image as Link</h2>


<p>Use the border property to create thumbnail images. Wrap an anchor
around the image to use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">


<img src="paris.jpg" alt="Paris" style="width:150px">
</a>

</body>
</html>

23
<html> //*background image*//
<head>
<style>
.background {
background: url("D:/IIP/IGCSE/HTML exe/flower.jpeg") repeat;
border: 2px solid black;
}

.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

p {
margin:5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

24

You might also like