What is CSS?

• CSS: stands for Cascading Style Sheets (CSS)

• A style is simply a rule describing how to format a particular portion of
a web page.
• A style sheet is a set of these styles.
• A style sheet is a set of instructions that controls the appearance of a web page.
• A style sheet: collection of formatting information (rule) that controls how an
HTML element appears.
• CSS works with HTML, but it’s not HTML.
• CSS works hand-in-hand with the web browser to make HTML look good.
• CSS defines appearance and style of the web page.
 CSS Introduction
Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.

Cascading: determines how styles get applied to our webpages when there are
conflicting rules.
Decoration of text or image to be displayed in HTML elements: styles define how to
display HTML element: define sizes, spacing, fonts, colors, layout, etc. 2
Example

3
 Cont…

Tags like <font>, and color attributes were added to the HTML 3.2
specification.
Development of large websites, where <font> tag and color attributes were
added to every single page, became a long and expensive process and terrible
for web developers.
To solve this problem, the group of people in World Wide Web Consortium
(W3C) created and maintains CSS.
CSS removed the style formatting from the HTML 4.0 and stored in a
separate CSS file.
This file enable you to change the appearance and layout of all the pages in a
website, just by editing one single file. All browsers support CSS today.
4
 Advantages of CSS
 CSS saves time (a lot of work): we can write CSS once and reuse same
CSS file in multiple HTML pages.

Pages load faster: If we are using CSS, we do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply to all
the occurrences of that tag. So less code means faster download times.

Easy maintenance: to make a global change, simply change the style and
all elements in all web pages will be updated automatically.
5
 Cont…

Global web standards: Now HTML attributes are being deprecated and its being
recommended to use CSS.
Multiple devices compatibility (Platform Independence): Style sheets allow content to be
optimized for many types of devices. E.g. PDA and cell phones.
Better type and layout controls.
Less work: change the appearance of an entire site by editing one style sheet.
Potentially smaller documents and faster downloads.
More accessible sites: making it more accessible for mobile devices by creating responsive
website.
 How the style sheet work?

1. Start with a document that has been marked up in HTML

2. Write style sheet rules for how you’d like certain element to
look
3. Attach the style rules to the document
 Responsive Web Design

 Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all
devices (desktops, tablets, and phones).

 A responsive web design make your page look good on any device! It uses HTML and CSS.

• Setting The Viewport

 When making responsive web pages, add the following <meta> element in all your web pages

• <meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport is the users visible area of a webpage.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
• Responsive Images

 Responsive images are images that scale nicely to fit any browser size.

 If the CSS width property is set to 100%, the image will be responsive and scale up and down.

• <img src="image2.jpg" style="width:100%;">

 CSS versions

• There are three versions of CSS

• The main differences between the three levels are as follows:

• ✦ CSS1 defines basic style functionality, with limited font and limited positioning support.

• ✦ CSS2 adds aural properties, paged media, better font and positioning support. Many other
properties have been refined as well.

• ✦ CSS3 adds presentation-style properties, allowing you to effectively build presentations.

Keep in mind that you don’t have to specify the level/version of CSS you are using for your
documents.
 The Style Syntax and Rules

 A rule says how a particular page element (whether it is heading, a paragraph, or block quote)
should be displayed.
 All style rules follow the same basic format. A CSS rule has two main parts (sections):

 a selector, and one or more declarations:

 The selector points to the HTML element you want to style.

 The selector :-which identifies the element to be rule applies.

 The selector is followed by the formatting property definitions, which are enclosed in braces ({ }).
10
 Cont…
Syntax:
Selector {property : value;}
or
Selector {property1 :
value1;
property2: value2;
Property3:value3 ;
}
selector declaration
Example:
p { color : red }

property Declaration
 Cont…

 The declaration:-
• The declaration is made up of a property and a value.
• There can be more than one declaration in a single rule
• Each declaration must end by semicolons.
• Declarations are very similar to attribute names and their values.
 Style Sheets Syntax and rule-cont.

Selectors are separated by commas

Declarations are separated by semicolons

Properties and values are separated by colons

h1,h2,h3 { color: green; font-weight: bold; }

• CSS Comments: are used to explain your code, and may help you when you
edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with /* and ends with */

13
 Attaching CSS with HTML
• There are three way’s that style information can be applied
to an HTML document.
1. Inline style sheet
2. Embedded/Internal style sheet
3. External style sheet
 Inline style sheet

To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property.
 No selectors are needed in this type.
The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
 An inline style loses many of the advantages of style sheets by mixing content
with presentation.
 Embedded/Internal style sheet
Embedded in the HTML in the <style> tag:
<style type="text/css">

The <style> tag is placed in the <head> section of the document. style tag must contain a type
attribute that identifies the content of the style element as “text/css”

• type attribute specifies the MIME (Multipurpose Internet Mail Exchange) type of the enclosed style
sheet.
MIME describes the format of the content
Other MIME types include text/html, image/gif, text/javascript.
Used for document-specific styles.
An internal style sheet should be used when a single document has a unique style.
 Cont…
• A more compact method for adding a style sheet is to embed a style block at the
top of the HTML document using the <STYLE> tag and its rules apply only to that
document.
Example:
<html>
<head>
<style type="text/css">
h1 {color:red;} Output:
p {font-size:12pt;
font-family: sans-serif;
}
</style>
<title>title</title>
</head>
<body>
<h1>red heading </h1>
<p>paragraph 1</p>
</body>
</html>
 External style sheet

• If you are applying one set of style instructions to a number of pages

in a site, an external style sheet is the best method.
• It is a powerful because you can change the appearance of an entire
site by making one change in the external style sheet document.
• First, put your style sheet rules in a separate document and save
with .css suffix.
• Next, create a link to the style sheet document from your web page (or
pages) using a <LINK> tag.
 Cont…

♣External linking
 Separate pages can all use a shared style sheet
 Only modify a single file to change the styles across your entire Web site.
 An external style sheet is ideal when one style sheet file is applied to many pages.
♣link tag (with a rel attribute)
• Specifies a relationship between current document and another document.

<link rel="stylesheet" type="text/css" href=“pathname/style.css">

♣ link elements should be in the <head> section.

19
 External style sheet:
Example
Example:
<html>
<head>
< link rel="stylesheet" type="text/css“ href=“mytest.css“>
</head>
<body>
<h1>We are Computer Science Staff</h1>
<p>We are surfing for new technology</p>
</body>
<html>

• The REL attribute defines the linked document's relation to the document, that is a "Stylesheet“.
 Cont…

• body{
• color:red;
• background-color:yellow;
• }
• p{
• color:blue;
• background-color:white;
• }

Note: the above source code should be saved in “mytest.css”

 Multiple Style Sheets
 If some properties have been set for the same selector (element) in different style sheets, the values from last read style
sheet will be used.

• For example: An external style sheet has these properties for the h3 selector:
• h3{
•color:red;
•text-align:left;
•font-size:8pt;
•}
• And an internal style sheet has these properties for the h3 selector:
• <style>
• h3{
• text-align:right;
• font-size:20pt;
• }
22
• </ style>
 Cont…
• If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
•color:red;
•text-align:right;
•font-size:20pt;
•The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

23
 Cascading order
• Cascade: deals with precedence of style rules or CSS properties (i.e. the order in which
properties are applied to an HTML document). It solves conflict situations.
• What style will be used when there is more than one style specified for an HTML
element?
When we define a set of style rules for a specific tag in external, internal as well as inline
style, the browser creates a virtual declaration list by merging all style rules together by
following rules of cascade, and then applies the merged virtual declaration list into specific
tag.
Generally speaking, we can say that all the styles will "cascade" into a new "virtual" style
sheet by the following rules, where number four has the highest priority, which means that
it will override all other style:
•1. Browser default (Default CSS)
•2. External style sheet
24
•3. Embedded (Internal) style sheet
 Cont…

• In general, the rules of cascade include:

Later properties override earlier properties, i.e. last declared and /or closest to
the content will applied.
So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
More specific selectors (Less generic) override less specific (More generic)
selectors.

25
Example
 Style Inheritance
• Inheritance: deals with how styles poured down from a parent element to its
child elements.
In general, properties related to the styling of text font size, color, style
(family), etc. are inherited. If we set a font-family on the body element, then it
will get inherited by all the elements within the study.
However, properties such as borders, margins, and so on, that affects the
boxed area around the element tend not to be inherited.

27
 CSS Selectors

• CSS Selector types:

• Element selector
• Grouped selectors
• Universal selector
• Descendant selector
• Id selectors
• Class selectors
• Attribute selector
 Element selector
• Single Element selector:
– Most basic type of selectors is element type selector.
 Grouped selectors
• Grouped selectors:
• p, ul, td, th { color :navy; }
• The disadvantage of selecting element this way of course, is that the property
will apply to every paragraph and other listed elements in the document.
 Universal Selector

• Universal selector: Rather than selecting elements of a same type, the universal
selector quite simply matches the name of any element type.
• Example:
 Descendant Selector

• Descendant Selector: Suppose you want to apply a style rule to a particular element only when it
lies inside a particular element. As shown in the following example, style rule will apply to <em> element
only when it lies inside <ul> tag.
• Example:
 ID selector
• ID selector: We learned about the id attribute that gives an
element a unique identifying name.
• Thus, we can define style rules based on the id attribute of the
elements. All the elements having that id will be formatted
according to the defined rule.
• The symbol that identifies ID selector is the # (hash) symbol.
 Class Selector

• We can define style rules based on the class attribute of the elements. All
the elements having that class will be formatted according to the defined
rule.

• Class name are indicated with a period (.)

• To apply a property to all elements of the same class, omit the element
name in the selector.
.special{
color:red;
}
 Cont…
• Example (Id and class)
 Attribute selector
• We can also apply the styles to HTML elements with particular attributes.
• The example below will match all the input elements having a type attribute with a value of
text.
• Example:
 Pseudo class
selectors
• Pseudo selectors are indicated by the colon (:) character.
• Anchor pseudo classes
• There are four main pseudoclasses that can be used as selectors:
– a:link :-Applies a style to unclicked (unvisited) links
– a:visited :-Applies a style to links that have already been clicked
– a:hover:- Applies a style when the mouse pointer is over the link
– a:active :-Applies a style while the mouse button is pressed

To use all four anchor pseudo classes in a single style sheet, they need to
appear in a particular order in order to function properly, the required order is

:link, :visited, :hover, :active.
 Text properties

• Allow you to control the appearance of the text.

• It is possible :-
– To change the color of a text
– Increase or decrease the space between character in a text
– Decorate a text and more
– Values: color value (name or numeric), RGB
– Default: depends on the browser
 Text properties
• Color property is used to change the color of the text.

• E.g. color: red;

• Text-align: is used to Control the alignment for a section text. Values: left, right or center.
eg. text-align: center;
Text-decoration: is used to control what the text looks like
values: underline, overline or line-through, none
• E.g. Text-align: underline;
Text-transformation: This property is used to specify uppercase and lowercase letters in a
text.
Values: none, lowercase, uppercase or capitalize
Text-indent: This property is used to specify the indentation of the first line of a
paragraph.
 Font related properties
• Font-family: properties is used to control the type of font shown on the page: values: arial,
courier, sans-serif and etc.
E.g. font-family: arial;
• Values: one or more font or generic font family names, separated by commas.
Example: verdana, sans-serif, etc.
The browser loads the first one that is available.
There should always be at least one generic font.
The majority of professional websites use Verdana because it was specially designed to be
legible at small sizes on computer monitors.
 Cont…

• Font-size: Controls the size of the font. Values; number of pixels.

• E.g. Font-size: 12px;
• Font-style: Controls the style of the font. Values: italic or oblique.
• E.g. Font-style: italic;.
• Font-weight: is used to increase or decrease how bold or light a font
appears. Values can be normal, bold, lighter or a number in range [100,
200,300 … 900] and it’s default is normal.
• Font-Variant: (Small Caps): allow designers to specify such a small-caps
font for an elements. values: normal, small-caps and it’s default is
normal.
 Background
•
Properties
CSS background properties are used to define the background effects for each
element.
• Background-color: property controls the color of the background. Value: color
name.
E.g. background-color: orange;
• Background-image: Allows you to set a background image. Value: image url.
E.g. background-image: url(picture.jpg);
• Background-repeat: Allows different patterns of background image repetition. Values: no-
repeat, repeat-x, repeat-y and repeat. E.g. background-repeat: no-repeat;
• If you want a background image to appear just once, use the no-repeat keyword value.
 Cont…
• Background-attachment: Sets whether a background image is fixed or scrolls
with the rest of the page.
• values: fixed / scroll
• Background-position: specifies vertical and horizontal position of the
background image
Vertical position: top, center, bottom
Horizontal position: left, center, right
Both can be specified in percentage or other numerical values.
• Examples:
 CSS Box Model
 All HTML elements can be considered as boxes.
 In CSS, the term "box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around every HTML element.
 It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
 In general, CSS Box Model helps to design web page layouts, which are more manageable and easily
editable.
Example
 Cont…
Content - The content of the box, where text and images appear.

Padding - Clears an area around the content. The padding is transparent.

Border - A border that goes around the padding and content.

Margin - Clears an area outside the border. The margin is transparent.

The box model allows us to add a border around elements, and to define space between
elements.

In order to set the width and height (content) of an element correctly in all browsers, you need
to know how the box model works.
 Border
properties
• Allow you to specify the style, color and width of the element
border.
• Border-color: Controls the border color of the section.
• E.g. Border-color: blue;
• Border-style: Controls the style of a border. Values: none, solid,
double.
• E.g. Border-style: solid; dotted; dashed; double and others.
• Border-width: Controls the width of a border.
• E.g. Border-width: 2px;
 Border
properties
• The Border-radius property defines the radius of the
element's corners.
Values: any CSS measurement.
E.g. border-radius: 5px;
• Multiple bolder declaration: allows multiple declaration
on of values.
E.g. border: 2px solid red;
 Margin and padding
• Margin is the space around an element’s border.
• Margin is used to give space outside an element.
• Margin value can be positive or negative.
• Margin: A shorthand property for setting all the margin properties in one
declaration.
• Margin-left: Sets the left margin of an element.
• Margin-right: Sets the right margin of an element.
• Margin-top: Sets the top margin of an element.
• Margin-bottom: Sets the bottom margin of an element.
 Cont…

Example:
P{
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
 Cont…
• Padding: is the space between an element’s border and the
element’s content.
• Padding: adding properties are used to generate space around an
element's content, inside of any defined borders.
Example:
div{
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;}

• Note: Negative values are NOT allowed!

Q &A