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

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
“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
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
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
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
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
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
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
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
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
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
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
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 

Recently uploaded (20)

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
“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...
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
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
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
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
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
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
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
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
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 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