Scribd
Upload
16 views

CSS Example

Uploaded by

Pharoah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

CSS Example

Uploaded by

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

CSS Example

Areas for accessibility and manipulation include:


 Navigation of the structure of a document.
 Manipulation of a web page including the tags and
attributes.
 Manipulation of the content in a web page.
 Monitoring and responding to events that may
occur due to visitor action.
 Ability to gather information about website
visitors.
 Give users capabilities to manipulate what they
see.
 Style sheets describe how documents are
presented on screens or in print.
 A style sheet language offers a powerful and
manageable way for Web authors to handle
special presentation needs by creating the visual
effects they want.
 They give you a great number of formatting
options and you can apply changes to your web
pages from a central location.
 Style sheets help separate the content from the
formatting.
Cascading Style Sheets (CSS)

 HTML is more concerned about the content,


CSS is used to impose a particular style on
the document.
 Named cascading style sheets because they
can be defined at three different levels to
specify the style of a document.
– Inline, document level, external.
CSS Syntax Definition Example
(HTML) element that identify this
Selector h1, body, p, div
style
font-variant, font-
Property Describes the selector
color

Value Value used to define the property 10pts, purple, 85%


 Morethan one property may appear between
the curved brackets; however you must
separate the properties using a semicolon ( ;
).

blockquote {
background: ffff00;
color: black;
}
You can group HTML Selectors together:
h2, h3, h4, h5, h6 {
font-family: "Arial", "sans-
serif";
font-style: italic;
font-size: large;
}
Style Type Placement Affected How?

Inline As part of an HTML tag placed in The specific tag the style is
aka: Local Style between the <body> tags attached to in that occurrence.

Embedded As part of a style placed in All occurrences of that tag in that


aka: Document-Wide Style between <head> tags specific document only.

Can be linked to any HTML


Linked As part of a style created in a
document affecting the tags in
aka: External Style Sheet separate text file (.CSS)
that HTML document
 Startwith a normal HTML web-page without any
stylesheets applied, to give the following output:
<html>
<head> </head>
<body>
<h1 style="color:blue;"> Hello Stylesheets!!!</h1>

<p style = "background-color:blue">


Two roads diverged in a yellow wood, <br/>
And sorry I could not travel both <br/>
And be one traveler, long I stood <br/>
And looked down one as far as I could <br/>
To where it bent in the undergrowth; <br/>

</p>
<p>
Then took the other, as just as fair, <br/>
and having perhaps the better claim <br/>
because it was grassy and wanted wear; <br/>
though as for that, the passing there <br/>
had worn them really about the same, <br/>
</p>
Poem by:
Robert Frost
</body>
</html>
 Suppose we add 2 paragraphs, whose styles are not
defined in any way:
 Letsadd a generic style for the <p> tag. This is the
result:

 Resultdemonstrates the
Order of priority.
<html>
<head>
<style>
p
{
background-color:yellow;
}
</style>
</head>
<body>
 Lets take the styles defined in the heading out into
an external sheet called styles.css

 What does the code look like?

a) styles.css:
p{
background-color:yellow;
}
b) head:
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
 To open a comment, use: /*
 To close a comment, use */
 Wherever possible, place your styles in external
style sheets
 Take advantage of the power of CSS to have
control over an entire Web site
 You can create classes of styles that will create
different effects for the HTML tag it is associated
with.
 They can be applied to any HTML tag and can be
named anything you want.
 The class name always begins with a period ( . ).
 It is a good idea to keep the class name simple and
descriptive, based on how you will use the class in
your document.
 There are two types of classes that you can
create:
a) Independent
b) Dependent
 Can be used with any HTML tag.
 As in the example below, you can see that the class,
“.supersize” is independent and can be used with
any HTML tag.

 a) A class defined: .supersize {font-size: 72pt;}


 b) Used in an HTML tag: <big class=
“supersize”>text</big>
 Can only be used with a particular HTML tag.
 As in this example below, you can see that the
class “urgent” is associated with the BOLD tag and thus
dependent on it.

a) A class defined: b.urgent {font-style: underline;


font-size: 20pt;}
b) Used in an HTML tag: <b class=
“urgent”>text</b>

 You can also control the images that are displayed in


your site from a central point with Style Sheets.
 To do this, you will use another of the Classification
Properties.
<html> Then took the other, as just as fair, <br/>
<head> and having perhaps the better claim <br/>
<title>Poem: Robert Frost</title> because it was grassy and wanted wear;
<br/>
<style>
though as for that, the passing there <br/>
h1 {color: blue;} /* Type selector*/
had worn them really about the same,</p>
.underline {text-decoration: underline;} /*class
selector*/ </div>
.italic {font-style: italic; <div><p>And both that morning equally lay<br/>
font-weight: bold;} in leaves no feet had trodden black.<br/>
p.backcolor Oh, I kept the first for another day! <br/>
{ background-color: background; } Yet knowing how way leads on to way,<br/>
</style> I doubted if I should ever come back.</p></div>
</head> <div>

<body align="center"> <p>I shall be telling this with a sigh <br/>


<h1>The Road Not Taken</h1> Somewhere ages and ages hence: <br/>
<p class="underline"> Two roads diverged in a wood, and I -<br/>
Two roads diverged in a yellow wood <br/> I took the one less travelled by, <br/>
and sorry I could not travel both <br/> and that has made all the difference</p> <br/>
And be one traveller, long I stood <br/> </div>
and looked down one as far as I could <br/> </body>
to where it bent in the undergrowth;</p> </html>

<div class="italic">
<p class="backcolor">
<html>
<head>
<style type="text/css">
p { color: green;} /* this is a type selector */
p.warning {font-size: 16pt; color: blue; }
.myclass { color: red;}
</style>
</head>
<body>
<h1 class='myclass' >The header has now a red color</h1>
<p>This paragraph has no class selector, but a type selector</p>
<div class='myclass'>
Text inside the div tag is red.
<p class='warning'>paragraph inside div element is now blue and 16 pt.</p>
</div>
</body>
</html>
 In one instance of the <p> tag, we use the independent
class named “underline”, and in the other, we use the
dependent class named “noindent”
<html> } <p>Creating web pages for a living is a great outlet for
those with creative talents. </p>
<head> .fish2 {
<p>The pay isn't so bad either! </p>
<title>About Our Company</title> list-style-image: url(fish2.gif);
<style> }
<h2>My Hobbies</h2>
<!-- p.noindent {
<ol>
h1 { text-indent: 0%;
<li>I like to Fish</li>
color: blue; }
<ul>
} .green {
<li>Salmon</li>
p { color: green;
<li>Muramba</li>
color: red; }
</ul>
background: aqua; .underline{
<li>I like to Fish</li>
text-indent: 30px; text-decoration: underline;
<ul>
} }
<li class="fish1">Salmon</li>
h2, h3, h4, h5, h6 .normal {
<li class="fish2">Flounder</li>
{ font-style: normal;
</ul>
font-family: "Arial", "Sans-Serif"; }
<li>I like to cook. Check out this great cooking site.
font-style: italic; .italic {
</li>
font-size: large; font-style: italic;
<a href="http://www.outlawcook.com/">Simple
color: green font-weight: bold; Cooking</a>

} } </ol>

body { //--> <p class="underline">I also like to hike through the


woods.<br />
background-color: #c0c0c0; </style>
<a
} </head> href="http://www.halcyon.com/gpadden/hike.htm
body { l">Check out this great site about hiking</a>

font-family: "Comic Sans MS", "Technical", <body> </p>


"Times New Roman"; <p class="noindent">Additionally, I enjoy a good game of
} chess.</p>
<div align= "center">
ul li {
<h1>My Home Page</h1>
list-style-type: square; </body>
<h2>Personal and Work Profile</h2>
} </html>
<h3>First, My work life</h3>
.fish1 {
</div>
list-style-image: url(fish1.gif);
 Looks and acts exactly like the class selector.
 The difference is that you use a hash mark at the
beginning, to declare it, rather than a period:
#title01 { color: green; }
 To apply the ID (and thus its styles) to an HTML
tag, add the ID attribute to the tag with the
name of the ID you want to apply:
 <div id=“title01”>Chapter I...</div>
 Similar to the class selector, you do not add the
hash mark with the ID name when it’s in the
HTML tag.
 The hash mark is only included when you are
setting up the ID rule.
 Identifying major page sections (for example,
header, content, footer)
 Identifying unique content or modules (for
example, search, navigation, ad)
 Identifying an element to be used with
Javascript.
<html> <p>
<head> <b>Now this is an example of an external style
<link href="CSSExample.css" rel="stylesheet" sheet</b>
type="text/css"> </p>
<style type="text/css"> <br/><br/>

h2 {font-family: sans-serif; color: purple} <p>


body { background- <h1 style= "color:orange; font-family: sans-
image:url("pattern.png"); sarif">This is an in-line style sheet</h1>
background-repeat:no-repeat; </p>
background-position:top;
} <br/><br/>

</style> <p>
<h2> And finally, an embedded style sheet</h2>
</head> </p>

<body> </body>

<h1> Welcome to style </h1>


1. Putting a gradient color at the background.
Syntax:
background : linear – gradient(direction, color-stop1, color-stop2, ….)
background : linear – gradient(angle, color-stop1, color-stop2)
background : repeating- linear – gradient(red, yellow 10%, green 20%)
1. Putting a border around text
2. Inserting a margin and padding
3. Inserting an image
<html> </style>
<head>
<link href="CSSExample.css" rel="stylesheet" </head>
type="text/css">
<style type="text/css"> <body>

h2 {font-family: sans-serif; color: purple} <h1> Welcome to style </h1>


body { background-image:url("Letters.png");
background-repeat:no-repeat; <p>
background-position:top right; <b>Now this is an example of an external style
sheet</b>
background-color:; </p><br/><br/>
background:linear-gradient(to
right,#C8C8C8,blue ); <img src="Letters.png">
paddding:500px;
margin-left:100px; <p>
margin-top:50px; <h1 style= "color:orange; font-family: sans-sarif">This is
margin-right:100px; an in-line style sheet</h1></p><br/><br/>
padding-top:10px; <p>
padding-left:10px <h2> And finally, an embedded style sheet</h2>
} </p>
h3 { border-style:solid;
border-color:#F8F8F8} <h3>What about a layer 3 heading??</h3>
img { size: 100px 100px;
position:absolute; </body>
left:500px; </html>
top:0px;
z-index:-1;}
 The next example demonstrates the following CSS
styles:

 Vertical menu
 Adding image hyperlinks
 Putting span elements
 Positioning a paragraph on the page
 Adding a background color to a paragraph
<html> font-weight: normal; </div>

<style> width: 120px; <div class="img">

ul margin: 5px; <a target="_blank" href="klematis2_big.htm"><img src="chat.png" alt="Klematis" width="110"


height="90"></a>
{ }
<div class="desc">Add a description of the image here</div>
list-style-type:none;
</div>
margin:0; img.home
<div class="img">
padding:0; {
<a target="_blank" href="klematis3_big.htm"><img src="pig.ico" alt="Klematis" width="110"
} width:46px; height="90"></a>

a:link,a:visited height:44px; <div class="desc">Add a description of the image here</div>

{ background:url(img_navsprites.gif) 0 0; </div>

display:block; } <div class="img">

font-weight:bold; img.next <a target="_blank" href="klematis4_big.htm"><img src="cake(1).ico" alt="Klematis" width="110"


height="90"></a>
color:#FFFFFF; {
<div class="desc">Add a description of the image here</div>
background-color:#98bf21; width:43px;
</div>
width:120px; height:44px;
<p>
text-align:center; background:url(img_navsprites.gif) -91px 0;
<span>T</span>his is some text.
padding:4px; }
This is some text. This is some text.
text-decoration:none; span
This is some text. This is some text. This is some text.
text-transform:uppercase; {
This is some text. This is some text. This is some text.
} float:left;
This is some text. This is some text. This is some text.
a:hover,a:active width:0.7em;
This is some text. This is some text. This is some text.
{ font-size:400%;
This is some text. This is some text. This is some text.
background-color:#7A991A; font-family:algerian,courier;
This is some text. This is some text. This is some text.
} line-height:80%;
</p>
div.img }
<p>
{ .right
In the paragraph above, the first letter of the text is embedded in a span element.
margin: 5px; {
The span element has a width that is 0.7 times the size of the current font.
padding: 5px; position:absolute;
The font-size of the span element is 400% (quite large) and the line-height is 80%.
border: 1px solid #0000ff; right:0px;
The font of the letter in the span will be in "Algerian".
height: auto; width:300px;
</p>
width: auto; background-color:#b0e0e6;
<img class="home" src="cake.png">
float: left; }
<br><br>
text-align: center; </style>
<img class="next" src="pig.ico">
} </head>

div.img img <body>


<div class="right">
{ <ul>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning
display: inline; <li><a href="#home">Home</a></li> over in my mind ever since.</p>

margin: 5px; <li><a href="#news">News</a></li> <p>'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>
border: 1px solid #ffffff; <li><a href="#contact">Contact</a></li>
</div>
} <li><a href="#about">About</a></li>
</body>
div.img a:hover img {border: 1px solid #0000ff;} </ul>
</html>
div.desc <div class="img">

{ <a target="_blank" href="klematis_big.htm"><img src="cake.png" alt="Klematis" width="110"


height="90"></a>
text-align: center;
<div class="desc">Add a description of the image here</div>
<!DOCTYPE html> padding:4px;
<html> text-decoration:none;
<head> text-transform:uppercase;
<style> }
ul a:hover,a:active
{ {
list-style-type:none; background-color:#7A991A;
margin:0; }
padding:0;
overflow:hidden; </style>
} </head>
li
{ <body>
float:left; <ul>
} <li><a href="#Home">Home</a></li>
a:link,a:visited <li><a href="#News">Poems</a></li>
{ <li><a href="#Contact">Gallery</a></li>
display:block; <li><a href="#Contact">Contact Us</a></li>
width:120px; <li><a href="#About">About</a></li>
font-weight:bold; </ul>
color:#FFFFFF; </body>
background-color:#98bf21; </html>
text-align:center;
HTML
<html> city in the United Kingdom,
<body> with a metropolitan area of over 13
million inhabitants.
<div id="header"> </p>
<h1>City Gallery</h1> <p>
</div> Standing on the River Thames,
London has been a major
<div id="nav"> settlement for two millennia,
London<br> its history going back to its
Paris<br> founding by the Romans, who
Tokyo<br> named it Londinium.
</div> </p>
</div>
<div id="section"> <div id="footer">
<h2>London</h2> </div></body></html>
<p>
London is the capital city of
England. It is the most populous
#header { #section {
background-color:black; width:350px;
color:white; float:left;
text-align:center; padding:10px;
padding:5px; }
} #footer {
#nav { background-color:black;
line-height:30px; color:white;
background-color:#eeeeee; clear:both;
height:300px; text-align:center;
width:100px; padding:5px;
float:left; }
padding:5px;
}
 Create
a web page that has the following layout
dimensions:
 Container : Width = 800px ; Height = 800px
 Header : Height = 150px
 Side bar: Width =120px ; Height=500px
 Main body: Width =680px ; Height=500px
 Footer :Height = 90px
• Download the bootstrap. (getbootstrap.com)
• Extract the zipped folder and name it
bootstrap3.
• Depending on the version, the following
folders may be the folders included in the
bootstrap3 distribution:
– css
– fonts
– Js
• Create an html file inside that bootstrap3
folder and call it index.html, with the code
shown below:
• Run the file. The output should be
similar to what’s shown below:

• Now add the lines of code in the header


as shown below and run the file.
• The output should be as shown below:

• What is the difference?

• What we are effectively doing is to include some


predefined classes, fonts and JavaScript code that
are already made for us.
• The list of other classes that can be found in
bootstrap and their effects is available on-line.
Another example - JavaScript

• Question: Create a web-page that will


display a “modal”

You might also like