CSS is used to specify the presentation and layout of HTML elements, separating these aspects from the content and structure defined in HTML. CSS rules consist of selectors that choose the elements to style, properties that define what aspects to manipulate, and values that set property levels. Styles can be applied via internal, external, and inline CSS. CSS offers benefits like centralized styling, separation of concerns, and improved performance over only using HTML for styling. Common CSS selectors include element, class, ID and pseudo-class selectors. Values use units like pixels, percentages and colors to set property levels.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
A presentation about Lea Verou's book "CSS Secrets", with some examples on codepen.
Content:
- CSS coding tips
- Complex background with background-image and SVG
- Half ellipse
- Pie chart
- Irregular drop shadow
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
Slides zum Talk "HTML und CSS für Designer" für PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Beispiel-Projekt auf Codepen.io: http://codepen.io/Fischaela/details/seKiH/
Beispiel-Projekt auf Github: https://github.com/Fischaela/Pubkon-2014
--
Slides to my talk "HTML & CSS for designers" for PUBKON 2014 (http://2014.pubkon.eu/sessions/michaela-lehr).
Example project on codepen.io: http://codepen.io/Fischaela/details/seKiH/
Example project on Github: https://github.com/Fischaela/Pubkon-2014
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
A presentation about Lea Verou's book "CSS Secrets", with some examples on codepen.
Content:
- CSS coding tips
- Complex background with background-image and SVG
- Half ellipse
- Pie chart
- Irregular drop shadow
CSS is not so easy as many people think, so this presentation is a guide to properly write your CSS code. You'll see about browser's process reflow and repaint, layout, advanced selectors, new units and some useful examples.
Over 150 Primary, Secondary & International commercial real estate markets are covered in the 2013 Year End edition of the Coldwell Banker Commercial Blue Book.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
“A STYLE RULE IS A SET OF HTML TAGS SPECIFYING THE FORMATTING ELEMENTS.”
Style rules can be applied to selected contents of a web page.
A style rule can basically be split into two parts:
(a) Selector: A selector is a string that identifies what elements the corresponding rule applies to and is the first part of the rule.
(b) Declaration: This part of the rule is enclosed within curly brackets. A declaration has two sections separated by a colon. The section before the colon tells the property, and the section after the colon is the value of that property.
Hard to Reach Users in Easy to Reach PlacesMike Crabb
Presentation given at UX Scotland 2019 by Michael Crabb and Rachel Menzies. Work based on the User Centre that is based in the Department of Computing at the University of Dundee
How do we design accessible services for everyone while also caring about the UX? This presentation looks at a model of accessibility that can be used for all users and we show how this works for making accessible UX-friendly tools for television, board gamers, and developers. Presented at UX Scotland 2018
Peer review process of academic publications is introduced and a sample given for how this is carried out within an academic teaching module. Guidance given on best ways to carry out a peer review.
Presentation on designing for different types of accessibility challenges. Permanent, situational, and temporary aspects of accessibility are discussed.
Using Cloud in an Enterprise EnvironmentMike Crabb
Introduction to the different cloud models that exist and how they can be used in an enterprise level environment. Short discussion on UK DPA and its relevance to cloud computing
A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns
Unlocking Business Potential: Tailored Technology Solutions by Prosigns
Discover how Prosigns, a leading technology solutions provider, partners with businesses to drive innovation and success. Our presentation showcases our comprehensive range of services, including custom software development, web and mobile app development, AI & ML solutions, blockchain integration, DevOps services, and Microsoft Dynamics 365 support.
Custom Software Development: Prosigns specializes in creating bespoke software solutions that cater to your unique business needs. Our team of experts works closely with you to understand your requirements and deliver tailor-made software that enhances efficiency and drives growth.
Web and Mobile App Development: From responsive websites to intuitive mobile applications, Prosigns develops cutting-edge solutions that engage users and deliver seamless experiences across devices.
AI & ML Solutions: Harnessing the power of Artificial Intelligence and Machine Learning, Prosigns provides smart solutions that automate processes, provide valuable insights, and drive informed decision-making.
Blockchain Integration: Prosigns offers comprehensive blockchain solutions, including development, integration, and consulting services, enabling businesses to leverage blockchain technology for enhanced security, transparency, and efficiency.
DevOps Services: Prosigns' DevOps services streamline development and operations processes, ensuring faster and more reliable software delivery through automation and continuous integration.
Microsoft Dynamics 365 Support: Prosigns provides comprehensive support and maintenance services for Microsoft Dynamics 365, ensuring your system is always up-to-date, secure, and running smoothly.
Learn how our collaborative approach and dedication to excellence help businesses achieve their goals and stay ahead in today's digital landscape. From concept to deployment, Prosigns is your trusted partner for transforming ideas into reality and unlocking the full potential of your business.
Join us on a journey of innovation and growth. Let's partner for success with Prosigns.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
4. HTML IS USED TO SPECIFY CONTENT AND
STRUCTURE
• CONTENT: TEXT IN PARAGRAPHS, DATA IN TABLES,
IMAGES AND OTHER MEDIA
• STRUCTURE: LOGICAL FLOW OF PAGE
COMPONENTS CONTAINING CONTENT (E.G. DIVS,
SECTIONS HEADERS ETC.)
overview
CASCADING STYLE SHEETS (CSS) ARE USED TO
SPECIFY THE PRESENTATION STYLE AND LAYOUT OF
ELEMENTS WITHIN AN HTML PAGE
• DISTINCT WEB TECHNOLOGY
• NOT PROGRAMMING OR MARK-UP LANGUAGE
• SIMPLE A SEQUENCE OF RULES TO APPLY
5. CSS DECLARES RULES THAT:
• SELECT WHICH HTML ELEMENTS SHOULD BE
STYLED
• SPECIFY THE PROPERTIES TO MANIPULATE
• GIVE VALUES TO THESE PROPERTIES
OPERATION
WEB BROWSERS COMBINE HTML AND CSS TO
RENDER A COMPLETE WEB PAGE
• BOTH MUST BE LINKED TOGETHER
6. • SORT BY SPECIFICITY ALL DECLARATIONS
APPLYING TO A GIVEN ELEMENT.
• THOSE ELEMENTS WITH A HIGHER
SPECIFICITY HAVE MORE WEIGHT THAN
THOSE WITH LOWER SPECIFICITY
• SORT BY ORDER ALL DECLARATIONS APPLYING TO
A GIVEN ELEMENT.
• THE LATER A DECLARATION APPEARS IN THE
STYLE SHEET OR DOCUMENT, THE MORE
WEIGHT IT IS GIVEN
• DECLARATIONS THAT APPEAR IN AN
IMPORTED STYLE SHEET ARE CONSIDERED TO
COME BEFORE ALL DECLARATIONS WITHIN
THE STYLE SHEET THAT IMPORTS THEM.
cascading rules
12. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
13. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
2. CURLY BRACKETS CONTAIN ALL OF THE RULES
FOR THIS SELECTOR
14. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
2. CURLY BRACKETS CONTAIN ALL OF THE RULES
FOR THIS SELECTOR
3. RULES ARE SEPARATED BY A SEMICOLON
15. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
2. CURLY BRACKETS CONTAIN ALL OF THE RULES
FOR THIS SELECTOR
3. RULES ARE SEPARATED BY A SEMICOLON
4. THE PROPERTY OF A RULE DEFINES WHAT ASPECT
OF THE ELEMENT WILL BE AFFECTED
1. COLOUR, FONT, POSITION, BORDERS ETC.)
16. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
2. CURLY BRACKETS CONTAIN ALL OF THE RULES
FOR THIS SELECTOR
3. RULES ARE SEPARATED BY A SEMICOLON
4. THE PROPERTY OF A RULE DEFINES WHAT ASPECT
OF THE ELEMENT WILL BE AFFECTED
1. COLOUR, FONT, POSITION, BORDERS ETC.)
5. THE VALUE OF A RULE SPECIFIES HOW THE
PROPERTY WILL BE AFFECTED
17. SYNTAX RULES TO REMEMBER
SELECTOR1 {
PROPERTY: “VALUE”;
}
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT
THE RULE(S) WILL BE APPLIED TO
2. CURLY BRACKETS CONTAIN ALL OF THE RULES
FOR THIS SELECTOR
3. RULES ARE SEPARATED BY A SEMICOLON
4. THE PROPERTY OF A RULE DEFINES WHAT ASPECT
OF THE ELEMENT WILL BE AFFECTED
1. COLOUR, FONT, POSITION, BORDERS ETC.)
5. THE VALUE OF A RULE SPECIFIES HOW THE
PROPERTY WILL BE AFFECTED
6. PROPERTIES AND THEIR VALUES ARE SEPARATED
BY A COLON
20. OVERCOMES THE LIMITATIONS OF ADDING STYLE
USING HTML ALONE
• BASIC TABLES AND FORMS
VERY SIMPLE WEB TECHNOLOGY (IN TERMS OF
SYNTAX) YET VERY POWERFUL
• ENDLESS COMBINATIONS OF RULES FOR
ELEMENTS
BENEFITS OF CSS
24. • CASCADING STYLE SHEETS (CSS) IS A METHOD OF
SEPARATING A PAGE’S STRUCTURE AND CONTENT
FROM ITS PRESENTATION
• CSS ALLOWS FOR A MUCH RICHER PAGE
APPEARANCE THAN WITH HTML ALONE (NO MORE
TABLES)
• CSS CAN SAVE TIME AS THE APPEARANCE OF THE
ENTIRE PAGE APP CAN BE CREATED AND CHANGED
IN JUST ONE PLACE
• CSS CAN IMPROVE LOAD TIMES AS IT COMPACTLY
STORES THE PRESENTATION CONCERNS OF A PAGE
IN ONE PLACE INSTEAD OF BEING REPEATED
THROUGHOUT THE PAGE
benefits of css
25. • THERE ARE DIFFERENT SELECTOR RULES BEYOND
SIMPLE ELEMENTS
• THERE ARE LOTS OF PROPERTIES AND THEY VARY
ACROSS DIFFERENT HTML ELEMENTS
• THERE ARE MANY PROPERTY/VALUE
COMBINATIONS; NOT ALL OF WHICH WORK AS
EXPECTED
CHALLENGES OF CSS
27. • STYLESHEETS DESCRIBE THE RENDERING OF HTML
ELEMENTS
• THEY SPECIFY STYLISTIC ASPECTS OF INDIVIDUAL
ELEMENTS OR ALL ELEMENTS OF A PARTICULAR
KIND
• A CSS CONSISTS OF A SET OF FORMATTING RULES,
WHICH ARE SPECIFIED IN THE FOLLOWING WAY:
APPLYING CSS
SELECTOR2 {
PROPERTY1: “VALUE”;
PROPERTY2: “VALUE”;
PROPERTY: “VALUE”;
}
28. APPLYING STYLESSELECTOR2 {
PROPERTY1: “VALUE”;
PROPERTY2: “VALUE”;
PROPERTY: “VALUE”;
}
P {
FONT-SIZE: 12PT;
FONT-FAMILY: “VERDANA”;
}
APPLIES TO ALL <P>
ELEMENTS
H1, H2, H3 {
COLOR: RED;
FONT-SIZE: 18PX;
}
APPLIES TO ALL
<H1>,<H2>, AND
<H3> ELEMENTS
29. APPLYING STYLESSELECTOR2 {
PROPERTY1: “VALUE”;
PROPERTY2: “VALUE”;
PROPERTY: “VALUE”;
}
* {
TEXT-ALIGN: LEFT;
}
APPLIES TO ALL
ELEMENTS
#MENU A {
PADDING: 45PX 25PX 0PX 0PX;
B0RDER: NONE;
}
APPLIES TO ALL <A>
ELEMENTS WITH
ID=“MENU
30. APPLYING STYLESSELECTOR2 {
PROPERTY1: “VALUE”;
PROPERTY2: “VALUE”;
PROPERTY: “VALUE”;
}
.menu {
PADDING: 100PX;
}
APPLIES TO ALL
ELEMENTS WITH
CLASS=MENU
LOTS MORE EXIST…HERES A GOOD REFERENCE
http://www.w3schools.com/cssref/css_selectors.asp
32. • INLINE: STYLE INFORMATION IS ADDED DIRECTLY
TO ONE PARTICULAR ELEMENT USING ITS STYLE
ATTRIBUTE
• CSS SYNTAX IS USED AFTER THE STYLE ATTRIBUTE
IN AN HTML TAG
• THIS ONLY EFFECTS THIS ELEMENT,
OTHERS OF THE SAME TYPE ARE NOT EFFECTED.
• USEFUL TO OVERRIDE EXISTING STYLE, BUT
BREAKS THE SEPARATION OF CONTENT AND
PRESENTATION
INLINE CSS SPECIFICATION
<H3 STYLE=“COLOUR: GREEN; FONT-SIZE: 18PT”>
33. • EMBEDDED: STYLE RULES CAN BE SPECIFIED IN
THE <HEAD> SECTION OF THE PAGE
• THESE RULES WILL BE APPLIED TO THE ENTIRE
PAGE
EMBEDDED CSS SPECIFICATION
<html>
<head>
<style>
h3 { color: yellow; font-size: 18pt; }
</style>
</head>
<body>
<h3> This will be yellow font size 18 </h3>
…
</body>
</html>
34. • EXTERNAL: IN A SEPARATE FILE WHICH CAN BE
SHARED BY SEVERAL PAGES. THE FILE EXTENSION
IS “.CSS”
• THIS IS PERHAPS THE BEST METHOD IN TERMS OF:
• SEPARATION OF CONCERNS
• MAINTENANCE
• PERFORMANCE
EXTERNAL CSS SPECIFICATION
<head>
<link rel="stylesheet" href="master.css" type="text/
css">
</head>
36. • CLASS AND ID SELECTORS CAN BE USED FOR
FINER CONTROL
• THIS INVOLVES MORE PLANNING/EFFORT WITH
PAGE MARKUP
• BUT CAN RESULT IN A BETTER USER
EXPERIENCE
• IT IS ALSO VERY IMPORTANT FOR
MANIPULATING ELEMENTS IN JAVASCRIPT
• THE EFFORT ALSO PAYS OFF IF YOU USE
LIBRARIES LIKE JQUERY
SPECIALISATION OF PRESENTATION
37. • USED TO DEFINE A SPECIAL CASE FOR AN
ELEMENT
• IDS ARE MEANT TO UNIQUE AND ONLY USED
ONCE
• HOWEVER, SOME BROWSERS ARE NOT
PARTICULARLY FUSSY
ID SELECTORS
#first-para
{
font-weight: bold;
}
<p id=“first-para”>This
paragraph will be bold-
faced</p>
<p>This will not be bold</p>
38. class SELECTORS
.warning {
font-weight: bold;
}
<p class="warning">This text
will be displayed in bold.</p>
<p>This text will NOT be
displayed in bold.</p>
• CLASS SELECTOR ALLOW YOU TO STYLE ITEMS
WITH THE SAME HTML ELEMENT DIFFERENTLY
• THEY WORK WHEN THE CLASS ATTRIBUTE OF AN
HTML TAG IS GIVEN A NAME
• USED TO STYLE MANY HTML ELEMENTS
39. TAG SELECTORS
h1 {
color: green;
}
p {
color: red;
}
<h1>This will be green</h1>
<p>This will be red</p>
• USED TO STYLE SPECIFIC TAGS
40. grouping
h1, h2, h3 {
color: green;
}
p {
color: red;
}
<h1>This will be green</h1>
<h2>So will this</h2>
<h3>and so will this</h3>
<p>This will be red</p>
• MULTIPLE SELECTORS CAN BE GROUPED
TOGETHER
41. descendant selectors
section.news h1 {
color: green;
}
<section class=news>
<div>
<h1>This will be green</
h1>
</div>
</section>
• USED TO SELECT ELEMENTS THAT ARE
DECEDENTS OF THE ELEMENT IN THE DOCUMENT
TREE
• NOT NECESSARILY DIRECT CHILDREN
42. child selectors
section.news > h1 {
color: green;
}
<section class=news>
<div>
<h1>This will not be
green</h1>
</div>
</section>
• USED TO SELECT CHILD
ELEMENTS THAT ARE
DECEDENTS OF THE
ELEMENT IN THE
DOCUMENT TREE
<section id=news>
<h1>This will be green</h1>
</section>
43. adjacent sibling selectors
h1 + h2 {
color: green;
}
<h1>Green</h1>
<h2>Green</h2>
<p>Not Green</p>
• SELECT THE SIBLING
ELEMENT DIRECTLY
FOLLOWING ANOTHER
ELEMENT
<h1>Not Green</h1>
<p>Not Green</p>
<h2>Not Green</h2>
44. universal selectors
* {
color: blue;
}
<h1>This is blue</h1>
<p>This is blue</p>
<ul>
<li>All the things are blue</li>
</ul>
• USED TO SELECT ELEMENTS THAT ARE
DECEDENTS OF THE ELEMENT IN THE DOCUMENT
TREE
• NOT NECESSARILY DIRECT CHILDREN
46. • WE CAN APPLY EVEN MORE DETAILED CSS TO
ELEMENTS THROUGH THE USE OF PSEUDO
CLASSES
• CAN BE USED TO:
• STYLE AN ELEMENT WHEN A MOUSE IS OVER IT
• STYLE VISITED AND UNVISITED LINKS
• STYLE A FOCUSED ELEMENT
pseudo elements
47. colouring links
/* MOUSE OVER LINK */
A:HOVER {
COLOR: #FF00FF;
}
/* SELECTED LINK */
A:ACTIVE {
COLOR: #0000FF;
}
/* UNVISITED LINK */
A:LINK {
COLOR: #FF0000;
}
/* VISITED LINK */
A:VISITED {
COLOR: #00FF00;
}
50. • WORDS
• AFFECT THE COLOURS, DISTANCES, AND SIZES
OF A WHOLE HOST OF PROPERTIES OF AN
ELEMENTS STYLE
• TEXT-ALIGN: CENTRE;
VALUES AND UNITS
51. • NUMERICAL VALUES
• NORMALLY FOLLOWED BY A UNIT TYPE
• LENGTH UNITS
• INCHES (IN)
• CENTIMETERS (CM)
• MILLIMETERS (MM)
• POINTS (PT)
• PICAS (PI)
• RELATIVE UNITS
• EM IS RELATIVE TO THE GIVEN FONT-SIZE VALUE
• E.G. FONT SIZE IS 14PX, 1EM=14PX
• PX IS (SHOULD) BE THE SIZE OF A PIXEL ON THE
MONITOR
• GENERALLY THE RECOMMENDED UNIT TO USE
VALUES AND UNITS
52. • COLOUR
• NAMED COLOURS (RED)
• FUNCTIONAL RGB (255,0,0)
• HEXADECIMAL RGU CODES (#FF0000)
VALUES AND UNITS
53. recap
purpose of css
syntax of css
benefits of css
APPLYING CSS
USING CSS WITH HTML
CSS Selectors
Pseudo Selectors
CSS Values and Units