Scribd
Upload
46 views

Mass Media Content and Design

CSS allows separation of document content from design and presentation by defining styles that can be reused across multiple web pages. Styles can be defined internally using style tags or externally in separate CSS files to modify properties like fonts, colors, and sizes. External stylesheets allow uniform styling across many pages by linking the CSS file to each HTML document.

Uploaded by

Akash Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
46 views

Mass Media Content and Design

CSS allows separation of document content from design and presentation by defining styles that can be reused across multiple web pages. Styles can be defined internally using style tags or externally in separate CSS files to modify properties like fonts, colors, and sizes. External stylesheets allow uniform styling across many pages by linking the CSS file to each HTML document.

Uploaded by

Akash Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 10

Mass Media Content and Design

CSS (Cascading Style Sheet)

A web page has three components :

Design
Content
Presentation of Content
Logo HeadLab example
(Logo.html) (Header.html)

Navigation Content

(Nav.html) (content.html)

Gallery External links


(gallery.html) (external.html)
Design was defined by:
Simple html Tags
Framesets and frames
Layers etc

Content is created:
MS Office
CMS
Shared

Presentation of content
CSS
CSS
Separates content from presentation

This is an example of dummy content.

An example of a style change would be to make words bold. In


standard HTML you would use the <b> tag like so:

<b>This is an example of dummy content.</b>

//---This works fine and there is nothing wrong with it per se,
except that now if you wanted to, say, change all your text
that you initially made bold to underlined, you would have to
go to every spot in every page and change the tag. --//
Another disadvantage can be found in this example: say you wanted to
make the text bold, make the font style Verdana and change its color
to red, you would need a lot of code wrapped around the text:

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-


serif"><b>This is an example of dummy content.</b></font>

This is verbose (wordy) and contributes to making your HTML messy.


With CSS you can create a custom style elsewhere and set all its
properties, give it a unique name and then tag your HTML to apply
these stylistic properties:

<p class="myNewStyle">My CSS styled text</p>


And in between the <head></head> tags at the top of your web
page you would insert this CSS code that defines the style we
just applied:

<style type="text/css">
<!--
.myNewStyle { font-family: Verdana, Arial, Helvetica,
sans-serif;
font-weight: bold;
color: #FF0000;
}--></style>
But for websites with large number of pages:
AND
When you want to apply a style across pages:

The solution: You can define/create your CSS style in a separate


file and then link it to the page you want to apply the code to:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

The above line of code links your external style sheet called
myFirstStyleSheet.css to the HTML document. You place this
code in between the <head> </head> tags in your web page.

To create an external style sheet all you need to do is create a


simple text document (on Windows you simply right-click and
select new -> text document) and then change it from a file type
.txt to .css.
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
<p class="myNewStyle">My CSS styled text</p>
or
<h2 class="my3rdNewStyle">My CSS styled text</h2>

Another way to apply CSS is to globally redefine an HTML tag to look a certain
way:

h1 { font-family: Garamond, "Times New Roman", serif; font-size:


200%; }

Precedence

You might also like