CSS

INTRODUCTION TO CSS

CSS - CASCADING STYLE SHEET

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

WHY CSS..?

CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

EX:

   body {
     background-color: lightblue;
   }

   h1 {
     color: white;
     text-align: center;
   }

   p {
    font-family: Verdana;
     font-size: 20px;
   }

CSS SYNTAX:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

EX:

<p> elements will be center-aligned, with a red text color:

p {

         color: red;
         text-align: center;
          }

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

CSS SELECTORS:

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

CSS ELEMENT SELECTOR:

The element selector selects HTML elements based on the element name.

EX:

p {

         text-align: center;
         color: red;
           }

CSS ID SELECTOR:

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

EX:

#para1 {

         text-align: center;
         color: red;
           }

Here id=para

CSS CLASS SELECTOR:

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

EX:

.center {

        text-align: center;
         color: red;
           }

Here class=center

CSS UNIVERSAL SELECTOR:

The universal selector (*) selects all HTML elements on the page.

EX:

                * {
         text-align: center;
         color: blue;
           }

CSS GROUPING SELECTOR:

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions)

EX:

h1 {

         text-align: center;
         color: red;
       }

       h2 {
       text-align: center;
       color: red;
       }

       p {
         text-align: center;
         color: red;
       }

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

EX:

h1, h2, p {

   text-align: center;
     color: red;
        }

CSS SIMPLE SELECTORS:

#id --- #FirstName Selects all elements with id="FirstName"

.class --- .Intro Selects all elements with class="Intro"

element.class --- p.intro Selects only <p> elements with class="intro"

* --- * Select All elements

element --- p Select all <p> elements

element,element,.. --- div,p Selects all <div> elements and all <p> elements

HOW TO ADD CSS :

There Are 3 Ways To Insert CSS,

External CSS
Internal CSS
Inline CSS

EXTERNAL CSS:

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

EX:

External Styles are defined within the <link> element, inside the <head> section of HTML Page.

<!DOCTYPE html>

<html>

       <body>
       <h1>This is a heading</h1>
       <p>This is a paragraph.</p>
       </body>

</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks

mystyle.css

body {

     background-color: lightblue;
   }

   h1 {
     color: navy;
     margin-left: 20px;
   }

INTERNAL CSS:

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

EX:

Internal Styles are defined within the <style> element, inside the <head> section of HTML Page.

<!DOCTYPE html>

       <html>
       <head>
       <style>
       body {
    background-color: linen;
   }

       h1 {
   color: maroon;
   margin-left: 40px;
   }
   </style>

   </head>
   <body>

   <h1>This is a heading</h1>
   <p>This is a paragraph.</p>

   </body>
   </html>

INLINE CSS:

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

EX:

Inline styles are defined within the "style" attribute of the relevant element

<!DOCTYPE html>

           <html>
           <body>

           <h1 style="color:blue;text-align:center;">This is a heading</h1>
           <p style="color:red;">This is a paragraph.</p>

           </body>
           </html>

CSS COMMENTS:

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */

SingleLine Comments:

/* This is a single-line comment */

p {
color: red;

}

MultiLine Comments:

/* This is

           a multi-line
           comment */

       p {
       color: red;

}

HTML AMD CSS COMMENTS:

From the HTML tutorial, you learned that you can add comments to your HTML source by using the  syntax.

EX:

<!DOCTYPE html>

<html>
       <head>
       <style>
         p {
       color: red; /* Set text color to red */
           }
       </style>
       </head>
       <body>

       <h2>My Heading</h2>

       
       <p>Hello World!</p>
       <p>This paragraph is styled with CSS.</p>
       <p>CSS comments are not shown in the output.</p>

       </body>
       </html>

CSS BACKGROUNDS:

The CSS background properties are used to add background effects for elements.

CSS background-color:

The background-color property specifies the background color of an element.

EX:

body {

background-color: lightblue;
}

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Other Elements:

You can set the background color for any HTML elements

EX:

h1 {

background-color: green;

           }

       div {
             background-color: lightblue;
           }

       p {
             background-color: yellow;
           }

OPACITY/TRANSPARENCY:

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent

EX:

            div {
       background-color: green;
         opacity: 0.3;
           }

TRANSPARENCY USING RGBA:

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

EX:

div {

background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */

}

background-image:

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element

EX:

body {

background-image: url("paper.gif");
}

background-repeat:

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange

EX:

body {

background-image: url("gradient_bg.png");
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better

EX:

body {

     background-image: url("gradient_bg.png");
     background-repeat: repeat-x;
   }

background-repeat:no-repeat:

Showing the background image only once is also specified by the background-repeat property

EX:

body {

     background-image: url("img_tree.png");
     background-repeat: no-repeat;
   }

In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

background-position:

The background-position property is used to specify the position of the background image

EX:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

background-attachment:

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

EX:

body {

  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
background-attachment: fixed;
   }

Specify that the background image should scroll with the rest of the page

  body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
background-attachment: scroll;
   }

background(Shorthand) property:

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property

EX:

body {

background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

You can use the shorthand property background

Use the shorthand property to set the background properties in one declaration

EX:

body {

background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS BORDERS:

The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS BORDER STYLE:

The border-style property specifies what kind of border to display.

The following values are allowed:

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

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

EX:

p.dotted {border-style: dotted;}

`   p.dashed {border-style: dashed;}
     p.solid {border-style: solid;}
     p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

RESULT:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

CSS BORDER WIDTH:

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

EX:

p.one {

    border-style: solid;
   border-width: 5px;
   }

   p.two {
   border-style: solid;
     border-width: medium;
   }

   p.three {
   border-style: dotted;
     border-width: 2px;
   }

   p.four {
   border-style: dotted;
     border-width: thick;
   }

Result:

5px border-width

medium border-width

2px border-width

thick border-width

SIDE WIDTH:

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border)

EX:

p.one {

border-style: solid;

          border-width: 5px 20px; /* 5px top and bottom, 20px on the sides                */
       }

       p.two {
       border-style: solid;
       border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
       }

       p.three {
       border-style: solid;
       border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom        and 35px left */

}

BORDER COLOR:

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

EX:

p.one {

   border-style: solid;
   border-color: red;
   }

   p.two {
   border-style: solid;
     border-color: green;
   }

   p.three {
     border-style: dotted;
     border-color: blue;
   }

RESULT:

Red border

Green border

Blue border

SPECIFIC SIDE COLORS:

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

EX:

p.one {

     border-style: solid;
     border-color: red green blue yellow; /* red top, green right, blue bottom    and yellow left */
   }

HEX VALUES:

The color of the border can also be specified using a hexadecimal value (HEX):

EX:

            p.one {
     border-style: solid;
     border-color: #ff0000; /* red */
   }

RGB VALUES:

EX:

            p.one {
     border-style: solid;
     border-color: #ff0000; /* red */
   }

HSL VALUES:

EX:

        p.one {
   border-style: solid;
   border-color: hsl(0, 100%, 50%); /* red */
   }

CSS BORDER SIDES:

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Result:

Different Border Styles

The example above gives the same result as this:

Example

p {
  border-style: dotted solid;
}

So, here is how it works:

If the border-style property has four values:

border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed

If the border-style property has three values:

border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double

If the border-style property has two values:

border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid

If the border-style property has one value:

border-style: dotted;
- all four borders are dotted

Example

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

CSS SHORTHAND AND BORDER PROPERTY:

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

Example

p {
  border: 5px solid red;
}

Result:

Some text

You can also specify all the individual border properties for just one side:

Left Border

p {
  border-left: 6px solid red;
}

Result:

Some text

Bottom Border

p {
  border-bottom: 6px solid red;
}

Result:

Some text

CSS ROUNDED BORDERS:

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

p {
  border: 2px solid red;
  border-radius: 5px;
}

CSS MARGINS:

Margins are used to create space around elements, outside of any defined borders.

This element has a margin of 70px

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left

All the margin properties can have the following values:

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

Set different margins for all four sides of a <p> element:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

Example

Use the margin shorthand property with four values:

p {
  margin: 25px 50px 75px 100px;
}

If the margin property has three values:

margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px

Example

Use the margin shorthand property with three values:

p {
  margin: 25px 50px 75px;
}

If the margin property has two values:

margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px

Example

Use the margin shorthand property with two values:

p {
  margin: 25px 50px;
}

If the margin property has one value:

margin: 25px;
- all four margins are 25px

Example

Use the margin shorthand property with one value:

p {
  margin: 25px;
}

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example

Use margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example

Use of the inherit value:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example

Demonstration of margin collapse:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

All the padding properties can have the following values:

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

Set different padding for all four sides of a <div> element:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

padding-top
padding-right
padding-bottom
padding-left

So, here is how it works:

If the padding property has four values:

padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

Example

Use the padding shorthand property with four values:

div {
  padding: 25px 50px 75px 100px;
}

If the padding property has two values:

padding: 25px 50px;

top and bottom paddings are 25px
right and left paddings are 50px

Example

Use the padding shorthand property with two values:

div {
  padding: 25px 50px;
}

If the padding property has one value:

padding: 25px;

all four paddings are 25px

Example

Use the padding shorthand property with one value:

div {
  padding: 25px;
}

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

Example

Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):

div {
  width: 300px;
  padding: 25px;
}

Example

Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following 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 and width Examples

This element has a height of 200 pixels and a width of 50%

Example

Set the height and width of a <div> element:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

This element has a height of 100 pixels and a width of 500 pixels.

Example

Set the height and width of another <div> element:

div {

height: 100px;
width: 500px;
background-color: powderblue;
}

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

Example

This <div> element has a height of 100 pixels and a max-width of 500 pixels:

div {

max-width: 500px;
height: 100px;
background-color: powderblue;
}

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example

Demonstration of the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Example

This <div> element will have a total width of 350px:

div {

width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Outline

CSS has the following outline properties:

outline-style
outline-color
outline-width
outline-offset
outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline

Example

Demonstration of the different outline styles:

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

CSS Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

The following example shows some outlines with different widths:

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

Example

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

CSS Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:

name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Example

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

outline-width
outline-style (required)
outline-color

The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.

The following example shows some outlines specified with the shorthand outline property:

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

Example

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

The following example specifies an outline 15px outside the border edge:

This paragraph has an outline 15px outside the border edge.

Example

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

The following example shows that the space between an element and its outline is transparent:

This paragraph has an outline of 15px outside the border edge.

Example

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

CSS TEXT:

Text Color

The color property is used to set the color of the text. The color is specified by:

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Example

body {
  color: blue;
}

h1 {
  color: green;
}

Text Color and Background Color

In this example, we define both the background-color property and the color property:

Example

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Text Alignment and Text Direction

In this chapter you will learn about the following properties:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Example

div {
  text-align: justify;
}

Text Align Last

The text-align-last property specifies how to align the last line of a text.

Example

Align the last line of text in three <p> elements:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element:

Example

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

Example

Set the vertical alignment of an image in a text:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Text Decoration

In this chapter you will learn about the following properties:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.

Example

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

Example

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

Example

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

Example

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

The Shorthand Property

The text-decoration property is a shorthand property for:

text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)

Example

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

A Small Tip

All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this:

Example

a {
  text-decoration: none;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

Example

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Text Spacing

In this chapter you will learn about the following properties:

text-indent
letter-spacing
line-height
word-spacing
white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

p {
  text-indent: 50px;
}

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

Line Height

The line-height property is used to specify the space between lines:

Example

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

p {
  white-space: nowrap;
}

Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px;
}

Next, add a color (red) to the shadow:

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px red;
}

Then, add a blur effect (5px) to the shadow:

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px 5px red;
}

More Text Shadow Examples

Example 1

Text-shadow on a white text:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Example 2

Text-shadow with red neon glow:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Example 3

Text-shadow with red and blue neon glow:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Example 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Example

Specify some different fonts for three paragraphs:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

What are Web Safe Fonts?

Web safe fonts are fonts that are universally installed across all browsers and devices.

Fallback Fonts

However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.

Therefore, it is very important to always use fallback fonts.

This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

Example

Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.

p {
font-family: Tahoma, Verdana, sans-serif;
}

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67

Property	Description
content	Used with the ::before and ::after pseudo-elements, to insert generated content
counter-increment	Increments one or more counter values
counter-reset	Creates or resets one or more counters
counter()	Returns the current value of the named counter

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

Function	Description
calc()	Allows you to perform calculations to determine CSS property values
max()	Uses the largest value, from a comma-separated list of values, as the property value
min()	Uses the smallest value, from a comma-separated list of values, as the property value

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Firstname	Lastname
Peter	Griffin
Lois	Griffin

LearnCSS

CSS

INTRODUCTION TO CSS

WHY CSS..?

CSS SYNTAX:

EX:

CSS SELECTORS:

CSS ELEMENT SELECTOR:

HOW TO ADD CSS :

Example

Example

Example

Example

Left Border

Bottom Border

Example

Margin - Individual Sides

Example

Margin - Shorthand Property

Example

Example

Example

Example

The auto Value

Example

The inherit Value

Example

Margin Collapse

Example

CSS Padding

Padding - Individual Sides

Example

Padding - Shorthand Property

Example

Example

Example

Padding and Element Width

Example

Example

CSS Height, Width and Max-width

CSS Setting height and width

CSS height and width Values

CSS height and width Examples

Example

Example

Setting max-width

Example

CSS Box Model

Example

Width and Height of an Element

Example

CSS Outline

CSS Outline Style

Example

CSS Outline Width

Example

CSS Outline Color

Example

CSS Outline - Shorthand property

Example

CSS Outline Offset

Example

Example

Text Color

Example

Text Color and Background Color

Example

Text Alignment and Text Direction

Text Alignment

Example

Example

Text Align Last

Example

Text Direction

Example

Vertical Alignment

Example

Text Decoration

Add a Decoration Line to Text

Example