Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

Week 12 - Working With CSS

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Week 12 - Working With CSS

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Module 010 Working with CSS

At the end of this module you are expected to:


1. Define what is CSS and discuss its usage.
2. Discuss the basic CSS Styles
3. Identify CSS Syntax Rule
4. List Commonly Used CSS Property

Lesson 1: CSS Fundamentals


What is CSS?
Cascading Style Sheet (CSS) controls the visual appearance of the html content. Just like
HTML tag attributes, CSS is an easy and effective alternative to styling various HTML tag
attributes further. The current version of CSS is CSS 3.

Using CSS, you can specify a number of style properties for a given HTML tag. Each property
has a name and a value separated by a colon(:). Each property declared must be terminated
by a semi-colon (;).

To better understand how CSS works, please refer to the HTML codes below. Both examples
use the html paragraph <P> tag and font <FONT> tag with the font associated attributes to
indicate text color and font size.
HTML only
~--'-------------------------------~
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Cascad i ng Style Sheets</TITLE>
</HEAD>
<BODY>
<P><FONT color - "green" s i ze - "7">HTML CSS Module!</FONT>-</P>
</BODY>
</HTML>

The above code could be written in a different manner using a CSS.

HTML w ith CSS


<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Cascading Style Sheets</TITLE>
</HEAD>
<BODY>
<P style - "color : green : font -size : 24px ; ">HTML CSS Modu l e!</P>
</BODY>
</HTM L>
Content and Style
Style in Content
If style and content are mixed every time a new web page is added or modified or any
changes occur in web structure and its content, we need to change the affected tag.

Separating Style from Content


Separating CSS Styles from its web content is important since modifying a structure is easier
if it has its own file. Content writing and designing are two separate functions in creating
website. It involves two different type of jobs. Content and Design can be done in parallel.

Lesson 2: CSS Styles


CSS Styles
CSS styles can be used in three ways:
a. Inline
This can be done by placing the style="" attribute inside an HTML tag

<p style="color:blue; font-size:20px;">


b. Internal
This is done by placing the style tags inside the <HEAD> portion. See example below:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Cascading Style Sheets</ TITLE>
<STYLE type= "text/CSS">
H2{
text-align:center;
}
</STYLE>
</H EAD>
<BODY>
<H2>CSS is Fun!</H2>
</BODY>
</HTML>

c. External
This is done by placing the style tags using an external CSS file. To do this, you can use the
<LINK> tag as shown in the example below.
<!DOCTY PE html>
<HTM L>
<HEAD>
<TITLE> Cascading Styl e Sheets</TI TLE>
<LIN K rel= "style sh eet" href="myCSSFile . css" type ="text/CSS"/>
</H EAD>
<BODY>
... s om e htm l code s he re . ..
</ BODY>
</HTM L>

Class as a Selector
The class selector allows you to select element(s) where an exact property will be applied.
To select elements with a specific class, write a period (.) character, followed by the name of
the class. All elements assigned with that class will have the properties applied.

You can also indicate that only specific HTML elements should be affected by a class. To do
this, start with the element name, then write the period (.) character, followed by the name
of the class.
Class Syntax
.class {
css declarations;
}
Or
p.classTest {
background-color: red;
}

Below is an example:

<!DDCTYPE html>
<HTML>
<HEAD>
<TITLE> CSS Styles </TITLE>
<STYLE>
P. classTest{
background:gray;
}
</STYLE>
</HEAD>
<BODY>
<P>Welcome to CSS Class . </P>
<P class =''classTest''>This sentence uses the classTest assigned to P tag</P>
<P> This line of text does not use the paragraph formatting . </P>
<P class= " classTest">Have a great day.</P>
</BODY>
</HTML>

The above code will have the following output.


Welcome To CSS Class .

This line of text does not use the paragraph fonuattiug.

.
_·
.
...
.
---.
.
--- '

Notice that the formatting set to <P> tag is only implemented on specific <P> tags with a class
indicator.

When to use a Class Selector


Use a class selector if you will be applying a consistent style to multiple elements within your
web page/site. These classes would be helpful when you have (or will probably have) more
than one element using the same style.

In addition, a specific element can have more than one class associated with it, while an
element can only have one id. For example, you can give a div two classes whose styles will
both take effect.
ID as Selector
An ID selector is used when you have one element on the page that will have specific style
unique to other elements. Remember that IDs must be unique. All elements having the given
ID will be set according to the defined rule. An ID in CSS always starts with a number sign
(#).
#blueColor {
color: #0000/f;
}

This rule implies to the content in blue for every element with ID attribute set to blueColor
in your web page.
Another example is shown below
,-----------~
h1 #blueColor {
color: #0000/f;
}

The above rule implies the content in blue for <Hl> elements or tags with id attribute set
to blueColor.

Contextual Selectors
There are some instances where you may want selectors to match elements that appear in a
certain context. In such cases, contextual selectors can be used to specify context. Context is
described as an ancestor/descendent relationship between elements in the document tree.
For example, consider the following rules if we want all <EM> elements on our page to be
red.
We use the CSS em { color: red}, as shown in the example below:

<!DOCTYPE htm l>


<HTML>
<HEAD>
<TI TLE> CSS Styles </TITLE>
<STYLE>
em{
color:red;
}
</STYLE>
</HEAD>
<BODY>
<Hl>Welcome to my <EM> Webpage</EM> </Hl>
<P>Follow me on <EM> Facebook </EM></P>
</BODY>
</HTML>

Here is the output of the code a hove:

Welcome to my Webpage
Follo,v 1ne on Facebook
However, if we only want all <EM> inside <H1 > be red, the we can use Hl em { color: red}.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> CSS Styles </TITLE>
<STYLE>
Hl em{
color:red;
}
</STYLE>
</HEAD>
<BODY>
<Hl>Welcome to my <EH> Webpage</EM> </Hl>
<P>Follow me on <EM> Faceboo k </EM></P>
</BODY>
</HTM L>

Here is the output of the code above:


I •
(i;l.:~•:,l"fi = @) ~

[j testHTML.html X
- ~

••
C (D fi le:/// C:/WebProject/ testHTML.html
* •

Welcome to my Webpage
Follo,Y n1e on Facebook

You might observe that the property color:red only affects the <EM> tag inside the <Hl>
tag.
Lesson 3: CSS Syntax Rules
A CSS is composed of style rules that are understood by a web browser and then applied to
the corresponding elements within your document.

Style Rules for Inline CSS


As mentioned above, an inline CSS is added inside an HTML tag. This is done by using the
style attribute followed by its Property and Value.

<p style=''color: blue; font -size: 20px; ••~


' .

t t '
t
Tag Property Value Property Value

Style Rules for External and Internal CSS


For external and Internal CSS, it has a style rule which is comprised of three main parts -
Selector, Property and Value.

A selector can be any HTML tag at which a style will be applied. This could be any tag like
<Hl>, <A> or <TABLE> etc. A property is a type of attribute of HTML tag. All HTML attributes
can be converted into CSS properties. Values are assigned to properties.
Selector Declaration

( Table )( { borde r: 2px solid #A9A9A9; } )


t \ t t
Attribute Values

Each selector can have 1 or more declarations. See example below:

Hl {
t e xt - align: l e f t :
colo r : blue ;
}

In the given example above, since the rule is applied to the <Hl> tag, all <Hl> tags in your
web page will have an alignment of left with blue colored text.
Style grouping
CSS allows you to apply style to many selectors at once. If you want to use multiple selectors,
or apply a particular style to multiple selectors at once, separate each selector with a comma.

Hl, H2, Hl {
fon t- f ami l y: Verda na;
fon t-size: llpx;
fon t-weig ht: norma l :
l e t ter-spac i ng: .4ern :
}

The above example shows the way to apply styles to three selectors. Each selector will have
a font face of Verdana, a font size of 11, with the normal or default weight, and a letter spacing
of .4em.

EM measurement is a relative to the height of a font in em spaces. Because an em unit is


equivalent to the size of a given font, if you assign a font to 12pt, each "em" or lem unit would
be 12pt; thus, 2em would be 24pt.
In addition to the above example, all declarations are separated by a semi colon(;). You can
also write the above code in a single line. However, to have a better readability, it is
recommended to write the declarations in separate lines.

Lesson 4: Common CSS Tags


CCS Backgrounds
This topic allows you to learn how to set backgrounds of various HTML elements. You can
set the following background properties of an element.

a. The background-color property is used to assign a background color to an element.


b. The background-image property is used to assign a background image of an element.
c. The background-repeat property is used to control the frequency of an image used in
the background.
d. The background-position property is used to control the location of an image in the
background.
e. The background-attachment property is used to control how the image will behave in
the background upon scrolling.
f. The background property is used as a quick access to various background properties.
Setting Background
Using inline CSS, we can change the background of a particular element.

< !DOCTY PE html>


<html>
<head>
<title>CSS Background</tit l e>
</he ad>
<body>
<p styl e= "background- color : gr e en ; color :whit e; ">
The t ext has a g ree n backg ro und wi th a whi te f ont.
</p>
</ body>
</htm l >

The above code will display the output below:

etext has agreen backgroood color with ,vhite font color.

Setting a Background Image


Using an image as a background can also be done through CSS by importing an image
locally stored in your computer.
<!DOCTYPE html>
<html>
<head>
<title>CSS Background</title>
<style>
body{
background- i mage: url{"imagebg . png" );
}
</style>
</head>
<body>
Contents here ...
</body>
</html>
The above code will display the output below:

~ testHTI\IIL.htm l

C ••
(D file:///C:/WebProject/ testHTML.html

Contents l1ere...
* •

~ onL1ne Ioed
V educatlon
www .amauo nline.com

CSSFonts
Fonts can also be configured through CSS in various ways. CSS Font properties can help
identify the font family, the boldness of font, and even the font style.
a. The font-family property is used to change the face of a font.
b. The font-style property is used to make a font italic or oblique.
c. The font-variant property is used to create a small-caps effect.
d. The font-weight property is used to increase or decrease how bold or light a font
appears.
e. The font-size property is used to increase or decrease the size of a font.

<!DOCTYPE html>
<html>
<head>
<title>CSS Background</title>
</head>
<body>
<p style= "font-style:italic; font:family;Arial , Helvetica , Sans-Serif ;">
This text will be displayed in either Arial , Helvetica , or the default
Sans Serif font depending on which font you have on your system.
</p>
</body>
</html>

The above code will set all texts enclosed inside the paragraph <P></P> tag to ITALICS and
will also be using the font family (depending on font availability) "Arial", "Helvetica" and
sans-serif. The succeeding texts after the declaration of the <P> </P> tags will use the default
font setting.
Font Variant, Weight and Size
Web content (such as text) can be modified in various ways.

The Font-Variant property allows you to change the uppercase display of text or use a font's
default setting.

Font-Weight on the other hand, allows you to set the font weight of an element. Possible
values could be normal, bold, bolder, lighter, 100, 200, 300, 400,500,600, 700, 800, 900.

The other property which can be used to modify font is the size property. The font-size
property is used to control the size of fonts. Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

The sample code below shows the different font structures in application.
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts</title>
</head>
<body>
<p style - "font-variant:small-caps;">This text will be displayed in small caps . </p>
<p style - "font-we ight: bold;">This font is displayed in bold. </p>
<p style - "font-weight:lighter;">This font is displayed lighter . </p>
<p style - "font-weight:600;">This font weight is 600.</p>
<p style - "font-size: 30px;">This font size is 30 pixels</p>
<p style - "font- size : small;">This font size is small</p>
<p style - "font-size:large;">This font size is large</p>
</body>
</html>

The code above will display the output below:

THIS TE:-..'T \\U.L BE DISPL.~YED IN S?\i ALL CAPS.

This font displayed in bold.

This font displayed lightec.

This font is 600 ,,·eight.

This font size is 3 0 pixels


Tots font size is small

Tl1is f011t size is lru·2e


-
Other Text Properties
Here are some other text properties in CSS that you can use to style your HTML document.

word-spacing - space between words, e.g. lem


letter-spacing - space between characters
text-decoration - underline, overline, line-through or blink
vertical-align - sub, super, top ,middle or bottom
text-transform - capitalize, uppercase, lowercase or none
text-align - left, right, center, justify
text-indent - indentation that appears before the first line
line-hei2ht - line height in number, length, or%
References and Supplementary Materials
Books and Journals
1. Jain, R.K. (2015). IT Tools and Business Systems. Delhi, India: Khanna Book Publishing

2. McFedries, P. (2016). My Office 2016. Pearson Education

3. Rich, J.R. (2017). Working in the Cloud: Using Web-Based Applications and Tools to
Collaborate Online. Indianapolis, Indiana: QUE Publishing

Online Supplementary Reading Materials


1. Cascading Style Sheets. https://en.wikipedia.org/wiki/Cascading Style Sheets Date
of Access: October 15, 2018

2. CSS. http://www.tutorialspoint.com/css/: Date of Access: October 15, 2018

3. CSS. https://www.w3schools.com/css/default.asp: Date of Access: October 15,


2018

Online Instructional Videos


1. CSS Crash Course for absolute Beginners;
https://www.youtube.com/watch?v=yfoY53QXEnI; Date of Access: October 15,
2018
2. CSS 3 Tutorial;
https://www.youtube.com/watch?v=CUxH rWSilk;; Date of Access: October 15,
2018
3. W3Schools CSS Selectors Tutorial.
https://www.youtube.com/watch?v=EeZKHmNJipE. Date of Access: October 15,
2018

You might also like