WEB

ENGINEERING
Engr. Faryal Baloch
Department of Software Engineering
MUET
 Fair Use Notice

The material used in this presentation i.e., pictures/graphs/text, etc. is solely

intended for educational/teaching purpose, offered free of cost to the students for
use under special circumstances of Online Education due to COVID-19 Lockdown
situation and may include copyrighted material - the use of which may not have
been specifically authorized by Copyright Owners. Its application constitutes Fair
Use of any such copyrighted material as provided in globally accepted law of many
countries. The contents of presentations are intended only for the attendees of the
class being conducted by the presenter.
CSS – Introduction
❑ CSS:
- CSS stands for Cascading Style Sheets.
- Cascading refers to the procedure that determines which style will apply to a certain
section, if you have more than one style rule. In other words, it refers to the way CSS
applies one style on top of another.
- Style how you want a certain part of your page to look. You can set things like color,
margins, font, etc. for things like tables, paragraphs, and headings.
- Sheets are like templates, or a set of rules, for determining how the webpage will look.
- It is one of three cornerstones of web along with HTML and JavaScript.
- CSS and HTML work hand in hand:
- What to Display? HTML sorts out the page structure.
- How To display? CSS defines how HTML elements are displayed.
Why to Use CSS?...
❑ CSS: Allows you to separate Style from Content
Why to Use CSS?...
❑ CSS: Allows you to apply specific styles to specific HTML elements.

CSS CSS

Physical layout Web page

Text

CSS CSS
Headings

Body
Applying a single style sheet to multiple documents
Applying multiple style sheets to a single document
 Why to Use CSS?...
❑ Further Advantages:
- Faster download times: Reduction of file size is about 50% less
than a Web page built with traditional Web design methods.
- Shorter development time: Easily tweak the design of a
thousand-page site with just a few edits of one CSS file
- Greater control over the typography in a Web page: CSS's ability
to control typography better
- Better control over the placement of elements in Web page
CSS Syntax…
❑ Style rule has 3 parts:
- Selector; is an HTML tag at which style will be applied; this could be any tag like <h1> or
<table> etc.
- Property; is a type of attribute of HTML tag; put simply, all the HTML attributes are converted
into CSS properties. They could be color or border etc.
- Value; are assigned to properties; for example, color property can have value either red or
#F1F1F1 etc.

- Notice that declaration block contains one or more properties/declarations, separated by

semicolons.
- Each declaration includes a property name and a value, separated by a colon.
CSS Syntax…
- Multiple words; If the value has multiple words, put the value in quotes

-p {font-family: “sans serif”}

Apply this style to all p

Paragraph element of
element used in this
HTML
document
CSS Syntax…
- Multiple Properties; CSS also allow us the opportunity to define multiple properties within a
single selector.
- In this example, we are defining the text alignment and color properties in the same paragraph
<p> selector.
- When we have multiple properties in the same selector, they must be separated by a
semicolon.

-p { text-align: left; color: red }

Use semicolon for multiple

properties
CSS Syntax…
- Multiple Properties; To make properties more readable, put each on a separate line.
CSS Syntax…
- Grouping Selectors; Selectors can be grouped so that a common property can be specified

h1, h2, h3, h4

{
font-family: Arial;
color: yellow
}

<h1> This is a level 1 heading </h1>

<h2> This is a level 2 heading </h2>
CSS Syntax…
- Descendants; Selectors can be descendants.

p b { color: yellow }

Only those <b> element would be

yellow that are within a <p>
element

<p><b> This would be yellow </b></p>

<b>This would not be yellow</b>
<p>Not this either</p>
CSS Syntax…
- Inheritance; Inheritance refers to the way properties flow through the page. A child element
will usually take on the characteristics of the parent element unless otherwise defined.
CSS Syntax…
- CSS Comments; You can insert comments to help you describe the
style
- Comments open with /* and are closed with */

/* This is a comment */
P { color: red;
/* This is another comment */
Font-family: veranda }
Types of CSS...
❑ Type defines the way we insert style sheet
- INLINE CSS: With an inline style, a unique style is applied to a single element.
- In order to use an inline style, add the style attribute to the relevant tag.
- The example below shows how to create a paragraph with a gray background and white text:

- This method is discouraged, because it makes maintenance of code a nightmare

- Looses the advantage of using CSS
Types of CSS...
❑ EMBEDDED/INTERNAL CSS:
- Internal styles are defined within the <style> element, inside the head section of an HTML page.
- Perhaps best used when a single page requires a unique style sheet
- This method should also be used sparingly, because it also makes the styles hard to maintain across
multiple pages to keep your site consistent.
Types of CSS...
❑ EXTERNAL CSS:
- With this method, all styling rules are contained in a single text file, which is saved with the .css
extension.
- This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the
head section.
- This will keep your code in one place, and allows you to reuse your CSS, so you don't have duplicate
code all over your pages.
CSS Rules Overriding
❑ Applying MULTIPLE style scheets:
- You can use multiple sheets to define the style of your document
- However, when using two style sheets within the same page, internal style sheet
always takes precedence over external style sheet.
- Means any rule defined within <style>...</style> tags will override rules defined in
any external style sheet file.
- In General, cascade is just like waterfall meaning styles are applied from top to
bottom and bottom one will always override the previous one
- Therefore, always remember the ordering in which you want to apply the styles and
import sheets
- Good practice to have internal styles after global styles because internal styles are
more specific to single page and external usually apply to multiple pages
THANK YOU