diff --git a/guide/english/css/background-opacity/index.md b/guide/english/css/background-opacity/index.md index d35b700e72..ece4a2b635 100644 --- a/guide/english/css/background-opacity/index.md +++ b/guide/english/css/background-opacity/index.md @@ -48,16 +48,15 @@ You have to add the following CSS property to achieve the transparency levels. opacity:0.0; } ``` + Alternatively you can use a transparent rgba value like this: ```css - .class-name{ background-color: rgba(0,0,0,.5); } - ``` +``` The example above sets the background to be black with 50% opacity. The last value of an rgba value is the alpha value. An alpha value of 1 equals 100%, and 0.5 (.5 for short) equals 50%. We use this method to add transparency to an element without affecting the content inside. - #### Transparent Hover Effect The opacity property is often used together with the **:hover** selector to change the opacity on mouse-over: @@ -88,10 +87,8 @@ Using the rgba value is most preferable when the background has content like tex The example above sets the background with a 50% opacity using hex alpha code. The alpha digit is the last two numbers `80`. The formats are sometimes referred to as #RRGGBBAA and #RGBA and the the AA part is a hex representation of 0-100. For example the hex alpha code of 0% is `00` and the hex alpha code of 100% is `FF`. [A codepen example to show hex alpha values](https://codepen.io/chriscoyier/pen/XjbzAW) - [A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/) - #### More Information: + [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) diff --git a/guide/english/css/background-size/index.md b/guide/english/css/background-size/index.md index 732206535d..0109b10a1b 100644 --- a/guide/english/css/background-size/index.md +++ b/guide/english/css/background-size/index.md @@ -23,9 +23,9 @@ the second one will be set to auto by default. To set this property on multiple background images, separate the values by a comma: ```css .multiple { - background-image: url(1.png), url(2.png); - background-size: 3px 3px, cover; - /* first image is 3x3 px, second image covers the whole area */ + background-image: url(1.png), url(2.png); + background-size: 3px 3px, cover; + /* first image is 3x3 px, second image covers the whole area */ } ``` diff --git a/guide/english/css/background/index.md b/guide/english/css/background/index.md index 2cab6d7f89..b03bb7237c 100644 --- a/guide/english/css/background/index.md +++ b/guide/english/css/background/index.md @@ -9,22 +9,22 @@ The `background-color` property allows you to choose the color of your element ( Here is an example of setting the background color for a web page to green. ```css - body { - background-color: green; - } +body { + background-color: green; +} ``` ![fullbackground](https://user-images.githubusercontent.com/26467304/31036038-845567f2-a538-11e7-8e6c-8a52bb0d44b8.png) -Here is an example of setting the background colors for two elements. This will set the background of the header -to purple and the rest of the page to blue. +Here is an example of setting the background colors for two elements. This will set the background of the header to purple and the rest of the page to blue. ```css - body { - background-color: blue; - } - h1 { - background–color: purple; - } +body { + background-color: blue; +} + +h1 { + background–color: purple; +} ``` ![twobackground](https://user-images.githubusercontent.com/26467304/31036152-0607936a-a539-11e7-9e9f-a5e60ade042d.png) @@ -120,7 +120,7 @@ body { background: url("barn.jpg") no-repeat right top; } ``` -You can leave out properties you don’t need when using the shorthand property, but the properties +You can leave out properties you don’t need when using the shorthand property, but the properties must be used in a certain order. The order is: * color * image @@ -135,7 +135,7 @@ body { background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); } ``` -The first image (or gradient) specified is the most on top, the second comes after, and so on. +The first image (or gradient) specified is the most on top, the second comes after, and so on. If one of the elements is not correct due to its URL or its syntax, the whole line will be ignored by the browser. ### Other Resources diff --git a/guide/english/css/before-selector/index.md b/guide/english/css/before-selector/index.md index d7d5ddb706..f98cd943f8 100644 --- a/guide/english/css/before-selector/index.md +++ b/guide/english/css/before-selector/index.md @@ -10,9 +10,9 @@ Let's look at some examples: ```css -p::before { - content: ""; - border: solid 5px #ccc +p::before { + content: ""; + border: solid 5px #ccc; } span.comment::before{ @@ -34,7 +34,7 @@ span.comment::before{ ``` -In the example above we are prepending a grey border before every paragraph element on a page and we are also prepending the words comment in blue before every span element with the class comment. +In the example above we are prepending a grey border before every paragraph element on a page and we are also prepending the words comment in blue before every span element with the class comment. > You can check out this demo here https://jsfiddle.net/398by400/ @@ -42,9 +42,9 @@ In the example above we are prepending a grey border before every paragraph elem `::before` is one of the CSS pseudo-elements selectors, which are used to style specified parts of an element. In this case, we can insert content before some HTML element from CSS. Although we will see the content in the page, it is not part of the DOM, what means that we can't manipulate it from Javascript. One trick to solve this handicap: passing the content with a data attribute and use jQuery to manipulate it. Here is an example of use: ```css - p::before { - content: "Hello "; - } +p::before { + content: "Hello "; +} ``` ```html diff --git a/guide/english/css/borders/index.md b/guide/english/css/borders/index.md index 50a644c6ed..5450fb8216 100644 --- a/guide/english/css/borders/index.md +++ b/guide/english/css/borders/index.md @@ -21,7 +21,7 @@ The properties that can be set are (in order): It does not matter if one of the values above is missing. For example, the following is valid CSS: -```css +```css border: solid red; ``` @@ -33,15 +33,14 @@ The `border-style` property can be set to a wide range of different border types - `dashed` - Sets a dashed border. - `solid` - Sets a solid border. - `double` - Sets a double border. -- `groove` - Sets a 3D grooved border. -- `ridge` - Sets a 3D ridged border. -- `inset` - Sets a 3D inset border. +- `groove` - Sets a 3D grooved border. +- `ridge` - Sets a 3D ridged border. +- `inset` - Sets a 3D inset border. - `outset` - Sets a 3D outset border. - `none` - Sets no border. - `hidden` - Sets a hidden border. Each side of the border doesn't need to match. - Each side can be styled separately: ```css border-top-style: solid; @@ -82,7 +81,6 @@ p { ### Border Color - Now for the creative aspect of CSS Borders! With the use of the `border-color` property, you will be able to create customized borders to fit the flow and layout of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types. @@ -107,7 +105,6 @@ p { ``` ### Border-Radius - The `border-radius` property allows the corners of a border to be rounded. `border-radius` takes a length as its value which determines the degree of curvature for each corner of the element. The length can be in px or %. ```css border-radius: 25px; @@ -147,8 +144,8 @@ While it is nice that CSS allows a web developer to be very specific in creating Example: ```css ``` diff --git a/guide/english/css/box-shadow/index.md b/guide/english/css/box-shadow/index.md index 5cd63af571..7edb46a15b 100644 --- a/guide/english/css/box-shadow/index.md +++ b/guide/english/css/box-shadow/index.md @@ -14,10 +14,10 @@ A box shadow can be described with several properties including: ### Syntax: ```css - div { - box-shadow: none | [inset? && [ ? ? ? ] ]# - } - ``` +div { + box-shadow: none | [inset? && [ ? ? ? ] ]# +} +``` * #### inset (default: none) If not specified, the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the `inset` keyword changes the shadow to one inside the frame. @@ -27,10 +27,10 @@ These are two `length` values to set the shadow offset. specifies the * #### blur-radius (default: 0) This is a third `length` value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp). - + * #### spread-radius (default: 0) This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element). - + * #### color This value is used to set the color of the shadow, usually defined with hex `#000000`, rgba value `rgba(55,89,88,0.8)` or rgb value `rgb(55,89,88)`. @@ -39,11 +39,11 @@ This value is used to set the color of the shadow, usually defined with hex `#00 To maximize compatibility, it is recommended that you declare box shadow properties for `moz-appearance` and `webkit`, this extends the normal syntax to: ```css - div{ - box-shadow: none | [inset? && [ ? ? ? ] ]# - -moz-box-shadow: none | [inset? && [ ? ? ? ] ]# - -webkit-box-shadow: none | [inset? && [ ? ? ? ] ]# - } +div{ + box-shadow: none | [inset? && [ ? ? ? ] ]# + -moz-box-shadow: none | [inset? && [ ? ? ? ] ]# + -webkit-box-shadow: none | [inset? && [ ? ? ? ] ]# +} ``` However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track. @@ -89,10 +89,10 @@ It uses very similar code, but with inset value, which displays shadow inside th ```css div { - width: 200px; - height: 50px; - background-color: #333; - box-shadow: inset 10px 10px 5px #ccc, 10px 10px 5px #ccc; + width: 200px; + height: 50px; + background-color: #333; + box-shadow: inset 10px 10px 5px #ccc, 10px 10px 5px #ccc; } ``` diff --git a/guide/english/css/breakpoints/index.md b/guide/english/css/breakpoints/index.md index ca4489d0d5..50997b8ae8 100644 --- a/guide/english/css/breakpoints/index.md +++ b/guide/english/css/breakpoints/index.md @@ -3,7 +3,7 @@ title: Breakpoints --- ## Overview -A CSS Breakpoint is a specific point in which a website's layout changes, based on a [Media Query](https://guide.freecodecamp.org/css/css3-media-queries) +A CSS Breakpoint is a specific point in which a website's layout changes, based on a [Media Query](https://guide.freecodecamp.org/css/css3-media-queries) becoming active. Generally, you specify a breakpoint when you want to re-adapt the website's layout to the browser viewport's size; mostly, to the viewport's width. @@ -26,7 +26,7 @@ Breakpoints are broadly set on basis of either of the following. It's quite apparent that all of our devices do not have the same screen widths/sizes. It is now a design decision to include a set of particular devices and code the css rules accordingly. We already have enough devices to worry about, and when a new one comes out with a different width, going back to your CSS and adding a new breakpoint all over again is time-consuming. -Here's an example +Here's an example ``` /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ @@ -111,7 +111,7 @@ This is the most preferred choice while making or writing the breakpoint rules. } ``` -**Note** +**Note** Always try to create breakpoints based on your own content, not devices. Break them to a logical width rather than a random width and keep them to a manageable number, so modifying remains simple and clear. @@ -119,16 +119,16 @@ Always try to create breakpoints based on your own content, not devices. Break t What we have started with is from the greater than 1200px, a common laptop screen's width. You may also have noticed that we mentioned 'greater than', meaning that we are in a way using something like an '**if-then**' statement. -Let's turn it into CSS code: +Let's turn it into CSS code: ```css .text1 { - font-size: 16px; + font-size: 16px; } @media (min-width: 1200px) { - .text1 { - font-size: 20px; - } + .text1 { + font-size: 20px; + } } ``` @@ -137,14 +137,14 @@ Let's turn it into CSS code: **Tip**: you may see on a common CSS Framework called 'Bootstrap', that they have adopted **'min-width' and up** in their Bootstrap v4.0, as compared to their old Bootstrap v3.0 using **'max-width' and down**. This is only a **preference**, and there is nothing wrong with saying '*this* size and less than' versus '*this* size and greater than'. -It is perfectly fine to use `@media (max-width) {}` . Here is an example: +It is perfectly fine to use `@media (max-width) {}` . Here is an example: ```css .text1 { - font-size: 20px; + font-size: 20px; } @media (max-width: 1199px) { - font-size: 16px; + font-size: 16px; } ``` diff --git a/guide/english/css/class-selector/index.md b/guide/english/css/class-selector/index.md index d307f7a306..ca130bf35c 100644 --- a/guide/english/css/class-selector/index.md +++ b/guide/english/css/class-selector/index.md @@ -7,10 +7,12 @@ A Class Selector is used in a CSS file to apply style to the HTML elements with To select elements with a specific class, we use a full stop `.` or "period" character, with the name of the class. For example +```css .center { - text-align: center; - color: red; + text-align: center; + color: red; } +``` Here, all HTML elements with `class="center"` will be red and center-aligned. @@ -52,5 +54,3 @@ h1.test, h2.test { **Tips: No space between multiple classes.** #### More Information: CSS Syntax and Selectors: w3schools - - diff --git a/guide/english/css/comments-in-css/index.md b/guide/english/css/comments-in-css/index.md index 82e19f85c7..17aefba2c2 100644 --- a/guide/english/css/comments-in-css/index.md +++ b/guide/english/css/comments-in-css/index.md @@ -3,23 +3,18 @@ title: Comments in CSS --- ## Comments in CSS -Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn't execute. +Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn't execute. The comment syntax in CSS works for both single and multi-line comments. You can add as many comments to your stylesheet as you like. ```css /* - This is - a multi-line - comment + This is + a multi-line + comment */ /* This is a single line comment*/ -.group:after { - content: ""; - display: table; - clear: both; -} ``` By using CSS comments to make your stylesheets more readable, the CSS will be easier to maintain in the future for you or another developer. @@ -30,7 +25,7 @@ You can also make your comments more readable by stylizing it. ```css /* *** -* SECTION FOR H2 STYLE +* SECTION FOR H2 STYLE *** * A paragraph where I give information * about everything that someone who reads the code @@ -47,11 +42,11 @@ You can add as many comments to your stylesheet as you like. It’s good practic Comments should be used everyday in your CSS to keep in maintainable and readable by any dev who dives into said CSS. Here are a few exmples to get you started of CSS comments you can use in your daily work to make your life that bit easier. -``` css +```css /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ CSS TABLE OF CONTENTS - + 1.0 - Reset 2.0 - Fonts 3.0 - Globals @@ -83,12 +78,12 @@ Here are a few exmples to get you started of CSS comments you can use in your da /**************************************************************************** 6.0 - Body */ -/************************************************************************ -5.1 - Sliders */ - -/************************************************************************ -5.2 - Imagery */ - + /************************************************************************ + 6.1 - Sliders */ + + /************************************************************************ + 6.2 - Imagery */ + /**************************************************************************** 7.0 - Footer */ ``` @@ -103,7 +98,7 @@ Here's how region works: /*#region Header */ .header { - font-size: 12px; + font-size: 12px; } /*#endregion */ @@ -112,13 +107,13 @@ Here's how region works: ------------------------------------------- */ .footer { - height: 20px; + height: 20px; } /*#endregion */ -```` +``` ### More Information: * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) * [CSS Comments by Adam Roberts](https://www.sitepoint.com/css-comments/) -* [CSS Guidelines](https://cssguidelin.es/#commenting) +* [CSS Guidelines](https://cssguidelin.es/#commenting) diff --git a/guide/english/css/css-buttons/index.md b/guide/english/css/css-buttons/index.md index a1853e77dd..36544f04b1 100644 --- a/guide/english/css/css-buttons/index.md +++ b/guide/english/css/css-buttons/index.md @@ -119,7 +119,7 @@ button { To animate a button on click use 'button:active': -``` +```css .button { display: inline-block; padding: 15px 25px; @@ -167,4 +167,3 @@ In many cases buttons will have to link to an url. As we can't add an href attri #### More Information: * https://www.w3schools.com/css/css3_buttons.asp * https://www.w3schools.com/howto/howto_css_animate_buttons.asp - diff --git a/guide/english/css/css-display/index.md b/guide/english/css/css-display/index.md index dc18fc4e59..ceb978cbba 100644 --- a/guide/english/css/css-display/index.md +++ b/guide/english/css/css-display/index.md @@ -6,19 +6,19 @@ title: CSS Display The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are: ```css - .none {display: none} - .block {display: block} - .inline-block {display: inline-block} - .inline {display: inline} - .flex {display: flex} - .inline-flex {display: inline-flex} - .inline-table {display: inline-table} - .table {display: table} - .inherit {display: inherit} - .initial {display: initial} + .none {display: none} + .block {display: block} + .inline-block {display: inline-block} + .inline {display: inline} + .flex {display: flex} + .inline-flex {display: inline-flex} + .inline-table {display: inline-table} + .table {display: table} + .inherit {display: inherit} + .initial {display: initial} ``` -The `display:none` property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. `display: none` will not only hide the element, but all other elements on the page will behave as if that element does not exist. This is the biggest difference between this property and the `visibility: hidden` property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible. +The `display:none` property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. `display: none` will not only hide the element, but all other elements on the page will behave as if that element does not exist. This is the biggest difference between this property and the `visibility: hidden` property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible. These keyword values are grouped into six categories: @@ -29,7 +29,7 @@ These keyword values are grouped into six categories: * `````` * `````` -### More Information: +### More Information: - [MDN - display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - [caniuse - Browser Support](http://caniuse.com/#search=display) diff --git a/guide/english/css/css-images/index.md b/guide/english/css/css-images/index.md index df6130a21a..664b72b008 100644 --- a/guide/english/css/css-images/index.md +++ b/guide/english/css/css-images/index.md @@ -18,7 +18,7 @@ The `img` element will be rendered by default in most browsers to be displayed a ``` img { - display: inline-block; + display: inline-block; } ``` diff --git a/guide/english/css/css-preprocessors/index.md b/guide/english/css/css-preprocessors/index.md index 65cd442646..58a62c9103 100644 --- a/guide/english/css/css-preprocessors/index.md +++ b/guide/english/css/css-preprocessors/index.md @@ -7,30 +7,30 @@ title: CSS Preprocessors CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make its usage easier, developers often turn to using preprocessors such as SASS or LESS. -CSS Preprocessors compile the code which is written using a special compiler, and then use that to create a css file, which can then be refereneced by the main HTML document. When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place, but you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you choose to do so. +CSS Preprocessors compile the code which is written using a special compiler, and then use that to create a css file, which can then be refereneced by the main HTML document. When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place, but you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you choose to do so. -Of course, CSS Preprocessors also offer other features as well. Many of the features offered are incredibly similar across preprocessors, with only slight variances in syntax. Thus, you can choose pretty much anyone you wish, and will be able to achieve the same things. Some of the more useful features are: +Of course, CSS Preprocessors also offer other features as well. Many of the features offered are incredibly similar across preprocessors, with only slight variances in syntax. Thus, you can choose pretty much anyone you wish, and will be able to achieve the same things. Some of the more useful features are: ### Variables -One of the most commonly used item in any programming language is the variable, something which CSS notably lacks. By having variables at your disposal, you may define a value once, and reuse if throughout the entire program. An example of this in SASS would be: +One of the most commonly used item in any programming language is the variable, something which CSS notably lacks. By having variables at your disposal, you may define a value once, and reuse if throughout the entire program. An example of this in SASS would be: ```SASS $yourcolor: #000056 .yourDiv { color: $yourcolor; } -``` +``` By declaring the ```SASS yourcolor``` variable once, it is now possible to reuse this same exact color throughout the entire document without ever having to retype the definition. ### Loops -Another common item in languages are loops, something else CSS lacks. Loops can be used to repeat the same instructions multiple times without having to be reentered multiple times. An example with SASS would be: +Another common item in languages are loops, something else CSS lacks. Loops can be used to repeat the same instructions multiple times without having to be reentered multiple times. An example with SASS would be: -```SASS +```SASS @for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; - } - } + } +} ``` This loop saves us from having the to write the same code multiple times to change the margin size. @@ -43,12 +43,12 @@ Yet another feature which CSS lacks are If/Else statements. These will run a set background color: white; } ``` -Here, the background color will change color depending on the width of the page's body. +Here, the background color will change color depending on the width of the page's body. ### Mixins There are probably portions of your styling you would like to reuse. Mixins allow you to group any number of properties under one common name. You declare mixin with the @mixin and use it with the @include . +These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versitile tools. Many web developers use them, and it is highly recommended to learn at least one of them. -These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versatile tools. Many web developers use them, and it is highly recommended to learn at least one of them. #### More Information: SASS: http://sass-lang.com/ diff --git a/guide/english/css/css3-backgrounds/index.md b/guide/english/css/css3-backgrounds/index.md index 82393f0107..a28d2cc2be 100644 --- a/guide/english/css/css3-backgrounds/index.md +++ b/guide/english/css/css3-backgrounds/index.md @@ -12,7 +12,7 @@ The CSS `background` shorthand property is used to define multiple properties li The `background-color` property specifies the background color of an element. ```css -   background-color : #F00; + background-color : #F00; ``` ### Background Image @@ -22,7 +22,7 @@ The `background-image` property specifies an image to use as background of an el By default, the image repeats itself to cover the entire surface of the element. ```css -   background-image: url("GitHub-Mark.png"); + background-image: url("GitHub-Mark.png"); ``` ### Background Image - Repetition @@ -31,25 +31,25 @@ By default, the `background-image` property repeats on the X and Y axis, to cove If you want to set an axis, like X axis, use `background-repeat` property type: ```css -   background-image: url("GitHub-Mark.png"); - background-repeat: repeat-x; + background-image: url("GitHub-Mark.png"); + background-repeat: repeat-x; ``` But sometimes you don't want to have your background image cover the whole surface, so you've to specify it by typing: ```css -   background-image: url("GitHub-Mark.png"); - background-repeat: no-repeat; + background-image: url("GitHub-Mark.png"); + background-repeat: no-repeat; ``` ### Background Image - Position -You can specify the position of the background by typing : +You can specify the position of the background by typing : ```css -   background-image: url("GitHub-Mark.png"); - background-repeat: no-repeat; - background-position : left bottom; + background-image: url("GitHub-Mark.png"); + background-repeat: no-repeat; + background-position : left bottom; ``` It will set your background image at the bottom left of the element. @@ -59,10 +59,10 @@ It will set your background image at the bottom left of the element. If you do not want the background image to scroll with the rest of the page, use the `background-attachement` property: ```css -   background-image: url("GitHub-Mark.png"); - background-repeat: no-repeat; - background-position: left bottom; - background-attachment: fixed; +  background-image: url("GitHub-Mark.png"); + background-repeat: no-repeat; + background-position: left bottom; + background-attachment: fixed; ``` ### Shorthand property @@ -70,7 +70,7 @@ If you do not want the background image to scroll with the rest of the page, use You can pass all the properties in one super-property: ```css -   background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom; + background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom; ``` When you use this shorthand property, it must be in this order: @@ -84,7 +84,7 @@ When you use this shorthand property, it must be in this order: It doesn't matter if one property is missing, so long as the order is maintained: ```css -   background: url("GitHub-Mark.png") no-repeat left bottom; +  background: url("GitHub-Mark.png") no-repeat left bottom; ``` This will work even if the color and the attachment are missing. diff --git a/guide/english/css/css3-gradients/index.md b/guide/english/css/css3-gradients/index.md index 60aeee3a85..90ecc95fe6 100644 --- a/guide/english/css/css3-gradients/index.md +++ b/guide/english/css/css3-gradients/index.md @@ -30,12 +30,12 @@ The following example shows a linear gradient that starts at the top. It starts @@ -66,12 +66,12 @@ The following example shows a linear gradient that starts from the left. It star @@ -106,12 +106,12 @@ The following example shows a linear gradient that starts at top left (and goes diff --git a/guide/english/css/css3-media-queries/index.md b/guide/english/css/css3-media-queries/index.md index 51ded3d3e5..b73a115e24 100644 --- a/guide/english/css/css3-media-queries/index.md +++ b/guide/english/css/css3-media-queries/index.md @@ -21,9 +21,9 @@ The thought process should be: ### The basic syntax ```css - @media only screen and (min-width: 768px) { - p {padding: 30px;} - } +@media only screen and (min-width: 768px) { + p {padding: 30px;} +} ``` The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width.

@@ -32,9 +32,9 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px ```css - @media only screen and (min-height: 768px) and (orientation: landscape) { - p {padding: 30px;} - } +@media only screen and (min-height: 768px) and (orientation: landscape) { + p {padding: 30px;} +} ``` The `p` tag will have a padding of 30px as soon as the screen reaches min 768px height and its orientation is landscape. @@ -42,9 +42,9 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px ### The OR syntax ```css - @media only screen and (min-width: 768px), (min-resolution: 150dpi) { - p {padding: 30px;} - } +@media only screen and (min-width: 768px), (min-resolution: 150dpi) { + p {padding: 30px;} +} ``` The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width or its resolution reaches min 150dpi. @@ -57,25 +57,25 @@ Beyond the core uses of media queries for mobile-first web design shown above, m 1. Adjusting for screen readers that convert website text to speech for the visually impaired (for example, ignoring non-essential text). ```css - @media speech { - /* ... */ - } + @media speech { + /* ... */ + } ``` 2. Allowing for more graceful zooming in for those with minor visual impairments, such as many elderly people. 3. Allowing smoother experiences for those who prefer or need less animation to read a page. ```css - @media (prefers-reduced-motion: reduce) { - .animation { - animation: none; - -webkit-animation: none; - } + @media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + -webkit-animation: none; } + } ``` 4. Restyling a page for when it's printed as opposed to read on a screen. ```css - @media print { - /* ... */ - } + @media print { + /* ... */ + } ``` ### More Information diff --git a/guide/english/css/dropdowns/index.md b/guide/english/css/dropdowns/index.md index 031d446b6b..5812298fa0 100644 --- a/guide/english/css/dropdowns/index.md +++ b/guide/english/css/dropdowns/index.md @@ -47,27 +47,27 @@ You need the separate div classes to create the button, and another div to separ ```html
- +
- +
- + - +
- +
- +
- + ×
- + @@ -77,58 +77,58 @@ You need the separate div classes to create the button, and another div to separ - +
- +
- +
``` ```css #myNav1 { - height: 0; - width: 50%; - position: fixed; - z-index: 6; - top: 0; - left: 0; - background-color: #ffff; - overflow: hidden; - transition: 0.3s; - opacity: 0.85; + height: 0; + width: 50%; + position: fixed; + z-index: 6; + top: 0; + left: 0; + background-color: #ffff; + overflow: hidden; + transition: 0.3s; + opacity: 0.85; } #myNav2 { - height: 0; - width: 50%; - position: fixed; - z-index: 6; - bottom: 0; - right: 0; - background-color: #ffff; - overflow: hidden; - transition: 0.3s; - opacity: 0.85; + height: 0; + width: 50%; + position: fixed; + z-index: 6; + bottom: 0; + right: 0; + background-color: #ffff; + overflow: hidden; + transition: 0.3s; + opacity: 0.85; } .overlay-content { - position: relative; - width: 100%; - text-align: center; - margin-top: 30px; + position: relative; + width: 100%; + text-align: center; + margin-top: 30px; } #myNav1-content{ - top: 12%; - left: 5%; - display: none; + top: 12%; + left: 5%; + display: none; } #myNav2-content{ - top: 12%; - right: 10%; - display: none; + top: 12%; + right: 10%; + display: none; } ``` diff --git a/guide/english/css/fonts/index.md b/guide/english/css/fonts/index.md index 3d136be0da..37224841a4 100644 --- a/guide/english/css/fonts/index.md +++ b/guide/english/css/fonts/index.md @@ -11,7 +11,7 @@ It works with a *fallback* system, meaning if your browser does not support the ```css p { - font-family: "Times New Roman", Times, serif; + font-family: "Times New Roman", Times, serif; } ``` In the above example, "Times New Roman" is the *family-name* of the font, while "serif" is the *generic-name*. Generic names are used as a fallback mechanism for preserving style if the family-name is unavailable. A generic name should always be the last item in the list of font family names. @@ -42,15 +42,15 @@ This property has 3 values: ```css .normal { - font-style: normal; -} + font-style: normal; +} .italic { - font-style: italic; + font-style: italic; } .oblique { - font-style: oblique; + font-style: oblique; } ``` @@ -67,19 +67,19 @@ There are different types of font size values: ```css .with-pixels { - font-size: 14px; + font-size: 14px; } .with-ems { - font-size: 0.875em; + font-size: 0.875em; } .with-absolute { - font-size: large; + font-size: large; } .with-percentage { - font-size: 80%; + font-size: 80%; } ``` @@ -90,7 +90,7 @@ The `font-weight`property specifies the weight (or boldness) of the font. Accept ```css p { - font-weight: bold + font-weight: bold } ``` diff --git a/guide/english/css/image-galleries/index.md b/guide/english/css/image-galleries/index.md index a0183b1e1d..c582732589 100644 --- a/guide/english/css/image-galleries/index.md +++ b/guide/english/css/image-galleries/index.md @@ -10,24 +10,24 @@ You can use CSS to create you own image galleries. @@ -69,4 +69,3 @@ div.desc { #### More Information: https://www.w3schools.com/css/css_image_gallery.asp - diff --git a/guide/english/css/image-opacity-and-transparency/index.md b/guide/english/css/image-opacity-and-transparency/index.md index 00d1520063..e19442415a 100644 --- a/guide/english/css/image-opacity-and-transparency/index.md +++ b/guide/english/css/image-opacity-and-transparency/index.md @@ -3,7 +3,7 @@ title: Image Opacity and Transparency --- ## Image Opacity and Transparency -The ```opacity``` property allows you to make an image transparent by lowering how opaque it is. +The ```opacity``` property allows you to make an image transparent by lowering how opaque it is. ```Opacity``` takes a value between 0.0 and 1.0. @@ -12,15 +12,15 @@ The ```opacity``` property allows you to make an image transparent by lowering h Example: ```css img { - opacity: 0.3; - } - ``` - -Include ```filter: alpha(opacity=x)``` for IE8 and earlier. `x` takes a value from 0-100. + opacity: 0.3; +} +``` + +Include ```filter: alpha(opacity=x)``` for IE8 and earlier. The x takes a value from 0-100. ```css img { - opacity: 0.3; - filter: alpha(opacity=30); + opacity: 0.3; + filter: alpha(opacity=30); } ``` @@ -34,12 +34,12 @@ You can pair ```opacity``` with ```:hover``` to create a dynamic mouse-over effe Example: ```css img { - opacity: 0.3; - filter: alpha(opacity=30); + opacity: 0.3; + filter: alpha(opacity=30); } img:hover { - opacity: 1.0; - filter: alpha(opacity=100); + opacity: 1.0; + filter: alpha(opacity=100); } ``` [Here's a codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/) @@ -50,8 +50,8 @@ You can create the opposite effect with less code since the image is 1.0 opacity Example: ```css img:hover { - opacity: 0.3; - filter: alpha(opacity=30); + opacity: 0.3; + filter: alpha(opacity=30); } ``` [Here's a codepen example to show transparency on mouse-over](https://codepen.io/lvcoulter/full/xXBQoR/) @@ -59,8 +59,4 @@ img:hover { #### More Information: - w3schools.com: [CSS Opacity/Transparency](https://www.w3schools.com/css/css_image_transparency.asp) - - MDN Web Docs: [Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) - - - diff --git a/guide/english/css/layout/display-property/index.md b/guide/english/css/layout/display-property/index.md index 6bef2b3c54..bc5afe56d8 100644 --- a/guide/english/css/layout/display-property/index.md +++ b/guide/english/css/layout/display-property/index.md @@ -22,15 +22,15 @@ The `display` property specifies the type of box used for an HTML element. There ```css .myBox { - display: block; + display: block; } .myContainer { - display: flex; + display: flex; } .inlineList ul > li { - display: inline; + display: inline; } ``` diff --git a/guide/english/css/layout/float-and-clear/index.md b/guide/english/css/layout/float-and-clear/index.md index 42ce070434..2268214dab 100644 --- a/guide/english/css/layout/float-and-clear/index.md +++ b/guide/english/css/layout/float-and-clear/index.md @@ -18,12 +18,12 @@ The `float` property can have one of the following values: `inherit` - The element inherits the float value of its parent In its simplest use, the `float` property can be used to wrap text around images. -#### Float in Picture: +#### Float in Picture: ![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "css-tricks-float-img") ``` img { - float: right; + float: right; } ``` This example specifies that an image should float to the right in a page: @@ -31,14 +31,14 @@ This example specifies that an image should float to the right in a page: ![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "float img web") ``` img { - float: left; + float: left; } ``` This example specifies that an image should float to the left in a page: ``` img { - float: none; + float: none; } ``` @@ -64,7 +64,7 @@ When clearing floats, you should match the `clear` to the `float`. If an element Source: CSS-TRICS ``` div { - clear: left; + clear: left; } ``` ![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "clear footer image") diff --git a/guide/english/css/layout/grid-layout/index.md b/guide/english/css/layout/grid-layout/index.md index 324700bdf3..d3b59b922d 100644 --- a/guide/english/css/layout/grid-layout/index.md +++ b/guide/english/css/layout/grid-layout/index.md @@ -3,7 +3,7 @@ title: Grid Layout --- ## Grid Layout -CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is [supported by all major browsers](https://caniuse.com/#feat=css-grid) and provides a way to position items on the page and move them around. +CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is [supported by all major browsers](https://caniuse.com/#feat=css-grid) and provides a way to position items on the page and move them around. It can automatically assign items to _areas_, size and resize them, take care of creating columns and rows based on a pattern you define, and doing all the calculations using the newly introduced `fr` unit. @@ -20,7 +20,7 @@ It can automatically assign items to _areas_, size and resize them, take care of - Grid and Flex are not mutually exclusive. You can use both on the same project. -### Checking browser compatability with `@supports` +### Checking browser compatability with `@supports` Ideally, when you build a site, you'd design it with Grid and use Flex as a fallback. You can find out if your browser supports Grid with the `@support` CSS rule (aka feature query). Here's an example: @@ -41,7 +41,7 @@ Ideally, when you build a site, you'd design it with Grid and use Flex as a fall To make any element a grid, you need to assign its `display` property to `grid`, like so: ```css -.conatiner { +.container { display: grid; } ``` @@ -60,7 +60,7 @@ grid-template-rows: auto 300px; Areas ```css -grid-template-areas: +grid-template-areas: "a a a a" "b c d e" "b c d e" diff --git a/guide/english/css/layout/the-position-property/index.md b/guide/english/css/layout/the-position-property/index.md index ce872c16db..a275686527 100644 --- a/guide/english/css/layout/the-position-property/index.md +++ b/guide/english/css/layout/the-position-property/index.md @@ -5,7 +5,7 @@ title: The Position Property The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position property specifies the type of positioning method used for an element. -The position proprty isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow. +The position property isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow. There are five different position values: @@ -20,5 +20,3 @@ Elements are then positioned using the top, bottom, left, and right properties. #### More Information: The is a good article to read up to understand more about the position property. - - diff --git a/guide/english/css/margins/index.md b/guide/english/css/margins/index.md index dfcdd4f4cc..c5afd0c0a8 100644 --- a/guide/english/css/margins/index.md +++ b/guide/english/css/margins/index.md @@ -10,7 +10,7 @@ Margin values are set using lengths or percentages or `auto` or `inherit` keywor ## Syntax ```css .element { - margin: margin-top || margin-right || margin-bottom || margin-left; + margin: margin-top || margin-right || margin-bottom || margin-left; } ``` @@ -23,10 +23,10 @@ This property may be specified using one, two, three, or four values. ```css /* Apply to all four sides */ margin: 1em; - + /* top and bottom | left and right */ margin: 5% 10%; - + /* top | left and right | bottom */ margin: 1em 2em 2em; diff --git a/guide/english/css/navigation-bars/index.md b/guide/english/css/navigation-bars/index.md index 5bdf9a2ba6..78fcdc60d1 100644 --- a/guide/english/css/navigation-bars/index.md +++ b/guide/english/css/navigation-bars/index.md @@ -10,9 +10,9 @@ Navigation Bars are mostly made up of `
    ` lists that are horizontally arrange While styling the navigation bars, it's common to remove the extra spacing created by the `
      ` and `
    • ` tags as well as the bulletpoints that are automatically inserted: ```css - list-style-type: none; - margin: 0px; - padding: 0px; + list-style-type: none; + margin: 0px; + padding: 0px; ``` **Example:** @@ -21,41 +21,41 @@ There are two parts to any navigation: the HTML and the CSS. This is just a quic ```html ``` ```css /* Define the main Navigation block */ .myNav { - display: block; - height: 50px; - line-height: 50px; - background-color: #333; + display: block; + height: 50px; + line-height: 50px; + background-color: #333; } /* Remove bullets, margin and padding */ .myNav ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } .myNav li { - float: left; - /* Or you can use display: inline; */ + float: left; + /* Or you can use display: inline; */ } /* Define the block styling for the links */ .myNav li a { - display: inline-block; - text-align: center; - padding: 14px 16px; + display: inline-block; + text-align: center; + padding: 14px 16px; } /* This is optional, however if you want to display the active link differently apply a background to it */ .myNav li a.active { - background-color: #3786E1; + background-color: #3786E1; } ``` @@ -64,5 +64,3 @@ There are two parts to any navigation: the HTML and the CSS. This is just a quic #### More Information: More Navigation Examples: [W3Schools](https://www.w3schools.com/css/css_navbar.asp) - - diff --git a/guide/english/css/object-fit/index.md b/guide/english/css/object-fit/index.md index 830c215eef..b6dffd3bf2 100644 --- a/guide/english/css/object-fit/index.md +++ b/guide/english/css/object-fit/index.md @@ -12,7 +12,7 @@ Basically we use the `object-fit` property to define how it stretch or squish an ## Syntax ```css .element { - object-fit: fill || contain || cover || none || scale-down; + object-fit: fill || contain || cover || none || scale-down; } ``` diff --git a/guide/english/css/overflow/index.md b/guide/english/css/overflow/index.md index c0e836ad95..a204a01fc8 100644 --- a/guide/english/css/overflow/index.md +++ b/guide/english/css/overflow/index.md @@ -50,10 +50,10 @@ For example, a given block-level element (`
      `) set to 300px wide, that conta * `overflow-y`: Allows the user to scroll through the content that extends beyond the width of the box. ```css - .box-element { - overflow-x: scroll; - overflow-y: auto; - } +.box-element { + overflow-x: scroll; + overflow-y: auto; +} ``` And the `.box-element` will look like this: ![Example Image](https://s26.postimg.org/ff2kmdfzd/5-_Xand_Y.png) diff --git a/guide/english/css/padding/index.md b/guide/english/css/padding/index.md index 646d686610..547bd2bedd 100644 --- a/guide/english/css/padding/index.md +++ b/guide/english/css/padding/index.md @@ -10,7 +10,7 @@ Padding values are set using lengths, percentages, or the `inherit` keyword, and ## Syntax ```css .element { - padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left]; + padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left]; } ``` @@ -24,10 +24,10 @@ This property may be specified using one, two, three, or four values. /* em refers to the current font size of an element */ /* Apply to all four sides */ padding: 1em; - + /* top and bottom | left and right */ padding: 5% 10%; - + /* top | left and right | bottom */ padding: 1em 2em 2em; diff --git a/guide/english/css/properties/background-color-property/index.md b/guide/english/css/properties/background-color-property/index.md index cf1758b5ca..26aab5be82 100644 --- a/guide/english/css/properties/background-color-property/index.md +++ b/guide/english/css/properties/background-color-property/index.md @@ -3,21 +3,21 @@ title: Background Color Property --- ## Background Color Property -You use the `background-color` property to set the background color of an element. You can either use a color value (color name, hexadecimal value, RGB/RGBA value, HSL/HSLA value) or the keyword `transparent`. +You use the `background-color` property to set the background color of an element. You can either use a color value (color name, hexadecimal value, RGB/RGBA value, HSL/HSLA value) or the keyword `transparent`. **Example:** ```css body { - background-color: crimson; + background-color: crimson; } div { - background-color: #ffffff; + background-color: #ffffff; } .myClass { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5); } ``` @@ -25,7 +25,7 @@ div { `background-color: color | transparent | initial | inherit;` -`color` - Specifies the background color (color name, hexadecimal value, RGB/RGBA value, HSL/HSLA value). +`color` - Specifies the background color (color name, hexadecimal value, RGB/RGBA value, HSL/HSLA value). `transparent` - The default value. Sets the background color as transparent. @@ -35,5 +35,3 @@ div { #### More Information: MDN web docs - - diff --git a/guide/english/css/properties/background-repeat-property/index.md b/guide/english/css/properties/background-repeat-property/index.md index 2082f764ee..b285e01628 100644 --- a/guide/english/css/properties/background-repeat-property/index.md +++ b/guide/english/css/properties/background-repeat-property/index.md @@ -30,15 +30,15 @@ Examples: For repeating the image both horizontally and vertically ```css body { - background-image:url(smiley.gif); - background-repeat:repeat; + background-image:url(smiley.gif); + background-repeat:repeat; } ``` For repeat the image horizontally ```css body { - background-image:url(smiley.gif); - background-repeat:repeat-x; + background-image:url(smiley.gif); + background-repeat:repeat-x; } ``` diff --git a/guide/english/css/properties/color-property/index.md b/guide/english/css/properties/color-property/index.md index 16f7823f28..6a06cf774e 100644 --- a/guide/english/css/properties/color-property/index.md +++ b/guide/english/css/properties/color-property/index.md @@ -2,34 +2,34 @@ title: Color Property --- -## CSS Color Property +## CSS Color Property You can use the `color` property to set the color of the text in an element. -You can use several methods to declare a color such as: +You can use several methods to declare a color such as: * By Name (Note: this only works with certain colors) ```css h1{ - color: blue; + color: blue; } ``` * Hexadecimal (specified as #rrggbb) ```css -h1{ - color: #0000ff; -} +h1{ + color: #0000ff; +} ``` * RGB (specified as rgb(r, g, b)) ```css h1{ - color: rgb(0, 0, 255); + color: rgb(0, 0, 255); } ``` @@ -37,23 +37,23 @@ h1{ ```css h1{ - color: rgba(0, 0, 255, 0.5); + color: rgba(0, 0, 255, 0.5); } ``` * HSL (Hue, Lightness, Saturation) - + ```css h1{ - color: hsl(240, 100%, 50%); + color: hsl(240, 100%, 50%); } ``` * HSLA (Hue, Lightness, Saturation, Alpha) - + ```css h1{ - color: hsl(240, 100%, 50%, 0.5); + color: hsl(240, 100%, 50%, 0.5); } ``` ## CSS Color Properties explained @@ -62,19 +62,19 @@ h1{ - These are pretty self explanatory. Each color is represented by its name. * Hexadecimal: - - These colors are represented by hex triplets. + - These colors are represented by hex triplets. - A hex triplet is a six-digit, three-byte hexadecimal number. - Each of three bytes represents a color #RRGGBB (red, green, blue). - Shorthand hex color is represented by a three-digit hexadecimal number #RGB (red, green, blue). - + * RGB & RGBA Colors: - RGB colors are 24bit (3byte) colors represented by 3 numbers in range of 0-255. (e.g. rgb(255,255,128)). - RGBA colors are 32bit (4byte) colors represented by 3 numbers in range of 0-255 and alpha value which controls opacity. (e.g. rgb(255,255,128, 0.3)). - + * HSL & HSLA Colors: - HSL color is represented by three values (HUE, Saturation, Lightness). - HSLA color is represented by four values (HUE, Saturation, Lightness, Alpha). Alpha controls the opacity. - + #### More Information * W3 Schools site on how to format text. diff --git a/guide/english/css/properties/css3-text-shadow-property/index.md b/guide/english/css/properties/css3-text-shadow-property/index.md index 59b7f15907..1f5e4425c3 100644 --- a/guide/english/css/properties/css3-text-shadow-property/index.md +++ b/guide/english/css/properties/css3-text-shadow-property/index.md @@ -14,7 +14,7 @@ text-shadow : X-offset Y-offset blur-radius color **Example :** ``` css p { -text-shadow : 2px 2px 8px #FF0000; + text-shadow : 2px 2px 8px #FF0000; } ``` diff --git a/guide/english/css/vertical-align/index.md b/guide/english/css/vertical-align/index.md index a5410cea74..2e4ddf7fee 100644 --- a/guide/english/css/vertical-align/index.md +++ b/guide/english/css/vertical-align/index.md @@ -8,7 +8,7 @@ title: Vertical Align CSS For example, you can use ```vertical-align``` like this to align an image: ``` img { - vertical-align: top; + vertical-align: top; } ``` These are the valid values for ```vertical-align```: diff --git a/guide/english/css/will-change/index.md b/guide/english/css/will-change/index.md index afe6e5761c..d4bacfe2d0 100644 --- a/guide/english/css/will-change/index.md +++ b/guide/english/css/will-change/index.md @@ -6,7 +6,7 @@ The will-change property allows you to tell the browser what manipulations will ```css .container { -will-change: transform; + will-change: transform; } ```