SlideShare a Scribd company logo
1 of 1
Download to read offline
CSS Quick Reference
  Defining styles                                                                  Height and width
  External                                                                         height: 20px; can be px, ems, %
  <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />       width: 100px;

  Embedded                                                                         Margins
  <style type="text/css"> … </style>
                                                                                   top, right, bottom, left
                                                                                   margin: 2px 0px 2px 0px;
  Color                    Bold, italic, and underline         Text align
 p { color: red; }         font-weight: bold;                  text-align: left,   Padding                                       Borders
 p { color: #f00; }        font-style: italic;                 right, center       top right bottom left                         width style color
 p { color: #ff0000; }     text-decoration: underline;         justify;            padding: 2px 0px 2px 0px;                     border: 1px solid black;

  Image alignment                                        Spacing                   IDs                                           Classes
 vertical-align: super, top, text-top, middle,           letter-spacing: 2px;      You should only use an id once/file.          You can use a class many times.
                 baseline, bottom, text-bottom,          word-spacing: 2px;        P#myID { color: #f000; }                      p.myClass { color: #f00; }
 sub                                                                               <p id=“myID”>red text</p>                     <p class="myClass">red text</p>
 Background
                                                                                   #myID { color: #f00; }                        .myClass { color: #f00; }
 background-color:          #f00;                                                  <p id=“myID">red text</p> or                  <h1 class="myClass">red text</h1>
 background-image:          url(image.gif);                                        <h1 id=“myID">red text</h1>                   <p class="myClass">red text</p>
 background-repeat:         repeat, no-repeat, repeat-x, repeat-y
 background-attachment:     scroll, fixed                                          Measurement units                             Link pseudo selectors
 background-position:       top, center, bottom, left, right                       points: 12pt; /* good for print styles */     LoVe/HAte     a:link { color: red; }
                                                                                   pixels: 12px; /* used for spacing */          :link
 Shorthand                                                                         ‘ems’: 1em; /* ≈ 100% */
 background: #fff url(image.gif) no-repeat fixed center;                                                                         :visited
                                                                                   percentages: 120%; /* will inherit */         :focus
                                                                                                                                 :hover
 Lists                                                                             Position, overflow, and visibility            :active
 list-style-type:     circle, decimal, disc, square, lower-roman,                  clear:        both, left, right, none
                      upper-roman, lower-alpha, upper-alpha, none                  float:        left, right, none               Comments
 list-style-position: inside or outside                                            left:         auto, measurement value
 list-style-image: url(image.gif);                                                 top:          auto, measurement value         /* this is a comment */
                                                                                   position:     relative, absolute
                                                                                   overflow:     visible, hidden, scroll, auto
 Font family                                                                       visibility:   visible, hidden
 font-family: Georgia, "Times New Roman", serif;                                   z-index:      auto, integer

© 2012 ClickStart, Inc. | UX + UA Consulting and Training | www.clickstart.net

More Related Content

Similar to CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart

Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptxSamay16
 
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Adam Darowski
 
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]Source Code Halaman Web Radio Stremaing [RAMEN RADIO]
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]Rizki Ogawa
 
Demystifying CSS & WordPress
Demystifying CSS & WordPressDemystifying CSS & WordPress
Demystifying CSS & WordPressJustin Carmony
 
Simplifying CSS With Sass
Simplifying CSS With SassSimplifying CSS With Sass
Simplifying CSS With SassThomas Reynolds
 
ID01 Week 3
ID01 Week 3ID01 Week 3
ID01 Week 3mkontopo
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & CompassAndreas Dantz
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2cori0506
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noHannee92
 
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxExpress HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxssuser454af01
 
cssstyle.cssbody { font-family Montserrat, Arial, sa
cssstyle.cssbody {    font-family Montserrat, Arial, sacssstyle.cssbody {    font-family Montserrat, Arial, sa
cssstyle.cssbody { font-family Montserrat, Arial, saMargenePurnell14
 
Html standards presentation
Html standards presentationHtml standards presentation
Html standards presentationTiago Cardoso
 

Similar to CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart (20)

Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
Horario
HorarioHorario
Horario
 
Estilos Css
Estilos CssEstilos Css
Estilos Css
 
Tmx9
Tmx9Tmx9
Tmx9
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
 
Cloudstack UI Customization
Cloudstack UI CustomizationCloudstack UI Customization
Cloudstack UI Customization
 
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
 
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]Source Code Halaman Web Radio Stremaing [RAMEN RADIO]
Source Code Halaman Web Radio Stremaing [RAMEN RADIO]
 
Demystifying CSS & WordPress
Demystifying CSS & WordPressDemystifying CSS & WordPress
Demystifying CSS & WordPress
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
 
Simplifying CSS With Sass
Simplifying CSS With SassSimplifying CSS With Sass
Simplifying CSS With Sass
 
ID01 Week 3
ID01 Week 3ID01 Week 3
ID01 Week 3
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
 
Theme01
Theme01Theme01
Theme01
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.no
 
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxExpress HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
 
cssstyle.cssbody { font-family Montserrat, Arial, sa
cssstyle.cssbody {    font-family Montserrat, Arial, sacssstyle.cssbody {    font-family Montserrat, Arial, sa
cssstyle.cssbody { font-family Montserrat, Arial, sa
 
Html standards presentation
Html standards presentationHtml standards presentation
Html standards presentation
 

More from Scott DeLoach

Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...Scott DeLoach
 
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...Scott DeLoach
 
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...Scott DeLoach
 
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStart
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStartMicrocontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStart
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStartScott DeLoach
 
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStartCSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStartScott DeLoach
 
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...Scott DeLoach
 
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartExtreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartScott DeLoach
 
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStartAdapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStartScott DeLoach
 
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...Scott DeLoach
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Scott DeLoach
 
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...Scott DeLoach
 
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStartIntro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStartScott DeLoach
 
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...Scott DeLoach
 
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...Scott DeLoach
 
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...Scott DeLoach
 
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...Scott DeLoach
 
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStart
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStartMadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStart
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStartScott DeLoach
 
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStartMadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStartScott DeLoach
 
Embedded User Assistance Best Practices, Scott DeLoach, ClickStart
Embedded User Assistance Best Practices, Scott DeLoach, ClickStartEmbedded User Assistance Best Practices, Scott DeLoach, ClickStart
Embedded User Assistance Best Practices, Scott DeLoach, ClickStartScott DeLoach
 

More from Scott DeLoach (19)

Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
 
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...
Dynamic User Assistance in MadCap Flare - MadWorld 2019, Scott DeLoach, Click...
 
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...
Enhancing MadCap Flare HTML5 Responsive Layout and Design - MadWorld 2019, Sc...
 
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStart
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStartMicrocontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStart
Microcontent Authoring - Nordic Techkomm 2019, Scott DeLoach, ClickStart
 
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStartCSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
 
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...
Advanced Skinless HTML5 Design with MadCap Flare - MadWorld 2018, Scott DeLoa...
 
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartExtreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
 
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStartAdapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart
Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart
 
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...
Best-in-Class Embedded User Assistance - UA Europe 2017, Scott DeLoach, Click...
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
 
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...
Extending MadCap Flare HTML5 Targets with jQuery - MadWorld 2016, Scott DeLoa...
 
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStartIntro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
 
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
 
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...
Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoa...
 
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...
How to Not Let Team Authoring Drive You Crazy - MadWorld 2013, Scott DeLoach,...
 
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...
Using MadCap Flare Reports and MadCap Analyzer - MadWorld 2013, Scott DeLoach...
 
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStart
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStartMadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStart
MadCap Flare Keyboard Shortcuts - Scott DeLoach, ClickStart
 
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStartMadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart
 
Embedded User Assistance Best Practices, Scott DeLoach, ClickStart
Embedded User Assistance Best Practices, Scott DeLoach, ClickStartEmbedded User Assistance Best Practices, Scott DeLoach, ClickStart
Embedded User Assistance Best Practices, Scott DeLoach, ClickStart
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 

Recently uploaded (20)

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 

CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart

  • 1. CSS Quick Reference Defining styles Height and width External height: 20px; can be px, ems, % <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> width: 100px; Embedded Margins <style type="text/css"> … </style> top, right, bottom, left margin: 2px 0px 2px 0px; Color Bold, italic, and underline Text align p { color: red; } font-weight: bold; text-align: left, Padding Borders p { color: #f00; } font-style: italic; right, center top right bottom left width style color p { color: #ff0000; } text-decoration: underline; justify; padding: 2px 0px 2px 0px; border: 1px solid black; Image alignment Spacing IDs Classes vertical-align: super, top, text-top, middle, letter-spacing: 2px; You should only use an id once/file. You can use a class many times. baseline, bottom, text-bottom, word-spacing: 2px; P#myID { color: #f000; } p.myClass { color: #f00; } sub <p id=“myID”>red text</p> <p class="myClass">red text</p> Background #myID { color: #f00; } .myClass { color: #f00; } background-color: #f00; <p id=“myID">red text</p> or <h1 class="myClass">red text</h1> background-image: url(image.gif); <h1 id=“myID">red text</h1> <p class="myClass">red text</p> background-repeat: repeat, no-repeat, repeat-x, repeat-y background-attachment: scroll, fixed Measurement units Link pseudo selectors background-position: top, center, bottom, left, right points: 12pt; /* good for print styles */ LoVe/HAte a:link { color: red; } pixels: 12px; /* used for spacing */ :link Shorthand ‘ems’: 1em; /* ≈ 100% */ background: #fff url(image.gif) no-repeat fixed center; :visited percentages: 120%; /* will inherit */ :focus :hover Lists Position, overflow, and visibility :active list-style-type: circle, decimal, disc, square, lower-roman, clear: both, left, right, none upper-roman, lower-alpha, upper-alpha, none float: left, right, none Comments list-style-position: inside or outside left: auto, measurement value list-style-image: url(image.gif); top: auto, measurement value /* this is a comment */ position: relative, absolute overflow: visible, hidden, scroll, auto Font family visibility: visible, hidden font-family: Georgia, "Times New Roman", serif; z-index: auto, integer © 2012 ClickStart, Inc. | UX + UA Consulting and Training | www.clickstart.net