Download as PDF, PPTX
Uploaded byRodolfo Melogli
WooCommerce: Intro to CSS
The document provides an introduction to CSS, explaining how to assign styles to HTML elements using various CSS rules and syntax. It covers CSS requirements such as selectors, properties, and the specificity hierarchy, as well as practical instructions for editing CSS using browser developer tools. Additionally, it outlines a customization workflow for applying CSS changes to a WordPress theme.
WooCommerce: Intro to CSS
- 1.
- 2. "CSS" "Cascading Style Sheets":assign styles (e.g. colors, font, width) to HTML "Cascading": which rule applies if more than one HTML element style CustomizeWoo.com
- 3.
- 4. CSS Requirements /1 CustomizeWoo.com ● HTML (w3schools.com/html) ○ "tag" e.g. <p>, <h1>, <a>, <img> ○ "element" e.g. <p>Hello!</p> ○ formatting e.g. <b>This is bold</b> ○ "class" e.g. <p class="style-all-p-tags"> ○ "ID" e.g. <a id="style-this-a-tag"> ○ "inline style" e.g. <p style="color:red">
- 5. CSS Requirements /2 CustomizeWoo.com ● CSS (w3schools.com/css) ○ "syntax" ■ selector { property: value; } ■ h2 { color: red; font-weight: 600; } ○ colors, backgrounds, borders, margin vs padding, "display" (none), "@media" ○ comments: /* comment */
- 6. CSS Requirements /3 CustomizeWoo.com ● Google Chrome (or Firefox) browser ○ right click > "inspect" to see / live-edit CSS of current page ○ edit a property or value and press Enter to see the change ○ by default, CSS modifications are lost when you reload the page
- 7. Google Chrome DevTools > Inspect CustomizeWoo.com
- 8. CSS "Specificity" Hierarchy CustomizeWoo.com 1.!important: a { color: red !important; } 2. Inline: <a style="color: red;"></a> 3. ID: #page-id-661 a { color: red; } 4. Class: a.red { color: red; } 5. Element: a { color: red; } 6. Element (latest): a { color: red; }
- 9. WordPress CSS Instructions forstyling are in the style.css file of your current theme (plus: other theme's CSS files - plus: plugins' CSS - plus: custom CSS) CustomizeWoo.com
- 10. WooCommerce CSS https://docs.woocommerce.com/docu ment/css-structure/ /assets/css: 20+CSS files! CustomizeWoo.com
- 11. CSS Customization Workflow CustomizeWoo.com 1.Task specifications e.g. "ALL <p> to have padding bottom = 10px 20px" 2. Inspect to see CSS call which is giving padding style 3. Change value to 20px @ Chrome Inspector 4. Copy/paste CSS @ Child theme's style.css 5. (Disable cache) Save / Test / +Specificity?