CSS3

CSS Solved a Big Problem

  1. Inline styling e.g. <h1 style=”color: red;”>This is an heading tag</h1>
  2. Internal stylesheet: That is putting it in the style tag underneat your title tag.
    <!doctype html>
    <html>
    <head><title>Test Page</title>
    <style>
    h1{color: red;}
    </style>
    </head>
    <body>
    <h1>This is an heading tag</h1>
    </body>
    </html>

CSS Comments

Example

The CSS id Selector

Example

The CSS class Selector

Example

CSS Colors

CSS Backgrounds

CSS background-color

Example

CSS background-image

Example

CSS Border

  • border-width
  • border-style (required)
  • border-color
  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border

Example

CSS Margins

Margin — Individual Sides

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • auto — the browser calculates the margin
  • length — specifies a margin in px, pt, cm, etc.
  • % — specifies a margin in % of the width of the containing element
  • inherit — specifies that the margin should be inherited from the parent element

Example

Margin — Shorthand Property

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

Example

CSS Padding

Padding — Individual Sides

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • length — specifies a padding in px, pt, cm, etc.
  • % — specifies a padding in % of the width of the containing element
  • inherit — specifies that the padding should be inherited from the parent element

Example

Padding — Shorthand Property

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Example

  • padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

Example

CSS Height and Width

CSS Setting height and width

CSS height/width Values

  • auto - This is default. The browser calculates the height and width
  • length - Defines the height/width in px, cm etc.
  • % - Defines the height/width in percent of the containing block
  • initial - Sets the height/width to its default value
  • inherit - The height/width will be inherited from its parent value

CSS height/width Examples

Example

CSS Text

Text Alignment

Example

Text Transformation

Example

CSS Fonts

Font Family

Example

Font Style

  • normal — The text is shown normally
  • italic — The text is shown in italics
  • oblique — The text is “leaning” (oblique is very similar to italic, but less supported)

Example

Setting Font Size With Pixels

Example

Setting Font Size With Em

Example

CSS Links

Styling Links

Example

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Example

Text Decoration

Example

Background Color

Example

CSS Lists

Different List Item Markers

Example

An Image as The List Item Marker

Example

Remove Default Settings

Example

CSS Tables

Table Borders

Example

Collapse Table Borders

Example

CSS Display

The display Property

Example

CSS Layout — float and clear

The float Property

  • left — The element floats to the left of its container
  • right — The element floats to the right of its container
  • none — The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit — The element inherits the float value of its parent

Example

CSS Layout — display: inline-block

The display: inline-block Value

CSS Opacity / Transparency

Transparent Image

Example

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store