CSS Tutorial: Selectors, Box Model & How to Include CSS in HTML

HTML | CSS (Cascading Style Sheets)

How to Include CSS in HTML
1. External stylesheet
2. Internal stylesheet
CSS Selectors
The CSS Box Model: Margin, Border, and Padding

How to Include CSS in HTML
CSS (Cascading Style Sheets) can be included in HTML documents in several ways. The two most common methods are external stylesheets and internal stylesheets. External stylesheets are preferred for larger projects as they promote code reusability and maintainability, while internal stylesheets are useful for page-specific styles or quick prototyping.
1. External stylesheet
  External stylesheets are separate CSS files that are linked to HTML documents. This method allows you to apply the same styles across multiple HTML pages, making it easier to maintain consistent styling throughout a website. The link element is placed within the head section of the HTML document.
```
<head>
    <link rel="stylesheet" type="text/css" href="mtitek.style.3.css" />
</head>
```
  The file "mtitek.style.3.css" may contain some declarations like the following:
```
body
{
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
}
```
2. Internal stylesheet
  Internal stylesheets are CSS rules defined within the HTML document itself, enclosed in a style element within the head section. This method is useful when you need styles that are specific to a single HTML page or when you want to override external stylesheet rules for a particular page.
```
<head>
    <style type="text/css">
        #container a:link, #container a:visited
        {
            color: #607080;
            text-decoration: underline;
        }
    </style>
</head>
```
CSS Selectors
CSS selectors are patterns that allow the browser to match HTML elements with their corresponding styles. They are fundamental to CSS as they determine which elements will be affected by specific style rules. Understanding different types of selectors is essential for creating precise and efficient stylesheets.
1. Element selector
  Element selectors target HTML elements by their tag name. They apply styles to all instances of a specific element type throughout the document. This selector is the most basic and straightforward way to style elements.
  
  The following style:
```
p { padding: 0px; }
```
  Refers to the "p" elements:
```
<p>CONTENT</p>
```
2. Class selector
  Class selectors target elements based on their class attribute value. Classes are reusable and can be applied to multiple elements throughout the document. This provides flexibility in styling and allows for consistent design patterns across different element types.
  - The following style targets specific element types with a particular class:
    
    p.class1 { padding: 0px; }
    Refers to the "p" elements whose value of the "class" attribute is "class1":
    
    <p class="class1">CONTENT</p>
  - The following style targets all elements with a particular class regardless of element type:
    
    .class2 { padding: 0px; }
    Refers to all elements whose value of the "class" attribute is "class2":
    
    <p class="class2">CONTENT</p> <h class="class2">CONTENT</h>
3. ID selector
  ID selectors target a single element based on its unique ID attribute value. Unlike classes, IDs should be unique within a document and are typically used for styling specific, one-off elements or for JavaScript targeting. ID selectors have higher specificity than class and element selectors.
  
  The following style:
```
#id1 { padding: 0px; }
```
  Refers to all elements whose value of the "id" attribute is "id1":
```
<p id="id1">CONTENT</p>
```
4. Universal selector
  The universal selector targets all elements in the document. It is represented by an asterisk (*) and is commonly used for CSS resets or to apply base styles to all elements. Use this selector with caution as it affects every element on the page and can impact performance if overused.
  
  The following style:
```
* { padding: 0px; }
```
  Refers to all elements:
```
<p>CONTENT</p>
<h1>CONTENT</h1>
```
The CSS Box Model: Margin, Border, and Padding
The CSS box model is a fundamental concept that describes how HTML elements are rendered as rectangular boxes. Each element consists of content surrounded by optional padding, border, and margin layers. Understanding the box model is crucial for controlling spacing, sizing, and layout of elements on a web page.
- The border defines the border-width, border-style, and border-color properties of the element's box.
- The padding properties define the space between the element's content and its border.
- The margin properties define the space between the element's border and adjacent elements.
```
        +--------------------------------------+
        |                                      |
        |             +-------+                |
        |             |CONTENT|                |
        |             +-------+                |
        |                                      |
        +--------------------------------------+
<------>.<----------->
 margin | padding
        |
        |-> border
```
1. Padding properties
  Padding creates space between an element's content and its border. It provides internal spacing within the element and is useful for improving readability and visual appeal. Padding values cannot be negative, and they inherit the background color or image of the element.
  
  You can use padding-top, padding-right, padding-bottom, and/or padding-left to define specific values for each side.
```
#paddingEx1
{
    padding-top: 0px;
    padding-right: auto;
    padding-bottom: 0px;
    padding-left: auto;
}
```
```
<div id="paddingEx1">CONTENT</div>
```
  You can use padding shortcut if you want to define values for all sides; its effect is determined by the number of values provided.
  The padding shortcut defines the padding values for all sides in the following order: top, right, bottom, left (clockwise from the top).
  - One value:
    The padding-top, padding-right, padding-bottom, and padding-left are set to this value.
    
    #paddingEx2 { padding: 0px; }
  - Two values:
    The padding-top and padding-bottom are set to the 1st value.
    The padding-right and padding-left are set to the 2nd value.
    
    #paddingEx3 { padding: 0px auto; }
  - Three values:
    The padding-top is set to the 1st value.
    The padding-right and padding-left are set to the 2nd value.
    The padding-bottom is set to the 3rd value.
    
    #paddingEx4 { padding: 0px auto 0px; }
  - Four values:
    The padding-top is set to the 1st value.
    The padding-right is set to the 2nd value.
    The padding-bottom is set to the 3rd value.
    The padding-left is set to the 4th value.
    
    #paddingEx5 { padding: 0px auto 0px auto; }
2. Border properties: width, style, and color
  Borders create a visible line around an element, positioned between the padding and margin. Borders consist of three main properties: width (thickness), style (appearance), and color. All three properties must be specified for a border to be visible, though shorthand properties can simplify the syntax.
  - Border width
    Border width controls the thickness of the border line. It can be specified in pixels, ems, or using keywords like thin, medium, or thick.
    
    You can use border-top-width, border-right-width, border-bottom-width, and/or border-left-width to define specific values for each side.
    
    #borderWidthEx1 { border-top-width: 0px; border-right-width: auto; border-bottom-width: 0px; border-left-width: auto; }
    You can use border-width shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    
    #borderWidthEx2 { border-width: 0px auto 0px auto; }
  - Border style (possible values: none, dotted, dashed, solid, double, groove, ridge, inset, outset)
    Border style determines the appearance of the border line. The "solid" style creates a continuous line, while "dashed" and "dotted" create interrupted patterns. The "double" style creates two parallel lines, and the 3D styles (groove, ridge, inset, outset) create dimensional effects.
    
    You can use border-top-style, border-right-style, border-bottom-style, and/or border-left-style to define specific values for each side.
    
    #borderStyleEx1 { border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: inset; }
    You can use border-style shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    
    #borderStyleEx2 { border-style: solid dashed double inset; }
  - Border color
    Border color sets the color of the border line. It can be specified using color names, hexadecimal values, RGB values, or other CSS color formats. If no color is specified, the border will inherit the text color of the element.
    
    You can use border-top-color, border-right-color, border-bottom-color, and/or border-left-color to define specific values for each side.
    
    #borderColorEx1 { border-top-color: #ff0000; border-right-color: #ff0000; border-bottom-color: #ff0000; border-left-color: #ff0000; }
    You can use border-color shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    
    #borderColorEx2 { border-color: #ff0000 #ff0000 #ff0000 #ff0000; }
  - Border shortcut
    The border shortcut property allows you to set width, style, and color in a single declaration. This is the most efficient way to define borders when all sides should have the same properties.
    
    You can use border shortcut if you want to define specific values for each side for the border-width, border-style, and border-color.
    
    #borderEx1 { border-width: 0px; border-style: solid; border-color: #ff0000; }
    The shortcut has the following syntax: border: <border-width> <border-style> <border-color>;
    
    #borderEx2 { border: 0px solid #ff0000; }
3. Margin properties
  Margins create space outside an element's border, pushing adjacent elements away. Unlike padding, margins are transparent and do not inherit the element's background. Margins can have negative values, which can cause elements to overlap. Adjacent vertical margins may collapse, taking the larger of the two margin values.
  
  You can use margin-top, margin-right, margin-bottom, and/or margin-left to define specific values for each side.
```
#marginEx1
{
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
```
  You can use margin shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
```
#marginEx2
{
    margin: 0px auto 0px auto;
}
```