You are currently viewing My Coding Journey – Day 3

My Coding Journey – Day 3

Today is day 3 of my coding journey where I will be covering the properties of CSS.  We will discuss all the important properties of CSS used for web development. The main properties of CSS are explained below.

CSS colors:-

  1. This property adds colours to our website with predefined colour names, or RGB, HEX, HSL, RGBA, HSLA values.

Example,

Html { background-color:red;}

H1 {color: blue;}

We can add colour to any elements of the HTML like

CSS background colour – it will change the background colour of the website

CSS text colour- it will change the background colour of the website

CSS border color : <h1 style=”border:2px solid Tomato;”>Hello World</h1>

  1. A color can be specified by using a predefined color name like orange, gray light gray and violet.
  2. CSS RGB Colors: In CSS color can be set using RGB value

RGB (red, green, blue) and each parameter defines the intensity of the colour between 0 and 255.

It will display black when all the parameters are 0, like RGB(0, 0, 0) and display white when all parameters are set to 255, like RGB(255, 255, 255)

CSS HEX colours: hexadecimal integers are used to specify the components of colour and written in the form of #RRGGBB

For example,

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00)

to display black, #000000 and white #ffffff

CSS HSL Colors

HSL value refers to the HSL ( hue, saturation, lightness) of the colour. Hue is a degree on the color from 0 to 360, saturation is the percentage value and lightness is also a percentage. It is normally written as hsl (0, 100%, 50%)

https://www.w3schools.com/css/css_colors_hsl.asp to read in detail

Font Properties:-

This property is used to font the style of the text. It plays a crucial role in designing websites by creating an engaging and readable experience. We will explore these properties in detail.

For example, h1 {

Colour: blue;

Font-weight: bold;  // it defines the thickness of the characters which has a numeric value from 100 to 900 and common values include ‘normal’, and ’bold’.

Font size: 20px;

Font-family: sans-serif

1 font-family: it is used to specify the font of a text. You can select numerous fonts as a fallback system, guaranteeing that if the first font is unavailable, the next one is utilized.

body {

    font-family: “Helvetica Neue”, Arial, sans-serif;

}

You can get your desired font variation from this link https://fonts.google.com/

  1. Font- size – The font-size property sets the size of the font using different units

Absolute units: ‘px’, ‘pt’

Relative units: ‘em’, ‘rem’. ‘%’

Keywords: ‘small’, ‘medium’ ‘large’

h1 {

    font-size: 2em; /* Relative to the parent element’s font size */

}

p {

    font-size: 16px; /* Absolute size */

}


Inspecting CSS

CSS is inspected by using the Chrome developer to see how CSS is working and to find out the bugs and resolve any issues. it is also used to hit and trial the size and font of the elements in Chrome Inspector, and also find out how CSS is used in another website you like so that you can get the colour, font and other properties to use in your website.

The CSS Box Model – Margin, Padding and Border

The CSS Box Model is a key idea in web design and layout. It specifies the rectangular boxes generated for elements in the document tree, which contain the element’s content, padding, border, and margins. Understanding how these components interact is critical when planning and modifying the layout of your web pages.

Content

This is an area where all the contents like text and images appear. all the contents are rendered in the innermost part of the box model. It is specified by the width and height of the container.

.content-box {
width: 200px;
height: 100px;
background-color: lightgray;
}

Padding

Padding refers to the gap between the content and the border. It clears the area around the content and is completely transparent. Padding can be applied to all four sides using shorthand or separately.

.padding-box {
padding: 20px; /* Applies to all sides */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
background-color: lightblue;
}

Border

This property surrounds the padding and content and enables you to specify the style, width, and colour of an element’s border.

.border-box {
border: 2px solid black;
padding: 20px;
background-color: lightgreen;
}

Margin

The outermost layer is known as the margin. It clears an area beyond the border, allowing space between the element and its neighbours. Margins are also translucent and can be configured in the same way as padding.

.margin-box {
margin: 30px; /* Applies to all sides */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
border: 2px solid red;
padding: 20px;
background-color: lightyellow;
}

Box Model Example:

This example depicts the combination of all the components.
CSS

.box-model {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 30px;
background-color: lightcoral;
}
HTML
<div class=”box-model”>
content Area
</div>

Box-Sizing Property

The box model is controlled by using the box-sizing property used by the browser. it can take two values such as
‘content-box’ – This is the default property where the width and height only apply to the content and padding and border are added outside.
‘border-box’ – in this property, the width and height already include content, padding and border.

.content-box-sizing {
box-sizing: content-box; /* Default behavior */
width: 200px;
padding: 20px;
border: 2px solid black;
}

.border-box-sizing {
box-sizing: border-box; /* Includes padding and border in the width and height */
width: 200px;
padding: 20px;
border: 2px solid black;
}

Visualizing the Box Model

It is easy to visualise the box model by inspecting the CSS in the browser and here is an image of the Box Model

Conclusion

Today I learned the basic properties of CSS which is crucial for web development. These properties are the core concept that determines how the elements are coloured, and font size spaced on a web page. By mastering this property, we can create precise, flexible and aesthetic layouts desired for our website.

Leave a Reply