HTML & CSS 2

8th November 2022  (Week 12)

Mabuchi ARATA / 0351579 

Typograohy / Bachelor of Design (Hons) in Creative Media

1, Introduction

For several weeks, we've been develeped sevelal websites for HTML studyings. The idea of HTML functions we've learnt so far is 

・Different text style

・Applying links and texts

・Using CSS code to apply different  features (such as colours, size and margin) to the texts.

The problem about current my CSS code is that texts can't be aligned horizontally, or text itslf can't organized unless function available on CSS code.

This page's main toic is about CSS function that can be used to make column in the HTML pages.

2, Lectures

1, CSS file (Lecture by Mr. Shamsul Hamimi Ab. Rahman)

In the previous lecture, we've learnt about the ideas to use CSS code to apply functions such as margin or different colours for each text in my HTML codes, however, we can also build css code itself to build features to create rows and columns for your HTML files as shown below.

1, CSS document

To create any rows or column for your HTML page, you have to create CSS code document in your file where you save your html code. When you're using Adobe dreamwaver, you can edit both of HTML document and CSS documet. CSS document itself is similar to the CSS code 

where you apply to the HTML for text.

In the CSS document, you need to type variable name for different function you want to add each document at the first time, then after indent, apply the function as "function's name : adjustment" like image shown below.

As you can see, you can also apply your CSS code for main part of your HTML code such as main, or other part too. The point you must make sure that Once you apply function to the part of yorur HTML code, all text might be unreadable due to the colour issue, so make sure to check any colour or other elements to avoid lose of readability.

2, Rows and Columns

This is the main pat of tis topic, the website is sometimes required to organize text and other informations within the columns, CSS is the best way to orgaize texts even it's also able to place each texts horizontally.

To use rows and columns by HTML document and CSS document, you must use <div> code in your HTML document and define to use CSS code about rows (make sure you also need to create "container code" for creating a space for your text) and insert <div> tag about columns to create horizontal grid as a diagam shown below. 

.container {                                              

width: 90%;                                      

background: #000000;                     

margin: auto;                                    

border: 1 rgba(243,243,243,1.00);   

After creating code shown above in CSS document, you need to type CSS code to create to create rows and column in your CSS document as shown below.

.row{

padding: 10px;

background: rgba(34,34,34,1.00);

display: flex;

gap: 2%;

justify-content: center;

}

.column{

min-width: 18%;

background: rgba(197,197,197,1.00);

min-height: 200px;

}

Once you create CSS codes for each section, apply <div> tag and insert your CSS code as shown below.

<div class="container">

<div class="row">

<div class="column">

#insert text here

</div>

<div class="column"> 

#insert text here

</div>

<div class="column">

#insert text here

</div>

</div>

</div>

</div>

Once you type code like shown above, the HTML docment refers to the CSS code's order, then it creates the columns in a rows inside of container as shown below, the colour is changable depends on code shown later.

Inside of each column you can insert any text or inages you like. 

To explain more about the functions of CSS code, you need to type like shown below.

.container: {

width: 90%;

background: #000000;

margin: auto;

border: 1 rgba(243,243,243,1.00);

}

.row{

padding: 10px;

background: rgba(34,34,34,1.00);

display: flex;

gap: 2%;

justify-content: center;

}

.column{

min-width: 18%;

background: rgba(197,197,197,1.00);

min-height: 200px;

}

To explain each code's function one by one, I'll use bullet point to understand easily for each text in the CSS codes.

・background : This is the command to determine the colour of the space where <div> tag determines at (which also means that this codes determines colour inside of the each grid in the <div> tag.) The colour itself can be chosen by RGBa code, Hex code, and HLSA code.

    ・rgba(147,147,147,1.00)

    ・#939393

    ・hsla(0,0%,58%,1.00)

・border : This is the command to createa border line for <div> section, if you want to apply borders, you need to type command about thickness in pixel, line statement (solid? dashed? and so on..., there are many different types of border style existed.) and colour to create various types of border line can be made. (Reference  W3school, "CSS border Property", https://www.w3schools.com/cssref/pr_border.php)

・display : In the w3school, the funcion display defines as "specifies the display behavior (the type of rendering box) of an element.", in this section, "dislay" code defines the behaviour of the section itself, for example in my code "display : flex" code can adjust the size of the element in the HTML code depends on the HTML window size, as the result, the element can be show its full visual in any window size.

・gap : This CSS command is providing space between two different element, the point ou can see is that this command is able to use percentage rather than pixel, this command can be used to adjust the space between two different elemnet in any window size. 

・justify-content : This command determines the position of the elements in whereever you'd like to place in. Sometimes you want to place elements in the left side or right side, even i the center, by using this command, you can adjust the position for the elements. You can use commands like right, left  or center .

・margin : This is the command to provide any free space around elements. Sometimes any free scape can be used for improving readability in the Website contents and it also helps to create space for elements so readers can read the elements confortably. When you use this command, the command auto is recommended, this isbecause it can adjust the space for elements automatically.

・min-width & min-height : As you can understand the meaning from the sentences, this coommand provides minimum horizontal/vertical length. This command provides the length to the elements even the text is too short to fill inside of the elemets. You can use both of percentage and pixel for this command, however, you should use percentage if the size is limited (like the horizontal scale), and you should choose pizel if there is no size limitations (like vertical size.)

・padding : This command is similar to the function of margin. his command also provides space around an element's content, however, unlike margin's function it provide space between an element's border and the element's content, it's like providing sace between book page and book's title. It can be said that margin is providing space for multiple elements within one space, on the other hand, padding forcuses one element to provide space around one element. (reference :  HubSpot, CSS Margin vs. Padding: What's the Difference? Jamie Juviler , Published: January 06, 2022)

・width : This is the command to adjust the length of width compared to the whole HTML window. depends on the window's size, the horizontal size changes its length.

There are also different code to build your own CSS command to create elements you like to organize your text in various way, but I used the commands shown above to develop my website for interactive media submission.