diff --git a/css - the complete guide/3. diving_deeper.md b/css - the complete guide/3. diving_deeper.md index 6cbf902..23a6b4f 100644 --- a/css - the complete guide/3. diving_deeper.md +++ b/css - the complete guide/3. diving_deeper.md @@ -317,3 +317,72 @@ Used to style a specific part of an element. For example `::first-letter`, `::af ## Grouping Rules +We can group or combine multiple rules with same code into one to increase reusability: + +```css +.main-nav__item a:hover { + color: white; +} + +.main-nav__item a:active { + color: white; +} + +// CAN BE WRITTEN AS + +.main-nav__item a:hover, +.main-nav__item a:active { + color: white; +} +``` + +We can group as many rules as we need separated by a comma. + + +## Working With Font Weight And Border + +```css +.main-nav__item a { + font-weight: bold; +} + +.main-nav__item a:hover, +.main-nav__item a:active { + color: white; + border-bottom: 5px solid white; +} +``` + + +## Adding And Styling A Call To Action Button + +```css +.main-nav__item--cta a { + color: white; + background: #ff1b68; + padding: 8px 16px; + border-radius: 8px; +} + +.main-nav__item--cta a:hover, +.main-nav__item--cta a:active { + color: #ff1b68; + background: white; + border: none; +} +``` + + +## Adding A Background Image To Our Project + +Use the `url("")` function on `background` property to set a image. `url` takes in a string, which can be path to local file or a link to an image on internet. + +```css +background: url("image.jpg"); +``` + + +## Properties Worth To Remember + +`color`, `background-color`, `display`, `padding`, `border`, `margin`, `width`, `height`. +