Google CSS3 STYLE GUIDES
We can use CSS margin properties to control the space around HTML elements. The CSS margin property is used to add space around HTML elements. There are 4 margin properties: margin-top, margin-right, margin-bottom, margin-left.Your web browser automatically adds margin space above and below headings. You can change the size of this space by setting the margin-top and margin-bottom properties.
Images Margins
We can use CSS margin properties to control the space around images on our webpage. The space around images can also be controlled using CSS margin properties.Margin length can be specified using different units of measurement, including px (pixel), cm (centimeter), mm (millimeter), in (inch), and pt (point). Relative units of measurement can be used too, like %.
<p> tag and Margins
We can use the style to control how our paragraphs are displayed throughout the document. Try setting up your paragraphs to 14 pixels from the top and bottom of your document, with the left and right at 20 pixels/ 15 pixels respectively.
Centering and Declaration Tag
We can use the margin and width properties to add a declaration to the entire HTML tag.
Box Shadow
We can change the color of box shadows using CSS. You must always include the horizontal and vertical offset values in a box-shadow declaration. An optional value to include is for color. The color value goes at the end of the declaration.By default, the color of the shadow is usually the same color as text on the page.
Change the color using code like this:
box-shadow: 4px red;
Set the color of your image shadow to any color you like.
Change the color using code like this:
box-shadow: 4px red;
Set the color of your image shadow to any color you like.
Control Blur & Spread
We can control the blur and spread (size) of box shadows.Two more numbers can be added to a box-shadow to set the blur and spread (or size) of the shadow.
To see how these 4 numbers work, change your box-shadow numbers to the following values:
CSS declaration:
Syntax: box-shadow: h-offset v-offset blur spread color;
Example: box-shadow: 5px 5px 10px 2px darkSlateGray;
The higher the blur value, the more blurry the shadow will become.
Using positive numbers for the spread value makes the shadow larger, while negative numbers make the shadow smaller.
To see how these 4 numbers work, change your box-shadow numbers to the following values:
- 0 0 0 10px
- 0 0 10px 0
- 0 0 10px 5px
- 0 10px 10px 5px
- 0 10px 10px -5px
- Set the 4 numbers to any pixel values you like.
CSS declaration:
Syntax: box-shadow: h-offset v-offset blur spread color;
Example: box-shadow: 5px 5px 10px 2px darkSlateGray;
The higher the blur value, the more blurry the shadow will become.
Using positive numbers for the spread value makes the shadow larger, while negative numbers make the shadow smaller.
Text Shadow Properties
We can use the text-shadow property to add emphasis to text.Shadows are added to text using the text-shadow property. Text shadow is set using the same values as the box shadow, except the spread (or size) value is not used.
The following code creates a 5 pixel light blue shadow shifted right and down 3 pixels: text-shadow: 3px 3px 5px lightOrange;
Syntax: text-shadow: h-offset v-offset blur color;
The following code creates a 5 pixel light blue shadow shifted right and down 3 pixels: text-shadow: 3px 3px 5px lightOrange;
- Add a shadow to the business name that is shifted 1 pixel right, 1 pixel down and has a blur of 4 pixels.
- Set the text shadow color to any color you like.
Syntax: text-shadow: h-offset v-offset blur color;
Modify Lists, List Styles
We can change the default bullets points in a bulleted list with the list-style-type property.For this task, you'll add a list of products or services that the business provides.
The bullet point on a list is changed by setting the list-style-type property for the <ul> tag to the values square, circle, or none. The default value is disk which shows a filled circle.
The bullet point on a list is changed by setting the list-style-type property for the <ul> tag to the values square, circle, or none. The default value is disk which shows a filled circle.
- At the end of your page, add an unordered list of at least 5 products or services your business provides.
- Set the list-style-type to either square, circle, or none.
Modify, List Style Image
We can use images as bullet points in a bulleted list using the list-style-image property. The bullet point is replaced with an image using the list-style-image property.The following code can be added to the CSS rule for a <ul> tag to replace the bullet with a star:list-style-image: url(/images/silverStar.png);
Students also can use other images named ribbon.png and star.png.
Students also can use other images named ribbon.png and star.png.