CSS – Dular Sharma

BOX Model In CSS

Dular Sharma — Tue, 12 May 2020 10:17:00 +0000

133 Views

Parameter Details:

content-box: Width and height of the element only includes the content area.
padding-box: Width and height of the element includes content and padding.
border-box: Width and height of the element includes content, padding, and border.
initial: Sets the box model to its default state.
inherit: Inherits the box model of the parent element.

Understanding the Box Model:

The Edges: In HTML documents, the browser creates a rectangle for each element, and the Box Model defines how padding, border, and margin are incorporated to shape this rectangle. Each side of this rectangle is referred to as an edge, defining a box.

The innermost rectangle is the content box, determined by the rendered content of the element.
Next is the padding box, defined by the padding property. If no padding width is specified, the padding edge matches the content edge.
Subsequently, the border box is established by the border property. Absence of border width aligns the border edge with the padding edge.
The outermost rectangle represents the margin box, governed by the margin property. If no margin width is specified, the margin edge aligns with the border edge.

div {
    border: 6px solid black;
    margin: 60px;
    padding: 30px;
}

This CSS configuration applies to all div elements: a border with 1px width on all sides, a margin of 10px, and padding of 80px.

When there is no content, the content region has zero height and width. The padding box defaults to the content box size plus the specified padding width on all sides. The border box aligns with the padding box dimensions plus the specified border width.

Lastly, the margin box matches the border box size plus the specified margin width. Considering two elements styled similarly, their box models dictate their relative positioning, with the content separated by a gap but the boxes touching each other. Adjusting margins alters their positioning accordingly.

BOX-Sizing

Understanding Box Model and Box Sizing:

The default box model, known as content-box, can lead to unexpected results, particularly when adding padding and border styles to an element. This default behavior causes the width or height of an element to exceed the specified values due to the addition of padding and borders.

Example:

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

In this example, the width of the textarea extends beyond 100% due to the addition of padding, showcasing the limitation of the content-box model.

Box Sizing Property:
CSS provides the box-sizing property to modify the box model for an element, offering three options:

content-box: The default model where width and height encompass only the content, excluding padding and border.
padding-box: Width and height include both content and padding, but not the border.
border-box: Width and height encompass content, padding, and border.

Solution:
To resolve the textarea width issue, simply change the box-sizing property to padding-box or border-box. Among these, border-box is the most commonly used option.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Applying Box Model Globally:
To apply a specific box model to all elements on a page, utilize the following CSS snippet:

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

This code ensures that the border-box model applies universally. The asterisk (*) notation selects all elements, allowing easy override of this property on individual elements if necessary.

Chapter 3. Comments In CSS

Dular Sharma — Mon, 11 May 2020 10:59:00 +0000

122 Views

There are two ways to add comments in CSS file.

1. Single Line Comment:

p {
    color: Black; /* This is a Comment*/
}

2. Multiple Line Comment:

/* This is 
   how you add
   multiple line 
   comments
*/
P {
  color: Black;
}

Chapter 2. Font Properties

Dular Sharma — Sun, 10 May 2020 11:50:00 +0000

135 Views

CSS font properties offer developers the ability to customize the appearance and style of text on a webpage. These properties enable adjustments to the size, style, color, and more. For example, developers can emphasize specific text by making it bold. Likewise, changing the font style from normal (straight) to italics (tilted) is also achievable. By leveraging font properties, various adjustments can be made to the typography on a webpage. Therefore, it’s essential to understand the different font properties available in CSS in order to effectively manipulate text appearance and achieve desired design outcomes.

Parameter Details for Font Properties:

font-style: Specifies whether the font should be displayed in italics or oblique.
font-variant: Determines if the font should be displayed in normal or small-caps style.
font-weight: Defines the weight of the font, which can be normal, bold, or a numeric value ranging from 100 to 900.
font-size: Specifies the size of the font, which can be represented in %, px, em, or other valid CSS measurements.
line-height: Sets the height of each line of text, expressed in %, px, em, or other valid CSS measurements.
font-family: Specifies the name of the font family to be used.
color: Determines the color of the text using valid CSS color representations such as red, #00FF00, or hsl(240, 100%, 50%).
font-stretch: Controls whether to use a condensed or expanded font face, with options including normal, ultra condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, or ultra-expanded.
text-align: Defines the alignment of the text within its container, options include start, end, left, right, center, justify, or match-parent.
text-decoration: Specifies decorations to be applied to the text, such as none, underline, overline, line-through, initial, or inherit.

p{
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-weight: 200;
    line-height: normal;
    color: aqua;
    font-stretch: normal;
    text-align: center;
    text-decoration: dashed;
}

You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.

element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Chapter 1. External Stylesheet

Dular Sharma — Sat, 09 May 2020 12:23:00 +0000

134 Views

You can apply an external CSS stylesheet to multiple HTML documents by using a element in each HTML file. In the tag, set the rel attribute to “stylesheet” and the href attribute to the relative or absolute path of the stylesheet. While it’s generally preferred to use relative URL paths, absolute paths can also be used. In HTML5, the type attribute can be omitted.

It’s recommended to place the tag in the section of the HTML file so that the styles are loaded before the elements they style. This prevents users from seeing un styled content when the page loads.

For example, in your HTML file (index.html), you would include the following code in the section:




 

 



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="style.css">

</head>

  <body>

    <h1>This is the HTML Web Page</h1>

    <p> External CSS has been added in this HTML Web Page</p>

  </body>

</html>

And in your CSS file (style.css), you can define styles for elements like headings and paragraphs:

h1 { color: red; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; }

Ensure that you provide the correct path to your CSS file in the href attribute. If the CSS file is in the same folder as your HTML file, no path is required. Otherwise, specify the folder name followed by the file name like

Using external stylesheets is the preferred method for managing CSS. Why? Imagine you have a website with 100 pages, all controlled by one stylesheet. If you need to change the link colors from blue to green, it’s much simpler to update the CSS file once and have the changes apply across all 1000 pages.

Conversely, modifying each page individually would be tedious and time-consuming. Moreover, if you decide to completely overhaul your website’s appearance, you only need to modify this one file.

You can link as many CSS files as necessary in your HTML page. For instance:

<link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css">

CSS rules follow a specific order, with later rules overriding earlier ones. For example, if you have a style1.css file with styling for paragraphs with the class ‘red’:

p.red { color: #FF0000; }

You can override this in another CSS file, such as style2.css:

p.yellow { color: #FFFF00; }

Now, paragraphs with the ‘yellow’ class will be displayed in a yellow color.

Additional concepts like the ‘!important’ rule, specificity, and inheritance also play a role in CSS styling.

When a visitor accesses your website, their browser downloads the HTML and linked CSS file. Subsequent page visits only require downloading the HTML, as the CSS file is cached. This caching improves page loading speed, resulting in a smoother user experience.

Versions and Releases

Dular Sharma — Fri, 08 May 2020 11:21:00 +0000

136 Views

CSS 1.0 –
- Basic styling capabilities such as font, color, and background properties.
- Support for text formatting like alignment and spacing.
- Limited layout control with properties like margin and padding.
CSS 2.0 – Release Date: 1995-11-24
- Enhanced layout options including positioning and floating elements.
- Introduction of selectors like child, adjacent sibling, and attribute selectors.
- Support for media-specific stylesheets using media queries.
CSS 3.2 – Release Date: 1997-01-14
- Further refinement of selectors including attribute value selectors and pseudo-elements.
- Introduction of the @font-face rule for custom font usage.
- Expanded support for dynamic effects through transitions and animations.
CSS 4.0 – Release Date: 1998-04-24
- Continued evolution of selectors with additions like subject selectors and parent selectors.
- Introduction of new layout modules like Grid Layout and Flexbox.
- Enhanced support for responsive design through viewport-relative units.
CSS 4.01 – Release Date: 1999-12-24
- Focus on refining existing features and addressing inconsistencies.
- Improvements in browser compatibility and standards compliance.
- Some minor additions and clarifications to the specification.
CSS 5 – Release Date: 2014-10-28
- Continued development of layout modules with improvements to Grid Layout and Flexbox.
- Introduction of new features such as CSS Variables and Custom Properties.
- Further enhancements to animations and transitions.
CSS 5.1 – Release Date: 2016-11-01
- Refinements and clarifications to existing specifications.
- Introduction of new features like :has() selector for complex querying.
- Improved support for internationalization and accessibility features.