CAREER & TECHNOLOGY STUDIES
  • Home
  • Photography
  • Business
    • ENT 1010
    • ENT 1020
    • ENT 1090 Proj. A
    • ENT 2010
    • ENT 2020
    • ENT 2040
    • MAM1010 - Marketing >
      • MAM1010-Introduction
    • FIN1015
  • Design
    • DES3115-Industrial Design
  • Construction
    • CON 1010
    • CON 1120
    • CON 1140
  • Video & Film
    • COM1015 - Media >
      • COM1015 - Day 11/12
    • COM 1105 Audio/VIdeo >
      • COM 1105 -day1.Genres
    • COM 1145 Animation >
      • Frozen - Youtube
    • COM2105 Preproduction
    • COM 2115 Production
    • COM2175: Interactive Presentation
    • COM 2145 Animation
    • Green Screen After Effects
    • COM3105 Preproduction 2
  • Legal Studies
    • LGS3040 Negligence
    • LGS3010 - Property Law
    • LGS3080 Criminal Law
    • LGS3060 Controversy & Change
  • Baron Blocks
  • Link Page
  • Broadcasting
  • COMPUTERS
    • HTML/CSS Intro
    • HTML/CSS Intermediate
  • HTML/CSS 2

SPACES AND MARGINS
&
HTML 

HTML/CSS INtermediate

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 %.
​
Picture

<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.
Picture

Centering and Declaration Tag

We can use the margin and width properties to add a declaration to the entire HTML tag. 
Picture

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.

Picture

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:
  1. 0 0 0 10px
  2. 0 0 10px 0
  3. 0 0 10px 5px
  4. 0 10px 10px 5px
  5. 0 10px 10px -5px
  6. Set the 4 numbers to any pixel values you like.
Optional valuesThe blur and spread property values are optional.
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.

Picture

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;
  1. Add a shadow to the business name that is shifted 1 pixel right, 1 pixel down and has a blur of 4 pixels.
  2. Set the text shadow color to any color you like.
CSS declaration:
Syntax: text-shadow: h-offset v-offset blur color;
Picture

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.
  1. At the end of your page, add an unordered list of at least 5 products or services your business provides.
  2. Set the list-style-type to either square, circle, or none.
Picture

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.

Location

Vision and Wisdom

Rooted in Jesus.... Hearts to Love, Hands to Serve"

Contact Us

    Subscribe Today!

Submit
  • Home
  • Photography
  • Business
    • ENT 1010
    • ENT 1020
    • ENT 1090 Proj. A
    • ENT 2010
    • ENT 2020
    • ENT 2040
    • MAM1010 - Marketing >
      • MAM1010-Introduction
    • FIN1015
  • Design
    • DES3115-Industrial Design
  • Construction
    • CON 1010
    • CON 1120
    • CON 1140
  • Video & Film
    • COM1015 - Media >
      • COM1015 - Day 11/12
    • COM 1105 Audio/VIdeo >
      • COM 1105 -day1.Genres
    • COM 1145 Animation >
      • Frozen - Youtube
    • COM2105 Preproduction
    • COM 2115 Production
    • COM2175: Interactive Presentation
    • COM 2145 Animation
    • Green Screen After Effects
    • COM3105 Preproduction 2
  • Legal Studies
    • LGS3040 Negligence
    • LGS3010 - Property Law
    • LGS3080 Criminal Law
    • LGS3060 Controversy & Change
  • Baron Blocks
  • Link Page
  • Broadcasting
  • COMPUTERS
    • HTML/CSS Intro
    • HTML/CSS Intermediate
  • HTML/CSS 2