Simple techniques for customizing a Digital Repository Public Interface

using CSS

A hands-on presentation

Background (metaphorical)

What is CSS bull CSS stands for Cascading

Stylesheets bull HTML stylistic shortcut bull Completely reversible bull Allows for branding without

functionality customization

Why did we find it necessary bull Hosted repository solution

(Preservica CE) bull Able to hand-encode html

pages buthellip bull Appearance of standardized

functions not encodable bull Only able to input custom

CSS

Example of results

Example for the demo

CSS crash-course bull 3 types of CSS

ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code

value] [more css code] bull Applying CSS

ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class

bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px

ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself

remember what you did why and how bull Ex I did it because I could

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

Background (metaphorical)

What is CSS bull CSS stands for Cascading

Stylesheets bull HTML stylistic shortcut bull Completely reversible bull Allows for branding without

functionality customization

Why did we find it necessary bull Hosted repository solution

(Preservica CE) bull Able to hand-encode html

pages buthellip bull Appearance of standardized

functions not encodable bull Only able to input custom

CSS

Example of results

Example for the demo

CSS crash-course bull 3 types of CSS

ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code

value] [more css code] bull Applying CSS

ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class

bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px

ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself

remember what you did why and how bull Ex I did it because I could

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

Example of results

Example for the demo

CSS crash-course bull 3 types of CSS

ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code

value] [more css code] bull Applying CSS

ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class

bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px

ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself

remember what you did why and how bull Ex I did it because I could

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

Example for the demo

CSS crash-course bull 3 types of CSS

ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code

value] [more css code] bull Applying CSS

ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class

bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px

ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself

remember what you did why and how bull Ex I did it because I could

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

CSS crash-course bull 3 types of CSS

ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code

value] [more css code] bull Applying CSS

ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class

bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px

ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself

remember what you did why and how bull Ex I did it because I could

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

Tools 1 W3Schools bull What is it

ndash Web developer reference site

ndash Not created by the W3C ndash httpwwww3schoolscom

bull Why use it ndash Books cost money and take

time to read ndash Readily available anywhere

with web access ndash ldquoTry It Yourselfrdquo gives the

ability to try something out ndash More than just CSS

Tool 2 ldquoInspect Elementrdquo bull What is it

ndash A code console (Chrome Firefox IE) for webpages

ndash Allows for modification or insertion of code without changing the file

bull Why use it ndash See how the web page is

structured ndash Identify classes and elements for

manipulation ndash Test out how modifications will

look and feel bull How to access it

ndash Right-click on a webpage and select it from the resulting menu

Tool 3 Notepad bull What to use

ndash An actual notepad for handwritten notes

ndash A good text editor such as Notepad++ Crimson Editor TextWrangler

bull Why ndash You WILL forget how you

saw something done or how you did it

ndash You WILL also forget how you did that really cool thing

ndash To create your CSS file

Method 1 Reverse engineering (aka borrowing code)

bull Why use it

ndash ldquoThatrsquos cool how did you do thatrdquo

bull What it lets you do ndash Look at part or all of the

stylesheet of a website to see what they did

Method 1 Reverse engineering (aka borrowing code)

bull How to do it ndash Right-click the part of the

webpage you are interested in and choose Inspect Element

ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file

ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a

new browser windowtab bull Save the file

bull NOW Puzzle over the code until you figure it out (w3schools helps here)

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull Why use it ndash A standardized system

will re-use classeshtml tags

ndash Branding

bull What it lets you do ndash Select a common

elementclass and apply a change to the entire site

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Tool 3 Notepad bull What to use

ndash An actual notepad for handwritten notes

ndash A good text editor such as Notepad++ Crimson Editor TextWrangler

bull Why ndash You WILL forget how you

saw something done or how you did it

ndash You WILL also forget how you did that really cool thing

ndash To create your CSS file

Method 1 Reverse engineering (aka borrowing code)

bull Why use it

ndash ldquoThatrsquos cool how did you do thatrdquo

bull What it lets you do ndash Look at part or all of the

stylesheet of a website to see what they did

Method 1 Reverse engineering (aka borrowing code)

bull How to do it ndash Right-click the part of the

webpage you are interested in and choose Inspect Element

ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file

ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a

new browser windowtab bull Save the file

bull NOW Puzzle over the code until you figure it out (w3schools helps here)

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull Why use it ndash A standardized system

will re-use classeshtml tags

ndash Branding

bull What it lets you do ndash Select a common

elementclass and apply a change to the entire site

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 1 Reverse engineering (aka borrowing code)

bull Why use it

ndash ldquoThatrsquos cool how did you do thatrdquo

bull What it lets you do ndash Look at part or all of the

stylesheet of a website to see what they did

Method 1 Reverse engineering (aka borrowing code)

bull How to do it ndash Right-click the part of the

webpage you are interested in and choose Inspect Element

ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file

ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a

new browser windowtab bull Save the file

bull NOW Puzzle over the code until you figure it out (w3schools helps here)

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull Why use it ndash A standardized system

will re-use classeshtml tags

ndash Branding

bull What it lets you do ndash Select a common

elementclass and apply a change to the entire site

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 1 Reverse engineering (aka borrowing code)

bull How to do it ndash Right-click the part of the

webpage you are interested in and choose Inspect Element

ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file

ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a

new browser windowtab bull Save the file

bull NOW Puzzle over the code until you figure it out (w3schools helps here)

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull Why use it ndash A standardized system

will re-use classeshtml tags

ndash Branding

bull What it lets you do ndash Select a common

elementclass and apply a change to the entire site

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull Why use it ndash A standardized system

will re-use classeshtml tags

ndash Branding

bull What it lets you do ndash Select a common

elementclass and apply a change to the entire site

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass

bull How to do it ndash Right-click on a part of the page you

want to modify and select Inspect Element

ndash Identify the html elementclass that applies

ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your

CSS file bull Notes

ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other

types of pages on your site as it could affect other things

ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied

ndash Write the code you are testing on a scratchpad so you donrsquot lose it

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 2 Broad strokes (expanded view)

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull Why use it ndash Broad stroke changes donrsquot

work like you need ndash Or apply to too many

things ndash Or not the right things ndash Can make contextual

changes (like when hovering over a link)

bull What it lets you do ndash Identify a very specific

thing and apply changes

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter

bull How to do it ndash Right-click on an element you want to modify and select Inspect

Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors

bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn

ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want

bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Useful tips bull important will over-ride existing

inline CSS ndash Use with caution there could be a

reason bull after and before are used to select a

element and insert something beforeafter that element Great for explanatory text

bull class before element selects all elements with that class

bull Elementclass selects only that specific combination of an element and class

bull background-size 100 will make your background image tile only horizontally

bull Comment A LOT future ldquoborrowersrdquo of code will thank you

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Contact Information

Brian Thomas

Electronic Records Specialist Texas State Library and Archives Commission

bthomastsltexasgov 512-475-3374

Demo (try it on your own computer by downloading from

httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )