Merge pull request #904 from davep/css-docs-review-styles

CSS docs review - Styles

docs/guide/styles.md

@@ -1,6 +1,6 @@
 # Styles
 
-In this chapter will explore how you can apply styles to your application to create beautiful user interfaces.
+In this chapter we will explore how you can apply styles to your application to create beautiful user interfaces.
 
 ## Styles object
 
@@ -48,9 +48,9 @@ Note how the combined height of the widget is three rows in the terminal. This i
 
 ## Colors
 
-There are a number of style attribute which accept colors. The most commonly used are [color](../styles/color.md) which sets the default color of text on a widget, and [background](..styles/background/md) which sets the background color (beneath the text).
+There are a number of style attributes which accept colors. The most commonly used are [color](../styles/color.md) which sets the default color of text on a widget, and [background](..styles/background/md) which sets the background color (beneath the text).
 
-You can set a color value to one of a number of pre-defined color constants, such as "crimson", "lime", and "palegreen". You can find a full list in the [Color reference](../reference/color.md#textual.color--named-colors).
+You can set a color value to one of a number of pre-defined color constants, such as `"crimson"`, `"lime"`, and `"palegreen"`. You can find a full list in the [Color reference](../reference/color.md#textual.color--named-colors).
 
 Here's how you would set the screen background to lime:
 
@@ -90,13 +90,13 @@ There are a few ways you can set alpha on a color in Textual.
 - You can also set alpha with the `rgba` format, which is identical to `rgb` with the additional of a fourth value that should be between 0 and 1, where 0 is invisible and 1 is opaque. For example `"rgba(192,78,96,0.5)"`.
 - You can add the `a` parameter on a [Color][textual.color.Color] object. For example `Color(192, 78, 96, a=0.5)` creates a translucent dark orchid.
 
-The following examples shows what happens when you set alpha on background colors:
+The following example shows what happens when you set alpha on background colors:
 
 ```python title="colors01.py" hl_lines="12-15"
 --8<-- "docs/examples/guide/styles/colors02.py"
 ```
 
-Notice that an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color. 
+Notice that at an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color.
 
 ```{.textual path="docs/examples/guide/styles/colors02.py"}
 ```
@@ -138,7 +138,7 @@ Note how the text wraps in the widget, and is cropped because it doesn't fit in
 
 #### Auto dimensions
 
-In practice, we generally want the size of a widget to adapt to it's content, which we can do by setting a dimension to `"auto"`.
+In practice, we generally want the size of a widget to adapt to its content, which we can do by setting a dimension to `"auto"`.
 
 Let's set the height to auto and see what happens.
 
@@ -195,7 +195,7 @@ Let's look at an example. We will create two widgets, one with a height of `"2fr
 --8<-- "docs/examples/guide/styles/dimensions04.py"
 ```
 
-The total `fr` units for height is 3. The first widget will have a screen height of two thirds because its height style is set to `2fr`. The second widget's height styles is `1fr` so its screen height will be one third. Here's what that looks like.
+The total `fr` units for height is 3. The first widget will have a screen height of two thirds because its height style is set to `2fr`. The second widget's height style is `1fr` so its screen height will be one third. Here's what that looks like.
 
 ```{.textual path="docs/examples/guide/styles/dimensions04.py"}
 ```