Lecture No 4

Web
Programming
CSS
Cascading
Style
Sheet
2
• CSS is used to design a website. With CSS, you can
change things like the color, size, and spacing of
HTML elements.
• The page on the left is comprised of only HTML.
By applying CSS, you can style it like the layout
shown on the right.
3
• You can apply CSS to HTML elements by specifying
"where", "what", and "how" you want to change it.
• CSS is written in a separate file from HTML.
• In the example below, CSS is applied to a "<h1> element
(where)", and its "color (what)" is changed to "red (how)".
• The target HTML element is called the "selector".
4
5
How to Add CSS to
HTML
6
Inline CSS
• Style rules can be applied to individual HTML elements
using inline CSS. Inlining CSS is the process of
embedding CSS into an HTML file rather than using an
external CSS file.
• The inline styles will only affect the HTML element to
which the style attribute with CSS-property values is
applied.
<body>
<p style=”color:red; font-size: 20px;”>This is our first HTML
code.</p>
<p>This is our second HTML code</p>
</body>
7
Internal CSS
You can use the internal

CSS by integrating the
<style> element in the
<head> section of a HTML
web page.
8
External CSS
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
9
CSS Selectors:
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
The CSS element Selector

The element selector selects HTML elements based on the
element name.
10
CSS Selectors
11
The CSS id Selector
The id selector uses the id
attribute of an HTML element
to select a specific element.
The id of an element is unique

within a page, so the id
selector is used to select one
unique element!
To select an element with a

specific id, write a hash (#)
character, followed by the id of
the element.
12
The CSS class Selector
• . The class selector

selects HTML
elements with a
specific class
attribute.
• To select elements
with a specific
class, write a
period (.)
character, followed
by the class name.
13
14
15
The CSS Universal Selector
. The universal selector (*) selects all HTML elements on the page.
16
All CSS Simple Selectors
17
In CSS, colors are specified by hexadecimal values like "color:
#ff0000;".
You don't need to remember the values, but you can search online for
other colors if you're interested.
18
CSS Syntax:
Just like HTML, you should always indent CSS code as
shown below.
Also, note that it is necessary to add a colon (:) at the end
of a CSS property and a semicolon (;) at the end of the line.
19
CSS Comments
you can write comments in a CSS file.
In CSS, however, a comment should be surrounded by /*
*/.
20
Font Size
The size of a font can be set with the font-size property.
A common unit for setting the font-size is px (pixel).
21
Font Family
With the font-family property, you can specify the type of a font.
You can do this by setting "font-family: font name;".
If the font name contains a space, you need to surround it with
double quotes.
22
Variety of Fonts
When setting the font-family property, you can specify various font types
such as "serif" and "sans-serif".
You don't have to memorize the name of the fonts.
23
Background Colors
background-color property allows you to change the
background color.
You can set the background color just like the color
property.
In addition, if the same letter continues like "#dddddd", it
can be shortened to "#ddd".
24
25
Width and Height
To change the width and height of an element, use
the width property and height property, respectively.
Both width and height can be specified with px.
As with the font-size, don't forget to put the px!
26
27
Applying CSS to a certain element
When there are multiple <li> elements in your code,
applying CSS like the image below would turn all the <li>
elements red.
So, how do we change only one of the <li> elements to
red?
28
29
Labeling Tags
You can achieve this by labeling elements using
the class attribute.
By adding a class to a HTML tag, you can differentiate
each element and apply different CSS.
When applying CSS to a class selector, note that a
period "." is requiredin front of the class name.
30
31
Applying CSS to Multiple Tags
If you assign the same class name to multiple HTML
elements, the same CSS applies to all of them.
32
33
Syntax for Classes
class selector names always start with a period.
If you forget the period, the CSS will not be applied.
Note that CSS class selectors start with a period,
but tags do not.
34
35
Including CSS file
(External)
<head>
<link rel="stylesheet" href="styles
.css">
</head>
36
• Self Learning:
-> Div Tag

-> CSS Position Property
-> Link Styling:
Apply CSS to style hyperlinks (<a> tags), including changing the
color, underlining, and hover effects.
Experiment with changing link styles for visited and active links .
37

Lecture No 4

Uploaded by

Copyright:

Available Formats

Lecture No 4

Uploaded by

Document Information

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

Lecture No 4

Uploaded by

Copyright:

Available Formats

Web

You can use the internal

The CSS element Selector

The id of an element is unique

To select an element with a

• . The class selector

-> Div Tag

You might also like