gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust css examples formatting (#26127)

Browse Source
This commit is contained in:
David Way
2018-12-13 05:03:03 +00:00
committed by Tom
parent 18d5502965
commit 012e93154b
35 changed files with 303 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
guide/english/css/background-opacity/index.md
View File

@ -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)

4
guide/english/css/background/index.md
View File

@ -15,13 +15,13 @@ Here is an example of setting the background color for a web page to 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;
}

2
guide/english/css/before-selector/index.md
View File

@ -12,7 +12,7 @@ Let's look at some examples:
p::before {
content: "";
border: solid 5px #ccc
border: solid 5px #ccc;
}
span.comment::before{

3
guide/english/css/borders/index.md
View File

@ -41,7 +41,6 @@ The `border-style` property can be set to a wide range of different border types
- `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;

4
guide/english/css/class-selector/index.md
View File

@ -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;
}
```
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: <a href='https://www.w3schools.com/css/css_syntax.asp' target='_blank' rel='nofollow'>w3schools</a>

11
guide/english/css/comments-in-css/index.md
View File

@ -15,11 +15,6 @@ The comment syntax in CSS works for both single and multi-line comments. You can
*/
/* 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.
@ -84,10 +79,10 @@ Here are a few exmples to get you started of CSS comments you can use in your da
6.0 - Body */
/************************************************************************
5.1 - Sliders */
6.1 - Sliders */
/************************************************************************
5.2 - Imagery */
6.2 - Imagery */
/****************************************************************************
7.0 - Footer */
@ -115,7 +110,7 @@ Here's how region works:
height: 20px;
}
/*#endregion */
````
```
### More Information:

3
guide/english/css/css-buttons/index.md
View File

@ -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

2
guide/english/css/css-preprocessors/index.md
View File

@ -47,8 +47,8 @@ Here, the background color will change color depending on the width of the page'
### 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 <name> and use it with the @include <name>.
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:
<!-- Please add any articles you think might be helpful to read before writing the article -->
SASS: http://sass-lang.com/

12
guide/english/css/css3-backgrounds/index.md
View File

@ -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,14 +31,14 @@ 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-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-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
```
@ -47,7 +47,7 @@ But sometimes you don't want to have your background image cover the whole surfa
You can specify the position of the background by typing :
```css
  background-image: url("GitHub-Mark.png");
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
```
@ -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:

1
guide/english/css/image-galleries/index.md
View File

@ -69,4 +69,3 @@ div.desc {
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
https://www.w3schools.com/css/css_image_gallery.asp

6
guide/english/css/image-opacity-and-transparency/index.md
View File

@ -16,7 +16,7 @@ img {
}
```
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. `x` takes a value from 0-100.
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. The x takes a value from 0-100.
```css
img {
opacity: 0.3;
@ -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)

2
guide/english/css/layout/grid-layout/index.md
View File

@ -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;
}
```

4
guide/english/css/layout/the-position-property/index.md
View File

@ -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:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank">The is a good article</a> to read up to understand more about the position property.

2
guide/english/css/navigation-bars/index.md
View File

@ -64,5 +64,3 @@ There are two parts to any navigation: the HTML and the CSS. This is just a quic
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
More Navigation Examples: [W3Schools](https://www.w3schools.com/css/css_navbar.asp)

2
guide/english/css/properties/background-color-property/index.md
View File

@ -35,5 +35,3 @@ div {
#### More Information:
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/background-color?v=b' target='_blank' rel='nofollow'>MDN web docs</a>