Lecture 3CSS part 1.pptx

CHAPTER 3
INTRODUCTION TO CASCADING
STYLE SHEETS
(CSS) -
IT 210
Web-Based Design
1

O B J E C T I V E S
By the end of this chapter, you’ll be able to:
 Control a website’s appearance with style sheets.
 Use a style sheet to give all the pages of a website the same look and
feel.
 Use the class attribute to apply styles.
 Specify the precise font, size, color and other properties of displayed
text.
2

OUTLINES FOR PART 1
 Introduction.
 Inline Styles.
 Embedded Style Sheets.
 Linking External Style Sheets.
Selectors in CSS
3

INTRODUCTION
The basic structure of every web page, HTML, is very plain on
its own. The beautiful websites that you see across the
internet are styled with a variety of tools, including CSS.
Cascading Style Sheets 3 (CSS3): is a language that is used in
combination with HTML that customizes how HTML elements
will appear. CSS can define styles and change the layout and
design of a sheet
CSS validated
 iigsaw.w3.org/css-validator/
 This tool can help you make sure that your code is correct
and will work on CSS3-compliant browsers. 4

INTRODUCTION
CSS: A New Philosophy
 Separate content from presentation!
Content
(HTML document)
Presentation
(CSS Document)
Title
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit.
Suspendisse at pede ut
purus malesuada
dictum. Donec
viaccumsan. Morbi at
• arcu vel elit ultricies
porta. Proin
tortor purus, luctus
non, aliquam nec,
interdum vel, ia
molestie. Praesent
augue tortor, convallis
eget, euismod
nonummy, lacinia ut,
risus.
Bold
Italics
Indent
Title
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Suspendisse at pede ut purus malesuada
dictum. Donec vitae neque non magna aliquam
dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
The Resulting
Page
Nice web done by CSS: http://seanhalpin.io/

WRITING CSS CODE IN HTML FILE
You can declare CSS codes in the HTML5, by:
1. INLINE STYLES:
CSS styles can be directly added to HTML elements by using the
style attribute in the element’s opening tag. Each style declaration
is ended with a semicolon. Styles added in this manner are known
as inline styles.
2. EMBEDDED STYLE: CSS code can be written in an HTML file by
enclosing the code in <style> tags. Code surrounded by <style>
tags will be interpreted as CSS syntax. 6
<h2 style="text-align: center;"> Centered text </h2>
<p style="color: blue; font-size:
18px;">Blue,text</p>
<head> <style> h1 { color : blue ; } </style> </head>

INLINE STYLES
In Example (1) : applies inline styles to p elements to alter their font
size and color.
 Each CSS property is followed by a colon (:) and the value of the
attribute and
 Multiple property declarations are separated by a semicolon (;)
8
<p style = "font-size: 20pt ; color:
deepskyblue ;">
it’s important to know that inline styles are a
quick way of directly styling an HTML element.

Fig. 4.1 | Using inline styles
INLINE STYLES (CONT.)
EXAMPLE (1) ON THE BROWSER
9
inline styles are a fast way of
styling HTML, but they also
have limitations. If you
wanted to style, for
example, multiple <h1>
elements, you would have
to add inline styling to each
element manually. In
addition, you would also
have to maintain the HTML
code when additional <h1>
elements are added.

EMBEDDED (internal) STYLE SHEETS
 A second technique for using style sheets is embedded style
sheets, which enable you to embed a CSS3 codes in an
HTML5 document’s head section.
10

EMBEDDED STYLE SHEETS
EXAMPLE (2)
In this example create
an embedded style
sheet containing four
styles.
11

EXAMPLE (2) CONT..
12

Fig. 4.3 | Embedded style sheet.
EXAMPLE (2) OUTPUT
13

EXAMPLE (2): EXPLAINING LINE 11 TO 18
Line 11: Styles placed in the head apply to matching elements wherever
they appear in the body. The style element’s type attribute specifies the
MIME (Multi purpose Internet Mail Extensions) type that describes the
style element’s content.
lines 12–17: declares the CSS rules for the style sheet.
14
Default in
HTML 5

WRITING CSS CODE IN SEPARATE FILES
CSS code can be written in its own files to keep it separate from
the HTML code. The extension for CSS files is .css. These can be
linked to an HTML file using a <link> tag in the <head> section.
That called as External Style (highly recommended )
CSS rules in separate file .css extension linked via
<link rel="stylesheet" href=…> tag
15

<LINK> TAG
To link an external style sheet in html documents we use <link> tag.
Note: Link tag is void. (No need to close it)
o link tag has many elements some of them are:
16
Element
(Attribut
e)
Description
rel specify a relationship between two
documents
type specifies the MIME type of the related
document
href provides the URL for the document

 External style sheets are separate documents that contain
only CSS rules.
 Help create a uniform look for a website:
oSeparate pages can all use the same styles.
oModifying a single style-sheet file makes changes to styles
across an entire website (or to a portion of one).
 When changes to the styles are required, you need to
modify only a single CSS file to make style changes across
all the pages that use those styles. This concept is
sometimes known as skinning.
17

body { background-color:
#E6E6FA;
color: #000000;}
h2 { color: #003366; }
LINKING EXTERNAL STYLE SHEETS
Multiple web pages can associate with the same external
style sheet file.
18
site.css index.html
clients.html
about.html
Etc…

EXAMPLE (3) HTML
19

EXAMPLE (3) CSS
20

WHAT IS THE PREFERRED WAY OF INCLUDING CSS WITHIN A
PROJECT? HOW DO I KNOW WHEN TO USE INLINE STYLES, THE
TAGS, OR A .CSS FILE?
As a web developer, you will eventually come across HTML documents
which include CSS either inline with style attributes or within the <style>
tags at the head of the document. Hence, it is important to be aware of
all the various ways to include CSS in a project.
That having been said, mashing HTML and CSS together is not a great
habit to get into. As developers we want to “separate our concerns”
because this usually creates codebases that are more flexible, readable,
and maintainable. As such, keeping our CSS contained within a separate
.css file is the preferred way of including CSS within most projects.
21

STYLE SHEETS SYNTAX
 A style sheet consists of a set of rules.
 Each rule consists of one or more selectors and a declaration block.
 Selectors are separated by commas
 Declarations are separated by semicolons
 Properties and values are separated by colons
22
h1,h2,h3 { color: green; font-weight: bold; }

SELECTORS IN CSS
1. CSS Type Selectors
 used to match all elements of a given type or tag name
 For example, in HTML, the tag for a paragraph element
is <p>. The CSS syntax for selecting <p> elements is:
p {
…..
}
23

SELECTORS IN CSS
2. CSS class selectors
 it matches elements based on the contents of their class
attribute. a . needs to be prepended.
24
For example, consider the following HTML:
<p class="brand">Sole Shoe Company</p>
The paragraph element in the example above has a class
attribute within the <p> tag.
The class attribute is set to "brand". To select this element
using CSS, we could use the following CSS selector:
.brand {
}

SELECTORS IN CSS
3. CSS ID selectors
 It matches elements based on the contents of their id attribute. The
values of id attribute should be unique.
25
Explain:
If an HTML element needs to be styled uniquely (no matter what
classes are applied to the element), we can add an ID to the
element to the tag:
<h1 id="large-title"> ... </h1>
Then, CSS can select HTML elements by their id attribute. To select
an id element, CSS prepends the id name with a hashtag (#). For
instance, if we wanted to select the HTML element in the example
above, it would look like this:
#large-title {

SELECTORS IN CSS
4. Groups of CSS Selectors
 Match multiple selectors to the same CSS rule, using a
comma-separated list. In this example, the text for both h1
and h2 is set to red.
Example:
h1, h2 {
color: red;
}
26

SELECTORS IN CSS
5. Chaining Selectors
 that rule sets apply only to elements that match all criteria.
Example:
27
/* Select h3 elements with the section-heading class */
h3.section-heading {
color: blue; }
/* Select elements with the section-heading and button class
*/
.section-heading .button {
cursor: pointer; }

MULTIPLE CLASSES
For instance, perhaps there’s a heading element that needs to be green and
bold. You could write two CSS rules like so:
.green { color: green; }
.bold { font-weight: bold; }
Then, you could include both of these classes on one HTML element like this:
<h1 class="green bold"> ... </h1>
We can add multiple classes to an HTML element’s class attribute by separating
them with a space. This enables us to mix and match CSS classes to create
many unique styles without writing a custom class for every style combination
needed. 28

CLASS VS ID
classes are meant to be used many times
ID is meant to style only one element.
IDs override the styles of tags and classes.
ID attribute should be unique
29

SELECTOR SPECIFICITY
The most specific selector type is the ID selector, followed by
class selectors, followed by type selectors.
In this example, only color: blue will be implemented as it has
an ID selector whereas color: red has a type selector
Specificity is a ranking system that is used when there are
multiple conflicting property values that point to the same
element. When determining which rule to apply, the selector
with the highest specificity wins out.
30
h1#header { color: blue; } /*implemented*/
h1 { color: red; } /*not implemented*/

Review CSS Selectors
•CSS can change the look of HTML elements. In order to do this, CSS must
select HTML elements.
•CSS can select HTML elements by tag, class, or ID.
•Multiple CSS classes can be applied to one HTML element.
•Classes can be reusable, while IDs can only be used once.
•IDs are more specific than classes, and classes are more specific than tags.
•Multiple unrelated selectors can receive the same styles by separating the
selector names with commas.
31

SOME OF CSS FONT PROPERTY
font-family Property
font-family property specifies the name of the font to use.
32
Fig. 4.5 | Generic font families.

font-size Property
 font-size property: specifies the size used to render the font.
 You can specify a point size such(12pt) or a relative value such as (xx-
small, x-small, small, smaller, medium, large, larger, x-large and xx-
large).
 Relative font-size values are preferred over points, because an author
does not know the specific measurements of each client’s display.
 Relative values permit more flexible viewing of web pages.
 For example, users can change font sizes the browser displays for
readability.
33

font-weight property
 font-weight property : specifies the “boldness” of
text. Possible values are:
o bold
o normal (the default)
o bolder (bolder than bold text)
o lighter (lighter than normal text)
34

text-align property
 The text-align property places text in the left, right,
or center of its parent container.
color property :
 defines the color of the text.
35

VALUES IN THE CSS RULES
 Colors are set in RGB format (decimal or hex):
o Example: #a0a6aa = rgb(160, 166, 170)
o Predefined color aliases exist: black, blue, etc.
 Numeric values are specified in:
o Pixels, ems, e.g. 12px , 1em
o Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
o Percentages, e.g. 50%
o Zero can be used with no unit: border: 0; 36

https://colorhunt.co/ is a web site to help Designers and Artists to choose a
beautiful Color Palettes
VALUES IN THE CSS RULES
Color names and hexadecimal codes may be used as the color property value.
37

CSS COMMENTS
CSS comments may be placed in any type
of CSS code (i.e., inline styles, embedded
style sheets and external style sheets) and
always start with /* and end with */.
38

Lecture 3CSS part 1.pptx

More Related Content

Similar to Lecture 3CSS part 1.pptx(20)

More from GmachImen(20)

Recently uploaded(20)

Lecture 3CSS part 1.pptx