Lab 5 & 6 - CSS

LAB 5 & 6 Cascading Style Sheets
Three ways of appliying CSS: As the heading says, there are three ways of applying CSS.
1. Inline
2. Internal
3. External
I don’t want to comment which one is better; it depends on your personal preference.
So you can use any one of them. But gradually, you will be able to figure out, which one
suits your style of coding.
In-line
Exercise 1:
Html Code without CSS Code with CSS
<HTML> <HTML>
<HEAD> <HEAD>
</HEAD>
</HEAD>
<BODY>
<BODY> <p style="color:red"> This is the first
<p > This is the first paragraph of this page, paragraph of this page, and it should
appear in red</p>
and it should appear in red</p>
</BODY> </BODY>
</HTML> </HTML>
Internal
Exercise 2: Starting with easiest one,
Html Code without CSS Code with CSS

<HTML> <HTML>
<HEAD> <HEAD>
<style type="text/css">
p
</HEAD>
{
<BODY> color: red;
<p> This is the first paragraph of this page, }
and it should appear in red</p> </style>
</HEAD>
</BODY> <BODY>
</HTML> <p> This is the first paragraph of this page,
and it should appear in red</p>
</BODY>
</HTML>
Let me explain, what I have done. I associated a “property: value (color: red)” pair with a
HTML Tag. But p inside the <style> block is known as selector, as explained above. This
also means, wherever in my page <p> tag is used, text will appear in red.
External
Exercise 3:
This one is quite different and is most popular among professionals. How it works, Write
the style in a file, and save the file with “.css” extension. Just look at the example below.
We have two files “pstyle.css” and “style_external.html”.
Below is pstyle.css
External CSS Code

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Note:
Using CSS this way is so popular among professionals. The advantage is to define all the
styles in one .css file. Include the css file in every web page of your web site and use
which ever style you want to use.
Exercise 4: CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element
name, id and class.
The element Selector

The element selector selects elements based on the element name. You can select all
<p> elements on a page like this (in this case, all <p> elements will be center-aligned,
with a red text color):
Example:
<!DOCTYPE>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
Selector Class
With Class Selector, you can define different type of ‘styles’ for the same ‘selector’. Say,
that you want to have two types of paragraphs in your document, one paragraph is left
aligned and another paragraph is right aligned. Here is how you can do this
<HTML>
<HEAD>
p.class1
{
text-align:left;
}
p.class2
{
text-align:right;
}
</style>
</HEAD>
<BODY>
<p class="class1">This is first paragraph, Is the test left aligned</p>
<p class="class2">This is second paragraph, Is the test right aligned</p>
</BODY>
</HTML>
Just Define the Class

Q. Is it possible to just define the class (no selector), and use it with the HTML tags
Ans. Yes
Q. How is it possible?
A) Simply defines the class as you used to define in “Selector Class”, but leave the
selector out, like this.
.center
{
text-align=center
}
In <body> section,
<h1 class=”center”> It looks good in the center</h1>
<p class=”center”> This paragraph is center aligned</p>
Let us write an example to understand above concept.

<HTML>
<HEAD>
.center
{
text-align:center;
background:green;
}
</style>
</HEAD>
<BODY>
<h1 class="center"> This is h1 tag in center </h1>
<p class="center"> This paragraph is center aligned</p>
</BODY>
</HTML>
And the output is as follows
This is h1 tag in center
This paragraph is center aligned
Exercise 5:
Like Class Selector, there is one more Selector, ID Selector. It is very much similar to
Class Selector with a slight difference, even syntax is almost same.
h1#myheader
{
Background: green
}
So, you got the difference, the difference is, “#” instead of “.” And now, “myheader” is
known as ID.
Take an example
<HTML>
<HEAD>
h1#myheader
{
color: blue;
background: green
}
</style>
</HEAD>
<BODY>
<h1 id="myheader"> This is h1 header </h1>
</BODY>
</HTML>
The output is
This is h1 header
Exercise 5: Grouping Selectors
If you have elements with the same style definitions, like this:
h1 { text-align:center;
color: red;
}
h2 { text-align: center;
color: red;
}
p { text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group selectors,
separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
h1, h2, p { text-align: center;

color: red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at
a later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p { color: red;
/* This is a single-line comment */
text-align: center; }
/* This is a multi-line comment */ L
Cascading Order
What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which means
that it will override a style defined inside the <head> tag, or in an external style sheet, or
a browser default value.
Exercise 5: CSS Properties:
Text Properties:
 color: blue;
 text-align: center/left/rigth/justify;
 text-decoration: overline/line-through/underline;
 text-transform: uppercase/lowercase/capitalize;
 text-indent: 10px/-10px;
 letter-spacing: 5px/-5px;
 line-height: 0.8;
 direction: rtl;
 word-spacing: 10px;
 text-shadow: 3px 2px red;
Exercise: Coding for All Text Properties:
<html>
<head>
p.color {
color: blue;
}
p.align {
text-align: right;
}
p.decoration {
text-decoration: line-through;
}
p.indent {
text-indent: 50px;
}
p.lspace {
letter-spacing: 5px;
}
p.shadow {
text-shadow: 3px 2px red;
}
p.height {
line-height: 5.5;
}
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="color">This is some text in blue color.</p>
<p class="align">This is some text aligned right.</p>
<p class="decoration">This is some text line through</p>
<p class="indent">This is some text with 50px indent</p>
<p class="lspace">This is some text with line spacing</p>
<p class="shadow">This is some shadow text</p>
<p class="height">This is some text with line height</p>
<p class="uppercase">This is some uppercase text.</p>
<p class="lowercase">This is some lowercase text.</p>
<p class="capitalize">This is some capitalized text.</p>
</body>
</html>
Exercise 6:
Font Properties:
1. font-family: arial;
2. font-style: normal/italic/oblique;
3. font-size: 30px;
4. font-weight: normal/bold;
5. font-variant: normal/small-caps;
Try this all Font Properties:
<!DOCTYPE >
<html>
<head>
<style>
p.fmly {
font-family: arial;
}
p.fmly1 {
font-family: symbol;
}
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="fmly">This is a paragraph</p>
<p class="fmly1">This is a paragraph</p>
<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>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
<p class="normal">this is normal text</p>
<p class="small">Capitalised Small text.</p>
</body>
</html>
Exercise 7: The Box Model
Margin, padding and border, they all work together. In the center you have the element,
surrounding it is padding, and surrounding padding is margin box. Margin box is
surrounded by border box.
Let us see how to use borders.
The various attributes are;
1. border-style, the possible values are solid, dashed, dotted, double, groove, ridge,
inset and outset.
2. border-width, the width of the border, it can be in em, %, etc
3. border-top-width, border-bottom-width, border-left-width, border-right-width.
<HTML>
<HEAD>
h2 {
border-style: solid;
border-width: 3px;
border-left-width: 20px;
border-right-width: 10px;
border-top-width: 50px;
border-bottom-width:100px;
border-color: red;
}
</style>
</HEAD>
<BODY>
<h2> Hey margin is 5em, and <br> padding is 10em</h2>
</BODY>
</HTML>
Exercise 7 (Part 2):

<!DOCTYPE >
<html>
<head>
<style>
p.one {
border-color: red;
margin: 10px 100px 10px 10px;
}
p.two {
border-color: green;
}
p.three {
border-color: red green blue yellow;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
</body>
</html>
Exercise 8: Background Properties:
 background-color: red;
 background-image: url("image_path");
 background-repeat: repeat-x/repeat-y/round/no-repeat;
 background-attachment: fixed/scroll/local;
 background-size: 20px 30px;
 background-position: right top/right bottom/left top/left bottom;
 or 30px 20px;
Margin Properties:
 margin-top: 100px;
 margin-bottom: 100px;
 margin-right: 150px;
 margin-left: 80px;
Link Properties:
 a:link - unvisited link
 a:hover – when mouse is on it
 a:active – when mouse click on it
 a:visited – after mouse clicked
Example:
<!DOCTYPE >
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* mouse over link */
a:hover {
color: green;
text-decoration:none;
}
/* selected link */
a:active {
color: blue;
}
/* visited link */
a:visited {
color: brown;
}
</style>
</head>
<body>
<a href="text_css.html" target="_blank">This is a link</a>
</body>
</html>
Exercise 8: Layouts:
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a section

<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
Try Out:
<!DOCTYPE>
<html>
<head>
<style>
body {
height: 100%;
}
div.container {
width:100%;
border: 1px solid red;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
}
nav {
float: left;
max-width: 10px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>LBRCE, Mylavaram</h1>
</header>
<nav>
<ul>
<li><a href="layout.html" target="blank">CSE</a></li>
<li><a href="#">ECE</a></li>
<li><a href="#">EEE</a></li>
</ul>
</nav>
<article id="content">
<h1>CSE</h1>
<p>welcome to cse dept.</p>
<p>this is located at block1
</p>
</article>
<footer>Copyright © CSE solutions</footer>
</div>
</body>
</html>
Output:
Exercise 9: More Border Properties
Let us take an example.
<HTML>
<HEAD>
body
{
color: yellow;
background-color:black;
font-family: "Times New Roman";
font-size: 14;
}
a
{
font-family: "Arial";
text-transform:uppercase;
font-size: 20;
}
</style>
</HEAD>
<BODY>
The back ground of this page is black and text color is yellow <br>
My name is <a> Harshit </a>
</BODY>
</HTML>
Exercise 10:
 The attribute “letter-spacing” is used for spacing between letters. The value of
the attribute is length in %, or em, or pt.
 The attribute “word-spacing” is used for spacing between words. The value of
the attribute is length in %, or em, or pt.
 The attribute “text-align” is used for aligning the text. The possible value for the
attribute are center, left, right, justify.
 The attribute “line-height” sets the height of the lines in a paragraph.
<HTML>
<HEAD>
body
{
color: yellow;
background-color:black;
font-family: "Times New Roman";
font-size: 14;
}
a
{
font-family: "Arial";
text-transform: uppercase;
font-size: 20;
}
p
{
letter-spacing: 0.3em;
word-spacing: 2em;
line-height: 1.5em;
text-align: left;
}
</style>
</HEAD>
<BODY>
The back ground of this page is black and text color is yellow <br>
My name is <a> Ahmed </a>
<p>
This is my first paragraph, <br> trying to notice How much is <br>letter
spacing which is 0.5 em <br> word spacing 2m<br>line height 1.5em <br>text
alignment, you tell me
</p>
</BODY>
</HTML>
Exercise 11:
Margins and Padding
A margin is the space outside of the element.

Padding is the space inside the element.
<HTML>
<HEAD>
h2
{
font-size: 1.5em;
background-color: pink;
margin: 5em;
padding: 10em;
}
</style>
</HEAD>
<BODY>
<h2> Hey margin is 5em, and <br> padding is 10em</h2>
</BODY>
</HTML>
In the output, the distance between the text and where the pink box end, is the
padding.
The distance between any boundaries of the browser to the point where the pink box
starts.

Lab 5 & 6 - CSS

Uploaded by

Copyright:

Available Formats

Lab 5 & 6 - CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 5 & 6 - CSS

Uploaded by

Copyright:

Available Formats

LAB 5 & 6 Cascading Style Sheets

Html Code without CSS Code with CSS

External CSS Code

The element Selector

Just Define the Class

Let us write an example to understand above concept.

This is h1 tag in center

This paragraph is center aligned

Exercise 5: Grouping Selectors

h1, h2, p { text-align: center;

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)

Exercise 5: CSS Properties:

Try this all Font Properties:

The various attributes are;

2. border-width, the width of the border, it can be in em, %, etc

3. border-top-width, border-bottom-width, border-left-width, border-right-width.

Exercise 7 (Part 2):

<p>This property specifies the color of the four borders:</p>

Exercise 8: Background Properties:

Websites often display content in multiple columns (like a magazine or newspaper).

<header> - Defines a header for a document or a section

<footer>Copyright &copy; CSE solutions</footer>

Margins and Padding

A margin is the space outside of the element.

You might also like

<footer>Copyright © CSE solutions</footer>