Divi Selectors
Header and Footer
| Description | Selector |
|---|---|
| Main header before scroll | #main-header { } |
| Main header before scroll | #main-header { } |
| Main header after scroll | #main-header.et-fixed-header { } |
| Logo | #Logo { } |
| Top Navigation | #et-top-navigation { } |
| Main Menu List Item | #top-menu li a { } |
| Main Menu Drop Down Arrow | #top-menu .menu-item-has-children > a:first-child:after { } |
| Search icon | #et_search_icon:before { } |
| Top Header | #top-header |
Top Header - Secondary Menu
| Description | Selector |
|---|---|
| Phone Icon | #et-info-phone:before { } |
| Phone number | #et-info-phone { } |
| Email Icon | #et-info-email:before { } |
| Email Address | #et-info-email { } |
| Facebook icon | .et-social-facebook a.icon:before { } |
| Twitter Icon | .et-social-twitter a.icon:before { } |
| Google + Icon | .et-social-google-plus a.icon:before { } |
| RSS Icon | .et-social-rss a.icon:before { } |
| Top Header Menu Item | #et-secondary-menu > ul > li a { } |
| Top Header Drop Down Arrow | #et-secondary-nav .menu-item-has-children > a:first-child:after { } |
| Cart | .et-cart-info span:before { } |
| Number of Items | .et-cart-info span { } |
Top Header - Navigation
| Description | Selector |
|---|---|
| Top Navigation Sub Menu | #et-secondary-nav .sub-menu { } |
| Top Navigation Drop Down Link | #et-secondary-nav li li a { } |
| Top Navigation link with Drop Down | #et-secondary-nav .menu-item-has-children > a:first-child { } |
Top Header - Sub Menu
| Description | Selector |
|---|---|
| Main Menu Drop Down Link | #top-menu .menu-item-has-children > a:first-child { } |
| Main Header Sub Menu Link | #top-menu li li a { } |
| Main Header Sub Menu | #top-menu .sub-menu { } |
Footer
| Description | Selector |
|---|---|
| Footer Info Text | #footer-info p { } |
| Footer Links | #footer-info a { } |
| Facebook Icon Footer | #footer-bottom .et-social-facebook a.icon:before { } |
| Twitter Icon Footer | #footer-bottom .et-social-twitter a.icon:before { } |
| Google + Icon Footer | #footer-bottom .et-social-google-plus a.icon:before { } |
| RSS Icon Footer | #footer-bottom .et-social-rss a.icon:before { } |
| Icon Container Footer | .et-social-icons { } |
| Bottom Links Container | #footer-bottom .container { } |
| Mobile Menu Icon ( Hamburger ) | .mobile_menu_bar:before { } |
| Mobile Menu Main Link | .et_mobile_menu .menu-item-has-children > a { } |
| Mobile menu Normal Link | .et_mobile_menu li a { } |
| Mobile Menu | .et_mobile_menu { } |
Modules
Accordion
| Description | Selector |
|---|---|
| Open Accordion | .et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all accordions) |
| Closed Accordion | .et_pb_accordion .et_pb_toggle_close { } |
| Accordion Closed Title | .et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { } |
| Accordion Open Title | .et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { } |
| Accordion Content | .et_pb_accordion .et_pb_toggle_content { } |
| Accordion Plus Icon | .et_pb_accordion .et_pb_toggle_title:before { } |
Audio
| Description | Selector |
|---|---|
| Cover Art | .et_pb_audio_cover_art { } |
| Audio Module | .et_pb_audio_module { } |
| Audio Title | .et_pb_audio_module_content h2 { } |
| Controls Container | .et_pb_audio_module .mejs-container .mejs-controls { } |
| Play Button | .et_pb_audio_module .mejs-controls .mejs-play button { } |
| Timer Control | .et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time- handle { } |
| Time Slider | .et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-time-slider { } |
| Time Display | .et_pb_audio_module .et_audio_container .mejs-container .mejs-controls .mejs-time span { } |
| Mute Button | .et_pb_audio_module .mejs-controls .mejs-mute button { } |
| Current Volume Bar | .et_pb_audio_module .mejs-horizontal-volume-current { } |
| Volume Bar Background { } | .et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-volume- slider .mejs-horizontal-volume-total { } |
Bar Counters
| Description | Selector |
|---|---|
| Full bar | .et_pb_counters .et_pb_counter_container { } |
| Amount | .et_pb_counters .et_pb_counter_amount { } |
| Title | .et_pb_counters .et_pb_counter_title { } |
| Counter Amount | .et_pb_counters span.et_pb_counter_amount_number { } |
| Entire Module | .et_pb_counters { } |
Blog
| Description | Selector |
|---|---|
| Post | .et_pb_blog_grid .et_pb_post { } |
| Post Image | .et_pb_blog_grid .et_pb_image_container img { } |
| Post Title | .et_pb_blog_grid .et_pb_post h2 a { } |
| Post Meta | .et_pb_blog_grid .et_pb_post .post-meta { } |
| Post Meta Links | .et_pb_blog_grid .et_pb_post .post-meta a { } |
| Post Preview Text | .et_pb_blog_grid .et_pb_post p:not(.post-meta) { } |
| Full Width Blog | .et_pb_post { } |
| Full Width Blog Image | .et_pb_post a img { } |
| Post Title | .et_pb_post h2 a { } |
| Post Meta | .et_pb_post .post-meta { } |
| Post Meta Links | .et_pb_post .post-meta a { } |
| Full Width Post Preview | .et_pb_post p:not(.post-meta) { } |
Blurbs
| Description | Selector |
|---|---|
| Entire Blurb | .et_pb_blurb { } |
| Blurb Icon | .et_pb_blurb .et-pb-icon { } |
| Blurb Text | .et_pb_blurb .et_pb_blurb_container { } |
| Blurb Title | .et_pb_blurb h4 { } |
| Blurb Icon Border | .et_pb_blurb .et-pb-icon-circle-border { } |
| Blurb Icon Circle | .et_pb_blurb .et-pb-icon-circle { } |
| Blurb Image | .et_pb_main_blurb_image { } |
Call to Actions
| Description | Selector |
|---|---|
| Entire CTA Module | .et_pb_promo { } |
| CTA Title | .et_pb_promo_description h2 { } |
| Description | .et_pb_promo_description p { } |
| CTA Button | .et_pb_promo_button{ } |
| CTA Button on Hover | .et_pb_promo_button:hover { } |
| CTA Arrow on Hover | .et_pb_promo .et_pb_button:after { } |
Circle Counter
| Description | Selector |
|---|---|
| Circle Counter | .et_pb_circle_counter { } |
| Circle Counter Value | .et_pb_circle_counter .percent p { } |
| Circle Counter Title | .et_pb_circle_counter h3 { } |
Contact Form
| Description | Selector |
|---|---|
| Contact Form Title | .et_pb_contact_main_title { } |
| Name | .et_pb_contact_name { } |
| Email Address | .et_pb_contact_email { } |
| Message | .et_pb_contact_message { } |
| Captcha sum span | .et_pb_contact_captcha_question { } |
| Answer | .et_pb_contact_captcha { } |
| Submit Button | .et_pb_contact_submit.et_pb_button { } |
| Container | .et_pb_contact_form_container { } |
Countdown Timer
| Description | Selector |
|---|---|
| Title | .et_pb_countdown_timer .title { } |
| Days Left | .et_pb_countdown_timer .days p.value { } |
| Day(s) label | .et_pb_countdown_timer .days p.label { } |
| Hour(s) label | .et_pb_countdown_timer .hours p.label { } |
| Minute(s) label | .et_pb_countdown_timer .minutes p.label { } |
| Second(s) label | .et_pb_countdown_timer .seconds p.label { } |
| Hours Left | .et_pb_countdown_timer .hours p.value { } |
| Minutes Left | .et_pb_countdown_timer .minutes p.value { } |
| Seconds Left | .et_pb_countdown_timer .seconds p.value { } |
| Separators | .et_pb_countdown_timer .sep { } |
| Entire Module | .et_pb_countdown_timer { } |
Email opt-In
| Description | Selector |
|---|---|
| Module | .et_pb_newsletter.et_pb_subscribe { } |
| Title | .et_pb_newsletter_description h2 { } |
| Description | .et_pb_newsletter_description:not(h2) { } |
| Name | .et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { } |
| Email Address | .et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { } |
| Button | .et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { } |
Portfolio
| Description | Selector |
|---|---|
| Overlay | .et_pb_portfolio_image .et_overlay { } |
| Image | .et_pb_portfolio_image img { } |
| Portfolio Icon | .et_pb_portfolio_image .et_overlay:before { } |
| Title | .et_pb_portfolio_image h3 { } |
| Portfolio Meta | .et_pb_portfolio_image p.post-meta { } |
| Module | .et_pb_fullwidth_portfolio { } /** For full-width portfolio **/ |
Gallery
| Description | Selector |
|---|---|
| Overlay icon | .et_pb_gallery_image .et_overlay:before { } |
| Gallery Grid Title | .et_pb_gallery_grid .et_pb_gallery_title { } |
| Overlay | .et_pb_gallery_image .et_overlay { } |
| Image | .et_pb_gallery_image { } |
Image
| Description | Selector |
|---|---|
| Image background in lightbox | .mfp-bg { } |
| Image in lightbox | img.mfp-img { } |
| Close X | .mfp-image-holder .mfp-close { } |
| Image | .et_pb_image { } |
Login
| Description | Selector |
|---|---|
| Login Module | .et_pb_login { } |
| Title | .et_pb_login h2 { } |
| Description | .et_pb_login .et_pb_newsletter_description:not(h2) { } |
| Username | .et_pb_login #user_login { } |
| Password | .et_pb_login #user_pass { } |
| Forgot Password Text | .et_pb_login .et_pb_forgot_password { } |
| Submit Button | .et_pb_login .et_pb_newsletter_button { } |
Map
| Description | Selector |
|---|---|
| Map Module | .et_pb_map_container { } |
| Map Pin | The pin styling is not set with CSS. You can learn how to change it using this pretty cool article by Dan Mossop. |
Number Counter
| Description | Selector |
|---|---|
| Number Counter | .et_pb_number_counter { } |
| Number | .et_pb_number_counter span.percent-value { } |
| Number Counter Text | .et_pb_number_counter h3 { } |
| With Percentage | .et_pb_number_counter .percent { } |
Person
| Description | Selector |
|---|---|
| Person Module | .et_pb_team_member { } |
| Image | .et_pb_team_member_image img { } |
| Name | .et_pb_team_member_description h4 { } |
| Position | .et_pb_member_position { } |
| Description | .et_pb_team_member_description { } |
| .et_pb_team_member .et_pb_facebook_icon { } | |
| .et_pb_team_member .et_pb_twitter_icon { } | |
| Google + | .et_pb_team_member .et_pb_google_icon { } |
| .et_pb_team_member .et_pb_linkedin_icon { } | |
| All social media icons can be targeted at once with: | .et_pb_team_member .et_pb_font_icon { } |
Pricing Table
| Description | Selector |
|---|---|
| Header Section | .et_pb_pricing_heading { } |
| Featured Table | .et_pb_pricing_table.et_pb_featured_table { } |
| Pricing Section | .et_pb_pricing_content_top { } |
| Price | .et_pb_pricing_table .et_pb_sum { } |
| Per Year | .et_pb_pricing_table .et_pb_frequency { } |
| Dollar Sign | .et_pb_pricing_table .et_pb_dollar_sign { } |
| List Item | .et_pb_pricing_table ul.et_pb_pricing li { }, or when not available .et_pb_pricing_table li.et_pb_not_available { } |
| Button | .et_pb_pricing_table_button { } |
| Pricing Title | .et_pb_pricing_heading h2 { } |
| Best Value | .et_pb_pricing_table .et_pb_best_value { } |
| Pricing Top | .et_pb_pricing_content_top { } |
| Standard pricing Table | .et_pb_pricing_table { } |
Shop
| Description | Selector |
|---|---|
| Product | .et_pb_shop .product { } |
| Overlay | .et_pb_shop .product .et_overlay { } |
| And Image | .et_pb_shop .product img { } |
| Sale | .et_pb_shop .woocommerce span.onsale { } |
| Price | .et_pb_shop span.amount { } |
| Title | .et_pb_shop .woocommerce ul.products li.product h3 { } |
| Star Rating | .et_pb_shop .woocommerce ul.products li.product .star-rating { } |
| Deleted price | .et_pb_shop .woocommerce ul.products li.product .price del { } |
| New Price | .et_pb_shop .woocommerce ul.products li.product .price ins { } |
| Product Image | img.attachment-shop_single { } |
| Product Title | .product_title { } |
| Shop Price | .entry-summary p.price span { } |
| Description | .entry-summary p:not(.price) { } |
| Product Meta | .product_meta { } |
| Quantity | .woocommerce div.product form.cart div.quantity { } |
| Button | .woocommerce .product .cart .button { } |
| Tabs | .woocommerce .product .woocommerce-tabs .tabs li { } |
| Tab Titles | .wc-tab h2 { } |
| Tab description | .wc-tab p { } |
| Tabs ALL | .wc-tabs-wrapper { } |
Slider
| Description | Selector |
|---|---|
| Previous Slide | .et_pb_slider .et-pb-arrow-prev { } |
| Next Slide | .et_pb_slider .et-pb-arrow-next { } |
| Active Slide | .et_pb_slide.et-pb-active-slide { } |
| Slide Image | .et_pb_slider .et_pb_slide_image img { } |
| Slide Description (This usually controls the height of the slider) | .et_pb_slider .et_pb_slide_description { } |
| Slide Title | .et_pb_slide_title a { } |
| Slide Text | .et_pb_slide_content { } |
| Slide Button | .et_pb_slider .et_pb_button { } |
| Active Slide Dot | .et-pb-active-control { } |
| All dots | .et-pb-controllers a { } |
*It is possible to target the dot navigation individually like so…
.et-pb-controllers a:nth-child(1) { }
.et-pb-controllers a:nth-child(2) { }
.et-pb-controllers a:nth-child(3) { }
It is also possible to target the slides individually like so…
.et_pb_slide.et_pb_slide_1 { }
.et_pb_slide.et_pb_slide_2 { }
.et_pb_slide.et_pb_slide_3 { }
Tabs
| Description | Selector |
|---|---|
| Tabs Module | .et_pb_tabs { } |
| All tabs (inside) .et_pb_tabs .et_pb_all_tabs { } | |
| Tab Controls | .et_pb_tabs .et_pb_tabs_controls { } |
| Tabs content | .et_pb_all_tabs .et_pb_active_content { } |
| Active Tab | .et_pb_tabs li.et_pb_tab_active { } |
| Tabs List | .et_pb_tabs li.et_pb_tab_0 { } .et_pb_tabs li.et_pb_tab_1 { } .et_pb_tabs li.et_pb_tab_2 { } |
Tabs are ordered from the 0 to the last, even if you have two or three on one page. So if you had two tab modules on a page and the first one had three tabs then the first tab of the second one would be ‘tab_3’.
Testimonials
| Description | Selector |
|---|---|
| Testimonial Module | .et_pb_testimonial { } |
| Testimonial Portrait | .et_pb_testimonial_portrait { } |
| Description | .et_pb_testimonial_description_inner { } |
| Author | .et_pb_testimonial_author { } |
| Meta | .et_pb_testimonial_meta { } |
| Meta Links | .et_pb_testimonial_meta a { } |
Toggle
| Description | Selector |
|---|---|
| Toggle Open | .et_pb_toggle.et_pb_toggle_open { } |
| Toggle Closed | .et_pb_toggle.et_pb_toggle_close { } |
| Toggle Open Title | .et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_title { } |
| Toggle Text | .et_pb_toggle_content p:last-of-type { } |
| Toggle to close | .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { } |
| Toggle Close Title | .et_pb_toggle_close h5.et_pb_toggle_title { } |
| Toggle Closed Title | .et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { } |
Video Slider
| Description | Selector |
|---|---|
| Video | .et_pb_video_slider .et_pb_video_wrap { } |
| Video Overlay | .et_pb_video_slider .et_pb_video_overlay_hover { } |
| Carousel Item | .et_pb_video_slider .et_pb_carousel_item { } |
| Carousel | .et_pb_video_slider .et-carousel-group { }l |
Basic Property Reference
| Property | Description |
|---|---|
| align-content | Specifies the alignment between the lines inside a flexible container when the items do not use all available space |
| align-items | Specifies the alignment for items inside a flexible container |
| align-self | Specifies the alignment for selected items inside a flexible container |
| all | Resets all properties (except unicode-bidi and direction) |
| animation | A shorthand property for all the animation-* properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies a name for the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of an animation |
| backface-visibility | Defines whether or not the back face of an element should be visible when facing the user |
| background | A shorthand property for all the background-* properties |
| background-attachment | Sets whether a background image scrolls with the rest of the page, or is fixed |
| background-blend-mode | Specifies the blending mode of each background layer (color/image) |
| background-clip | Defines how far the background (color or image) should extend within an element |
| background-color | Specifies the background color of an element |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies the origin position of a background image |
| background-position | Specifies the position of a background image |
| background-repeat | Sets if/how a background image will be repeated |
| background-size | Specifies the size of the background images |
| border | A shorthand property for border-width, border-style and border-color |
| border-bottom | A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color |
| border-bottom-color | Sets the color of the bottom border |
| border-bottom-left-radius | Defines the radius of the border of the bottom-left corner |
| border-bottom-right-radius | Defines the radius of the border of the bottom-right corner |
| border-bottom-style | Sets the style of the bottom border |
| border-bottom-width | Sets the width of the bottom border |
| border-collapse | Sets whether table borders should collapse into a single border or be separated |
| border-color | Sets the color of the four borders |
| border-image | A shorthand property for all the border-image-* properties |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |
| border-image-slice | Specifies how to slice the border image |
| border-image-source | Specifies the path to the image to be used as a border |
| border-image-width | Specifies the width of the border image |
| border-left | A shorthand property for all the border-left-* properties |
| border-left-color | Sets the color of the left border |
| border-left-style | Sets the style of the left border |
| border-left-width | Sets the width of the left border |
| border-radius | A shorthand property for the four border-*-radius properties |
| border-right | A shorthand property for all the border-right-* properties |
| border-right-color | Sets the color of the right border |
| border-right-style | Sets the style of the right border |
| border-right-width | Sets the width of the right border |
| border-spacing | Sets the distance between the borders of adjacent cells |
| border-style | Sets the style of the four borders |
| border-top | A shorthand property for border-top-width, border-top-style and border-top-color |
| border-top-color | Sets the color of the top border |
| border-top-left-radius | Defines the radius of the border of the top-left corner |
| border-top-right-radius | Defines the radius of the border of the top-right corner |
| border-top-style | Sets the style of the top border |
| border-top-width | Sets the width of the top border |
| border-width | Sets the width of the four borders |
| bottom | Sets the elements position, from the bottom of its parent element |
| box-decoration-break | Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. |
| box-shadow | Attaches one or more shadows to an element |
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
| break-after | Specifies the page-, column-, or region-break behavior after the generated box |
| break-before | Specifies the page-, column-, or region-break behavior before the generated box |
| break-inside | Specifies the page-, column-, or region-break behavior inside the generated box |
| caption-side | Specifies the placement of a table caption |
| caret-color | Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable |
| @charset | Specifies the character encoding used in the style sheet |
| clear | Specifies on which sides of an element floating elements are not allowed to float |
| clip | Clips an absolutely positioned element |
| color | Sets the color of text |
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns, balanced or not |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies the column width |
| columns | A shorthand property for column-width and column-count |
| content | Used with the :before and :after pseudo-elements, to insert generated content |
| counter-increment | Increases or decreases the value of one or more CSS counters |
| counter-reset | Creates or resets one or more CSS counters |
| cursor | Specifies the mouse cursor to be displayed when pointing over an element |
| direction | Specifies the text direction/writing direction |
| display | Specifies how a certain HTML element should be displayed |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
| filter | Defines effects (e.g. blurring or color shifting) on an element before the element is displayed |
| flex | A shorthand property for the flex-grow, flex-shrink , and the flex-basis properties |
| flex-basis | Specifies the initial length of a flexible item |
| flex-direction | Specifies the direction of the flexible items |
| flex-flow | A shorthand property for the flex-direction and the flex-wrap properties |
| flex-grow | Specifies how much the item will grow relative to the rest |
| flex-shrink | Specifies how the item will shrink relative to the rest |
| flex-wrap | Specifies whether the flexible items should wrap or not |
| float | Specifies whether or not a box should float |
| font | A shorthand property for the font-style, font-variant, font-weight, font-size/line-height , and the font-family properties |
| @font-face | A rule that allows websites to download and use fonts other than the "web-safe" fonts |
| font-family | Specifies the font family for text |
| font-feature-settings | Allows control over advanced typographic features in OpenType fonts |
| @font-feature-values | Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType |
| font-kerning | Controls the usage of the kerning information (how letters are spaced) |
| font-language-override | Controls the usage of language-specific glyphs in a typeface |
| font-size | Specifies the font size of text |
| font-size-adjust | Preserves the readability of text when font fallback occurs |
| font-stretch | Selects a normal, condensed, or expanded face from a font family |
| font-style | Specifies the font style for text |
| font-synthesis | Controls which missing typefaces (bold or italic) may be synthesized by the browser |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-variant-alternates | Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values |
| font-variant-caps | Controls the usage of alternate glyphs for capital letters |
| font-variant-east-asian | Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese) |
| font-variant-ligatures | Controls which ligatures and contextual forms are used in textual content of the elements it applies to |
| font-variant-numeric | Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers |
| font-variant-position | Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font |
| font-weight | Specifies the weight of a font |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns , and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start , grid-column-start , grid-row-end , and grid-column-end properties |
| rid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows , grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box |
| height | Sets the height of an element |
| hyphens | Sets how to split words to improve the layout of paragraphs |
| image-rendering | Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled |
| @import | Allows you to import a style sheet into another style sheet |
| isolation | Defines whether an element must create a new stacking content |
| justify-content | specifies the alignment between the items inside a flexible container when the items do not use all available space |
| @keyframes | Specifies the animation code |
| left | Specifies the left position of a positioned element |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-break | Specifies how/if to break lines |
| line-height | Sets the line height |
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |
| margin | Sets all the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| @media | Sets the style rules for different media types/devices/sizes |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| mix-blend-mode | Specifies how an element's content should blend with its direct parent background |
| object-fit | Specifies how the contents of a replaced element should be fitted to the box established by its used height and width |
| object-position | Specifies the alignment of the replaced element inside its box |
| opacity | Sets the opacity level for an element |
| order | Sets the order of the flexible item, relative to the rest |
| orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element |
| outline | A shorthand property for the outline-width, outline-style , and the outline-color properties |
| outline-color | Sets the color of an outline |
| outline-offset | Offsets an outline, and draws it beyond the border edge |
| outline-style | Sets the style of an outline |
| outline-width | Sets the width of an outline |
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) |
| overflow-x | Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area |
| overflow-y | Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area |
| padding | A shorthand property for all the padding-* properties |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |
| page-break-after | Sets the page-breake behavior after an element |
| page-break-before | Sets the page-breake behavior before an element |
| page-break-inside | Sets the page-breake behavior inside an element |
| perspective | Gives a 3D-positioned element some perspective |
| perspective-origin | Defines at which position the user is looking at the 3D-positioned element |
| pointer-events | Defines whether or not an element reacts to pointer events |
| position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed) |
| quotes | Sets the type of quotation marks for embedded quotation |
| resize | Defines if (and how) an element is resizable by the user |
| right | Specifies the right position of a positioned element |
| scroll-behavior | Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump |
| tab-size | Specifies the width of a tab character |
| table-layout | Defines the algorithm used to lay out table cells, rows, and columns |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" |
| text-combine-upright | Specifies the combination of multiple characters into the space of a single character |
| text-decoration | Specifies the decoration added to text |
| text-decoration-color | Specifies the color of the text-decoration |
| text-decoration-line | Specifies the type of line in a text-decoration |
| text-decoration-style | Specifies the style of the line in a text decoration |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-justify | Specifies the justification method used when text-align is "justify" |
| text-orientation | Defines the orientation of the text in a line |
| text-overflow | Specifies what should happen when text overflows the containing element |
| text-shadow | Adds shadow to text |
| text-transform | Controls the capitalization of text |
| text-underline-position | Specifies the position of the underline which is set using the text-decoration property |
| top | Specifies the top position of a positioned element |
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| transition | A shorthand property for all the transition-* properties |
| transition-delay | Specifies when the transition effect will start |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| user-select | Specifies whether the text of an element can be selected |
| vertical-align | Sets the vertical alignment of an element |
| visibility | Specifies whether or not an element is visible |
| white-space | Specifies how white-space inside an element is handled |
| widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element |
| width | Sets the width of an element |
| word-break | Specifies how words should break when reaching the end of a line |
| word-spacing | Increases or decreases the space between words in a text |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next lin |
| writing-mo | Specifies hether lines of text are laid out horizontally or verticall |
| z-index | Sets the stack order of a positioned element |
| Property | Description | |
|---|---|---|
| .class | .intro | Selects all elements with class="intro" |
| #id | #firstname | Selects the element with id="firstname" |
| * | * | Selects all elements |
| element | p | Selects all p elements |
| element,element | div, p | Selects all div elements and all |
| elements element | div p | Selects all p elements inside elements |
| element>element | div > p | Selects all p elements where the parent is a element |
| element+element | div + p | Selects all p elements that are placed immediately after < div > elements |
| element1~element2 | p ~ ul | Selects every ul element that are preceded by a element |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target=" _blank " |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word " flower " |
| [attribute | =value] | [lang=en] |
| [attribute^=value] | a[href^="https"] | Selects every a element whose href attribute value begins with "https" |
| [attribute$=vale] | a[href$=".pdf"] | Selects every a element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every a element whose href attribute value contains the substring "w3schools" |
| :active | a:active | Selects the active link |
| ::after | p::after | Insert something after the content of each p element |
| ::before | p::before | Insert something before the content of each p element |
| :checked | input:checked | Selects every checked input element |
| :default | input:default | Selects the default input element |
| :disabled | input:disabled | Selects every disabled input element |
| :empty | p:empty | Selects every p element that has no children (including text nodes) |
| :enabled | input:enabled | Selects every enabled input element |
| :first-child | p:first-child | Selects every p element that is the first child of its parent |
| ::first-letter | p::first-letter | Selects the first letter of every p element |
| ::first-line | p::first-line | Selects the first line of every < p > element |
| :first-of-type | p:first-of-type | Selects every < p > element that is the first element of its parent |
| :focus | input:focus | Selects the input element which has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
| :invalid | input:invalid | Selects all input elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every p element with a lang attribute equal to "it" (Italian) |
| :last-child | p:last-child | Selects every p element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every p element that is the last element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a p element |
| :nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every p element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every p element that is the second p element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent |
| :only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent |
| :only-child | p:only-child | Selects every p element that is the only child of its parent |
| :optional | input:optional | Selects input elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
| ::placeholder | input::placeholder | Selects input elements with placeholder text |
| :read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
| :read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| :required | input:required | Selects input elements with the "required" attribute specified |
| :root | :root | Selects the document's root element |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all input elements with a valid value |
| :visited | a:visited | Selects all visited links |
CSS Selectors
| Selector | Example | Description |
|---|---|---|
| .class | .intro | Selects all elements with class="intro" |
| #id | #firstname | Selects the element with id=" firstname" |
| * | * | Selects all elements |
| element | p | Selects all p elements |
| element,element | div, p | Selects all div elements and all p elements |
| element element | div p | Selects all p elements inside div elements |
| element>element | div > p | Selects all p elements where the parent is a div element |
| element+element | div + p | Selects all p elements that are placed immediately after div elements |
| element1~element2 | p ~ ul | Selects every < ul> element that are preceded by a p element |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target=" _blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute | =value] | [lang |
| [attribute^=value] | a[href^="https"] | Selects every a element whose href attribute value begins with "https " |
| [attribute$=value] | a[href$=".pdf"] | Selects every a element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every a element whose href attribute value contains the substring "w3schools" |
| :active | a:active | Selects the active link |
| ::after | p::after | Insert something after the content of each p element |
| ::before | p::before | Insert something before the content of each p element |
| :checked | input:checked | Selects every checked input element |
| :default | input:default | Selects the default input element |
| :disabled | input:disabled | Selects every disabled input element |
| :empty | p:empty | Selects every p element that has no children (including text nodes) |
| :enabled | input:enabled | Selects every enabled input element |
| :first-child | p:first-child | Selects every p element that is the first child of its parent |
| ::first-letter | p::first-letter | Selects the first letter of every p element |
| ::first-line | p::first-line | Selects the first line of every p element |
| :first-of-type | p:first-of-type | Selects every p element that is the first p element of its parent |
| :focus | input:focus | Selects the input element which has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
| :invalid | input:invalid | Selects all input elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every p element with a lang attribute equal to "it" (Italian) |
| :last-child | p:last-child | Selects every p element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every p element that is the last p element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a p element |
| :nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every p element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every p element that is the second p element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent |
| :only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent |
| :only-child | p:only-child | Selects every p element that is the only child of its parent |
| :optional | input:optional | Selects input elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
| ::placeholder | input::placeholder | Selects input elements with placeholder text |
| :read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
| :read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| :required | input:required | Selects input elements with the "required" attribute specified |
| :root | :root | Selects the document's root element |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all input elements with a valid value |
| :visited | a:visited | Selects all visited links |
CSS Units
| Relative Lengths | |
|---|---|
| m | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| x | Relative to the x-height of the current font (rarely used) |
| h | Relative to width of the "0" (zero) |
| em | Relative to font-size of the root element |
| w | Relative to 1% of the width of the viewport* |
| h | Relative to 1% of the height of the viewport* |
| min | Relative to 1% of viewport's* smaller dimension |
| max | Relative to 1% of viewport's* larger dimension |
| % | Relative to the parent element |
| Absolute Lengths | Example |
|---|---|
| cm | centimeters |
| m | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
Color values
| Hexadecimal Colors | A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. |
| RGBA Colors | RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color is specified with the rgba() function, which has the following syntax: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). |
| HSL Colors | SL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. An HSL color value is specified with the hsl() function, which has the following syntax: hsl(hue, saturation, lightness) Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white. |
Source https://www.w3schools.com/cssref/css_colors_legal.asp