Scribd
Upload
6 views

Week 12 - Working With CSS - Presentation

Uploaded by

bernal8135
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Week 12 - Working With CSS - Presentation

Uploaded by

bernal8135
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Week 012

Working with CSS


Week 012: Working with CSS

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 (;).
Week 012: Working with CSS

CSS Fundamentals
Example: HTML

Example: CSS
Week 012: Working with CSS

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

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

CSS Style
CSS styles can be used in three ways:
c. Inline
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.
Week 012: Working with CSS

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.
Week 012: Working with CSS

Class Selector Example


Example

Output
Week 012: Working with CSS

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
Week 012: Working with CSS

ID as Selector
An ID in CSS always starts with a number sign (#).
#blueColor {

color: #0000ff;
}

This rule implies to the content in blue for every element with ID attribute set to
blueColor in your web page.
#blueColor
{
color:
#0000ff;
}
Week 012: Working with CSS

Contextual Selector
We use the CSS em { color: red }, as shown in the example below:

Here is the output of the code above:


Week 012: Working with CSS

Contextual Selector
However, if we only want all <EM> inside <H1> be red, the we can use H1 em {
color: red }.
Here is the output of the code above:
Week 012: Working with CSS

CSS Syntax Rules


Style Rules for Inline CSS
an inline CSS is added inside an HTML tag. This is done by using the style attribute

followed by its Property and Value.


Week 012: Working with CSS

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.

Example:
Week 012: Working with CSS

Style grouping

Example:
Week 012: Working with CSS

CSS Backgrounds

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.
Week 012: Working with CSS

Setting Background

Example:

Output:
Week 012: Working with CSS

Setting Background

Example:
Output:
Week 012: Working with CSS

Font Variant, Weight and Size

• 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.
Week 012: Working with CSS

Font Variant, Weight and Size Example

Example: Output:
Week 012: Working with CSS

Other Text Properties

• word-spacing – space between words, e.g. 1em


• 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-height - line height in number, length, or %

You might also like