Web Design Course: CSS lecture 1

Web Programming and
Design
CSS (Cascading Style Sheet)
By : Gheyath M. Othman

Introduction to CSS (Cascading Style Sheet)
2
What is CSS ?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External style sheets are stored in CSS files

3
Som advantages of CSS:
• Save time
• Load page faster
• Easy maintenance
• Superior(larger) styles to HTML
• Multiple device compatibility
• Global web standards

4
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C
called the CSS Working Group. The CSS Working Group creates documents
called specifications. When a specification has been discussed and officially
ratified by W3C members, it becomes a recommendation.
NOTE: The World Wide Web Consortium, or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.

CSS Syntax
5
A CSS rule set consists of a selector and a declaration block.
• The selector points to the HTML element you want to style
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a property name and a value assigned to
property, separated by a colon.

In the following example all <p> elements will be center-aligned, with a red text
color:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body></html>
e1_first-ex>>
CSS Syntax
6
NOTE: To make the CSS code more readable,
you can put one declaration on each line.

• CSS selectors allow you to select and manipulate HTML elements.
• CSS selectors are used to "find" (or select) HTML elements based on their
id, class, type, attributes and more.
CSS Selectors
7

Element Selector:
▪ Element selector selects elements based on the element name. You can
select all <p> elements on a page like this: e2_element-selector>>
CSS Element Selector
8
<!DOCTYPE html><html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>All paragraphs will be affected </p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

id Selectors:
▪ The id selector uses the id attribute of an HTML element to select a specific
element.
▪ An id should be unique within a page, so the id selector is used if you want to
select a single, unique element.
▪ Use a hash character followed by the id element. “#id_name” LIKE:
#red {
text-align: center;
color: red;
}
CSS id Selector
9
NOTE: ID name must not start with a number!.
Also as pointed that id should be unique because java script is care about that..

id Selector example:
CSS id Selector
10
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
e3_id-selector>>

class Selectors:
▪ The class selector selects elements with a specific class attribute.
▪ Unlike id selector, classes are not unique, so the same class can be used for
multiple elements.
▪ Use a period character(.) followed by the class name. “.class_name” LIKE:
.center {
text-align: center;
color: red;
}
▪ You can also specify that only specific HTML elements should be affected by
a class. p.center {
text-align: center;
color: red;
}
CSS Class Selector
11NOTE: CLASS name must not start with a number!

class selector example: e4_class-selector>> e5_class-selector1>>
CSS Class Selector
12
<!DOCTYPE html><html><head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
</body></html>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be
affected</h1>
<p class="center">This paragraph will be red
and center-aligned.</p>
</body></html>

CSS Universal Selector
13
The universal selector is an asterisk; it is like a wildcard and matches all element
types in the document.
*{CSS code..}
If you want a rule to apply to all elements, you can use this selector. Sometimes it
is used for default values that will apply to the whole of the document (such as a
font - family and font - size ) unless another more specific selector indicates that
an element should use different values for these same properties.
<style type="text/css">
*{ color: red; font-size: 25px;}
</style>
</head>
<body>
<p>this is a paragraph</p>
<span>this is a span</span>
<h1>this is heading</h1>
</body></html>

CSS Attribute Selector
14
Attribute Selector:
It is possible to style HTML elements that have specific attributes or attribute
values.
[attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
selector[attribute] { CSS code..}
[attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified
attribute and value.
selector[attribute=“value”] { CSS code..}

Attribute example(1):
15
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href=“www.w3schools.com ">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
body></html>
e1_attribute

Attribute example(2):
16
<style>
a[target=_blank] {
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="http://www.example.com">example.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
body></html>
e2_attribute-value

CSS Attribute Selectors
17
There are others like:
• CSS [attribute~="value"] Selector: select elements with an attribute value
containing a specified word.(the word must be separated with others by space)
• CSS [attribute|="value"] Selector : select elements with the specified
attribute starting with the specified value.
• CSS [attribute^="value"] Selector :select elements whose attribute value
begins with a specified value.
• CSS [attribute$="value"] Selector :select elements whose attribute value ends
with a specified value.
• CSS [attribute*="value"] Selector :select elements whose attribute value
contains a specified value.
e3_mor-attr-sel
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like
class="top-text"!
Note: The value does not have to be a whole word!

CSS Combinators Selector
18
• A combinator is something that explains the relationship between the selectors.
• A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
• There are four different combinators in CSS3:
1. descendant selector(space):matches all elements that are descendants of a
specified element.
2. child selector(>) :selects all elements that are the immediate children of a
specified element.
3. adjacent sibling selector(+):selects all elements that are the adjacent
siblings of a specified element.
4. general sibling selector (~):selects all elements that are siblings of a
specified element.
div p { background-color: yellow;}
div > p { background-color: yellow;}
div + p { background-color: yellow;}
div ~ p { background-color: yellow;}
body
h1
i
p
i

Combinators example(1) : descendant selector(space)
19
<style>
div p {
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
body></html>
e1_combinators

Combinators example(2) : child selector(>)
20
<style>
div > p {
}
</style>
</head>
<body>
<div>
<span><p>Paragraph 3 in the div.</p></span>

</div>
body></html>
e2_combinators

Combinators example(3) : adjacent sibling selector (+)
21
<style>
div + p {
}
</style>
</head>
<body>
<div>
</div>
body></html>
e3_combinators

Combinators example(4) : general sibling selector(~)
22
<style>
div ~ p {
}
</style>
</head>
<body>
<div>
</div>
body></html>
e4_combinators

Web Design Course: CSS lecture 1

More Related Content

What's hot

Similar to Web Design Course: CSS lecture 1

Recently uploaded

Web Design Course: CSS lecture 1