SlideShare a Scribd company logo
Web Development
CSS Lecture 1
Cascading Style Sheets
CSS
1
2
3
Style Definition
Text Formatting
CSS Basics
CSS Basics
Styles are an electronic publishing invention for dynamically
coding text and other document elements with formatting.
Review example 1 to see how styles can make it easy to make it
consistent
1
CSS Basics1
Defining Styles:
Styles can be defined in several different ways and can be attached to a document
1. Add Style block to the head of a document
<head>
<style type="text/css">
...Style definitions...
</style>
</head>
2. Alternatively style can be contained in a separate document and linked to documents
Using the <link> tag
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>
3. Individual HTML elements can contain styles themselves, and take precedence over
previous two
<ul style="list-style-image: url("images/small-bullet.png");" >
CSS Basics contd.1
Cascading Styles:
Cascading in CSS means, styles can stack, or override each other.
For example, all the documents need to follow the corporate
look and feel in an organization, but HR department use people-
shaped bullets or apply other small changes unique to that
department. See example 2
Style Definitions2
The Style Definition Format:
CSS style definitions all follow the same basic
format. A definition starts with a selector expression
used to match elements within the document(s),
and is followed by one or more style properties and
value sets. Roughly this format approximates the
following structure
selector {
property: value(s);
property: value(s);
...
}
Style Definitions2
Understanding Selectors:
Selectors are patterns that enable a user agent to identify what
elements should get what styles.
For example, following style says, in effect, “if it is a paragraph (p),
then give it this style”
p { text-indent: 2em;}
Style Definitions contd2
Matching elements by type:
The easiest selector to understand is the plain element selector
h1 { color: red;}
h1, h2, h3, 4h, h5, h6 { color: red;}
Single
Multi
Matching using the Universal selector:
Can be used to match any element in the document
* { color: red;}
Matching child, descendant:
tr td ol { color: red;}
tr * ol { color: red;}
Style Definitions contd2
Matching elements by class:
To specify a class to match with a selector, you append a period
and the class name to the selector.
p.dark_bg { color: white;}
*.dark_bg { color: white;}
You can omit the universal selector, specifying only the class
itself (beginning with a period)
.dark_bg { color: white;}
Style Definitions contd2
Matching elements by identifier:
You can also use selectors to match element identifiers – the id
of the element(s)
#txtName { background-color: green;}
Matching elements by specific attributes:
You can use a selector to match any attribute in elements,
not just Class and id.
table[border="3"]
table[border]
Table element with a border attribute set to 3
No matter what the value of the attribute
Style Definitions contd2
Matching child, descendant, and adjacent sibling elements:
The most powerful selector methods match elements by their
relationship to other elements within a document
Understanding document hierarchy:
See Example3 and draw hierarchy diagram out of it
Style Definitions contd2
Ancestors and Descendants:
Are elements that are linked by lineage, no matter the distance
between them.
Parents and Children:
Are elements that are directly connected in lineage.
Siblings:
Are children that share the same, direct parent.
Prepared by: Asgher Ali
Style Definitions contd2
Selecting by hierarchy:
Several selector mechanisms are available that enable you to match
elements by their hierarchy.
div.div2 li Descendant: list all separated by spaces
div.div1 > table Child
table + p Sibling
Prepared by: Asgher Ali
Style Definitions contd2
Using Pseudo-Classes:
Pseudo classes are identifiers that are understood by user agents,
and they apply to elements of certain types without the elements
having to be explicitly styled.
Anchor Styles:
: link Unvisited links
: visited Visited links
: active Active links
: hover The link over which the browser point is hovering
: focus The link that currently has the user interface focus
:link { color: blue;}
:visited { color: red;}
:hover {color: green;}
Prepared by: Asgher Ali
Style Definitions contd2
Pseudo-Elements:
Are another virtual constructs to help apply styles dynamically to
elements with a document.
First Line:
The :first-line pseudo-element specifies a different set of property
values for the first line of elements.
p:first-line { text-decoration: underline;}
Prepared by: Asgher Ali
Style Definitions contd2
Pseudo-Elements:
First Letter:
The :first-letter pseudo-element is used to affect the properties of an elements’s first
Letter.
p.dropcap:first-letter { font-size: 3em;
font-weight: bold; float: left;
border: solid 1px black; padding: .1em;
margin: .2em .2em 0 0;}
Before and After:
You can use the :before and :after pseudo-elements to add additional text to specific
Elements.
.quote:before { content: `"';}
.quote:after { content: `"';}
Prepared by: Asgher Ali
Text Formatting3
Aligning Text:
Controlling horizontal Alignment:
You can use the text-align property to align blocks of text in four
basic ways: left, right, center, or full. See Example 4
Controlling vertical Alignment:
In addition to aligning text horizontally, CSS also enables you to
align text vertically via the vertical-align property. See Example 5
Indenting Text:
<p style="text-indent: 25px;">
Text-indent property indents only the first line
Prepared by: Asgher Ali
Text Formatting contd.3
Controlling Letter and Word spacing:
The letter-spacing and word-spacing properties can be used to control the letter and word
Spacing in an element, respectively. Both properties take an explicit or relative value to
Adjust the spacing – positive values add more space, negative values remove space.
See Example 6
Specifying Capitalization:
You can also use styles to control the capitalization or case of text.
See Example 7
Using Text Decorations:
You can add several different effects to text through CSS.
See Example 8
Prepared by: Asgher Ali
Text Formatting contd.3
Controlling Table Attributes:
Table Borders:
table, table * { border: 1pt solid black;}
All tables and all tables descendants meanin
Each cell, as well as entire table has a border
table * { border: 1pt solid black;} Only table cells have border
table { border: 1pt solid black;} Only table body has borders
Table Border spacing:
To increase the space around table borders, use the border-spacing (much like cellspacing)
and padding CSS Properties.
border-spacing: horizontal_spacing vertical_spacing;
Prepared by: Asgher Ali
Text Formatting contd.3
Collapsing borders:
Creates gridlines instead of distinct individual borders
Border-collapse: separate (default) or collapse
Border on empty cells:
You can use the empty-cells (show or hide) CSS property to control whether the agent
Should or should not show empty cells.
Aligning and Positioning Captions:
CSS can help control the positioning of table caption elements.
caption-side: top | bottom | left | right;
Prepared by: Asgher Ali

More Related Content

What's hot

CSS notes
CSS notesCSS notes
CSS notes
Rajendra Prasad
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
MSA Technosoft
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Unit 2.1
Unit 2.1Unit 2.1
Web Design & Development - Session 3
Web Design & Development - Session 3Web Design & Development - Session 3
Web Design & Development - Session 3
Shahrzad Peyman
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
ghayour abbas
 
Web Design & Development - Session 4
Web Design & Development - Session 4Web Design & Development - Session 4
Web Design & Development - Session 4
Shahrzad Peyman
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
ghayour abbas
 
Css
CssCss
CSS
CSSCSS
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
Week3 css
Week3 cssWeek3 css
Week3 css
Rowena LI
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
Prabu Cse
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
Rafi Haidari
 

What's hot (14)

CSS notes
CSS notesCSS notes
CSS notes
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Web Design & Development - Session 3
Web Design & Development - Session 3Web Design & Development - Session 3
Web Design & Development - Session 3
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
 
Web Design & Development - Session 4
Web Design & Development - Session 4Web Design & Development - Session 4
Web Design & Development - Session 4
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
 

Similar to Web engineering

Csstutorial
CsstutorialCsstutorial
Csstutorial
Ankit Rana
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Shehzad Yaqoob
 
Lec 1
Lec 1Lec 1
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
ZahouAmel1
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.com
vivek698
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Edress Oryakhail
 
Css tutorial
Css tutorial Css tutorial
Css tutorial
Fakhrul Islam Talukder
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Mohamed Idris
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
adelaticleanu
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
kassahungebrie
 
Unit 2.1
Unit 2.1Unit 2.1
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Mukesh Tekwani
 
Css class-02
Css class-02Css class-02
Css class-02
Md Ali Hossain
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
introduction to CSS
introduction to CSSintroduction to CSS
introduction to CSS
Manish jariyal
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
Shawn Calvert
 

Similar to Web engineering (20)

Csstutorial
CsstutorialCsstutorial
Csstutorial
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Lec 1
Lec 1Lec 1
Lec 1
 
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.com
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css tutorial
Css tutorial Css tutorial
Css tutorial
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Css class-02
Css class-02Css class-02
Css class-02
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
 
introduction to CSS
introduction to CSSintroduction to CSS
introduction to CSS
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 

Recently uploaded

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 

Recently uploaded (20)

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 

Web engineering

  • 1. Web Development CSS Lecture 1 Cascading Style Sheets
  • 3. CSS Basics Styles are an electronic publishing invention for dynamically coding text and other document elements with formatting. Review example 1 to see how styles can make it easy to make it consistent 1
  • 4. CSS Basics1 Defining Styles: Styles can be defined in several different ways and can be attached to a document 1. Add Style block to the head of a document <head> <style type="text/css"> ...Style definitions... </style> </head> 2. Alternatively style can be contained in a separate document and linked to documents Using the <link> tag <head> <link rel="stylesheet" type="text/css" href="mystyles.css" /> </head> 3. Individual HTML elements can contain styles themselves, and take precedence over previous two <ul style="list-style-image: url("images/small-bullet.png");" >
  • 5. CSS Basics contd.1 Cascading Styles: Cascading in CSS means, styles can stack, or override each other. For example, all the documents need to follow the corporate look and feel in an organization, but HR department use people- shaped bullets or apply other small changes unique to that department. See example 2
  • 6. Style Definitions2 The Style Definition Format: CSS style definitions all follow the same basic format. A definition starts with a selector expression used to match elements within the document(s), and is followed by one or more style properties and value sets. Roughly this format approximates the following structure selector { property: value(s); property: value(s); ... }
  • 7. Style Definitions2 Understanding Selectors: Selectors are patterns that enable a user agent to identify what elements should get what styles. For example, following style says, in effect, “if it is a paragraph (p), then give it this style” p { text-indent: 2em;}
  • 8. Style Definitions contd2 Matching elements by type: The easiest selector to understand is the plain element selector h1 { color: red;} h1, h2, h3, 4h, h5, h6 { color: red;} Single Multi Matching using the Universal selector: Can be used to match any element in the document * { color: red;} Matching child, descendant: tr td ol { color: red;} tr * ol { color: red;}
  • 9. Style Definitions contd2 Matching elements by class: To specify a class to match with a selector, you append a period and the class name to the selector. p.dark_bg { color: white;} *.dark_bg { color: white;} You can omit the universal selector, specifying only the class itself (beginning with a period) .dark_bg { color: white;}
  • 10. Style Definitions contd2 Matching elements by identifier: You can also use selectors to match element identifiers – the id of the element(s) #txtName { background-color: green;} Matching elements by specific attributes: You can use a selector to match any attribute in elements, not just Class and id. table[border="3"] table[border] Table element with a border attribute set to 3 No matter what the value of the attribute
  • 11. Style Definitions contd2 Matching child, descendant, and adjacent sibling elements: The most powerful selector methods match elements by their relationship to other elements within a document Understanding document hierarchy: See Example3 and draw hierarchy diagram out of it
  • 12. Style Definitions contd2 Ancestors and Descendants: Are elements that are linked by lineage, no matter the distance between them. Parents and Children: Are elements that are directly connected in lineage. Siblings: Are children that share the same, direct parent. Prepared by: Asgher Ali
  • 13. Style Definitions contd2 Selecting by hierarchy: Several selector mechanisms are available that enable you to match elements by their hierarchy. div.div2 li Descendant: list all separated by spaces div.div1 > table Child table + p Sibling Prepared by: Asgher Ali
  • 14. Style Definitions contd2 Using Pseudo-Classes: Pseudo classes are identifiers that are understood by user agents, and they apply to elements of certain types without the elements having to be explicitly styled. Anchor Styles: : link Unvisited links : visited Visited links : active Active links : hover The link over which the browser point is hovering : focus The link that currently has the user interface focus :link { color: blue;} :visited { color: red;} :hover {color: green;} Prepared by: Asgher Ali
  • 15. Style Definitions contd2 Pseudo-Elements: Are another virtual constructs to help apply styles dynamically to elements with a document. First Line: The :first-line pseudo-element specifies a different set of property values for the first line of elements. p:first-line { text-decoration: underline;} Prepared by: Asgher Ali
  • 16. Style Definitions contd2 Pseudo-Elements: First Letter: The :first-letter pseudo-element is used to affect the properties of an elements’s first Letter. p.dropcap:first-letter { font-size: 3em; font-weight: bold; float: left; border: solid 1px black; padding: .1em; margin: .2em .2em 0 0;} Before and After: You can use the :before and :after pseudo-elements to add additional text to specific Elements. .quote:before { content: `"';} .quote:after { content: `"';} Prepared by: Asgher Ali
  • 17. Text Formatting3 Aligning Text: Controlling horizontal Alignment: You can use the text-align property to align blocks of text in four basic ways: left, right, center, or full. See Example 4 Controlling vertical Alignment: In addition to aligning text horizontally, CSS also enables you to align text vertically via the vertical-align property. See Example 5 Indenting Text: <p style="text-indent: 25px;"> Text-indent property indents only the first line Prepared by: Asgher Ali
  • 18. Text Formatting contd.3 Controlling Letter and Word spacing: The letter-spacing and word-spacing properties can be used to control the letter and word Spacing in an element, respectively. Both properties take an explicit or relative value to Adjust the spacing – positive values add more space, negative values remove space. See Example 6 Specifying Capitalization: You can also use styles to control the capitalization or case of text. See Example 7 Using Text Decorations: You can add several different effects to text through CSS. See Example 8 Prepared by: Asgher Ali
  • 19. Text Formatting contd.3 Controlling Table Attributes: Table Borders: table, table * { border: 1pt solid black;} All tables and all tables descendants meanin Each cell, as well as entire table has a border table * { border: 1pt solid black;} Only table cells have border table { border: 1pt solid black;} Only table body has borders Table Border spacing: To increase the space around table borders, use the border-spacing (much like cellspacing) and padding CSS Properties. border-spacing: horizontal_spacing vertical_spacing; Prepared by: Asgher Ali
  • 20. Text Formatting contd.3 Collapsing borders: Creates gridlines instead of distinct individual borders Border-collapse: separate (default) or collapse Border on empty cells: You can use the empty-cells (show or hide) CSS property to control whether the agent Should or should not show empty cells. Aligning and Positioning Captions: CSS can help control the positioning of table caption elements. caption-side: top | bottom | left | right; Prepared by: Asgher Ali