Introduction to CSS – Part 1

Photo By Jackson Sophat on Unsplash

Cascading Style Sheets

It describes how HTML elements are displayed on a webpage or other media. CSS simplifies our work by allowing us to control multiple elements or sections simultaneously.

If we compare HTML to the layout/structure of a house, then CSS represents the paint color, roof type, tile texture, and even the position of furniture.

For example, let’s say our neighbor is building a house with three rooms, belonging to Budi, Wati, and Nina. In this case, we have elements called “rooms,” each with a different ID, corresponding to the owner’s name.

With this naming system, we can instruct the builder that Nina’s and Budi’s rooms should be painted blue, while Wati’s room should be painted cream.

This concept applies to HTML and CSS styling—to apply a style to a specific section, we must first define the element using a selector.

CSS can be inserted into an HTML document in three ways :

• Inline CSS
  

  sintaks CSS disipkan langsung pada tag/elemen yang kita buat dengan menggunakan attribute style

• Internal CSS

  sintaks CSS disisipkan pada halaman yang sama dengan menggunakan Tag <style> </style>

• External CSS

  sintaks css disimpan pada file terpisah berekstensi .css misalnya style.css dan dihubungkan dengan menggunakan tag link

To understand these better, let’s discuss each one in detail.

As mentioned above, this type of CSS is directly inserted into the HTML tag we create using the style attribute. (If you’re still confused about what a tag and an attribute are, please refer to the basic HTML lesson first).

Example : I want to create a page title with blue text and a thin underline, or give a background to an element. Using inline CSS, you just need to write it like the example below (see the result in the result tab).

<h3 style="color:#33567A; border-bottom:solid 1px; text-align:center">
Pelajaran CSS inline
</h3>


<p style="text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis earum explicabo, repudiandae sed laborum commodi accusantium hic, autem alias, beatae porro excepturi nulla minus vitae voluptatem in debitis iste!
</p>

Another example :

<div style="background:#D6E0FE; padding:10px;">
<h3>Contoh File dengan menggunakan background</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis, maxime modi quae temporibus provident pariatur magni minima optio? Magni voluptatem dolore sapiente deserunt. Recusandae blanditiis, molestiae perspiciatis molestias dolore!</p>
</div>

Brief explanation :

Color is used to apply a color to the text within the selected element, filled with a color code.

To easily get color codes, you can install the Gpick app (open source) for Linux users, or Color Scheme (paid) for Windows users, or you can also use design software like Gimp or Adobe Photoshop. Color codes can be filled with :

• Valid color names (in English), for example, red, green, blue.
• RGB code: rgb(255, 0, 0) or rgba(255, 255, 255, 0.5) with added transparency.
• Hexadecimal color code with 6 digits, for example, #000000 (Black), #CCCCCC (Gray), or #FFFFFF (White), etc.

Border is used to add a line to an element, filled with the type of border (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden, mix — feel free to try each one), followed by the border width (1px, 2px, etc.), then followed by the color code.

Additionally, borders can also be specified more specifically, such as border-left, border-right, border-bottom, or border-top. For more detailed explanations regarding borders, you can click this link.

Text-align is used to align the text we create, filled with left, right, center, or justify.

Background  is used to set the background for the element we create. The background can be filled directly using color codes like the topic discussed above, or it can also be done using a URL for an image.

Specifically for background images, we can add repeaters horizontally or vertically with options such as repeat, no-repeat, repeat-x, repeat-y, initial, and inherit.

This technique was often used “back in the day” to add a realistic effect to the designs we made before the flat design era.

This technique is used when the element we create is larger than the available background image, giving us the option to repeat it vertically/horizontally or not at all.

In addition to repeaters, the background image can also be positioned, for example, I want it vertically centered and horizontally at the top. To learn more about backgrounds, we can explore it here.

<header style="background:url('http://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727-1024x478.jpeg') no-repeat center center; padding:50px">
  <h3 style="color:#007EC7;">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>


<header style="background:url('http://mangcoding.com/wp-content/uploads/2017/01/1368fa8-300x300.jpg') no-repeat left top; padding:50px">
  <h3 style="color:#007EC7; text-align:right">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>


<header style="background:url('https://duckduckgo.com/assets/logo_homepage_mobile.normal.v107.svg') repeat; padding:50px">
  <h3 style="color:#007EC7; text-align:left">Welcome to my Site</h3>
  <p style="background:rgba(255, 255, 255, 0.7); padding:5px">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>

Padding is used to create space inside an element’s content. Padding is the opposite of margin; in short, padding is inward, while margin is outward. Please refer to the image below.

Conclusion

Explanations about other CSS syntaxes will be covered in the following discussions, or you can find a complete explanation at https://www.w3.org/TR/CSS21/indexlist.html.

That’s a brief explanation for the introduction to CSS, hope it’s helpful. Actually, using CSS with the inline technique is not recommended for frequent use, as it makes the HTML structure look untidy, and we have to insert the CSS code individually for each element we create.

Therefore, in the next discussion, we will lea

rn how to organize CSS more neatly by using selectors that will be implemented in internal and external CSS.

That’s the explanation of Introduction to CSS – Part 1 that Mangcoding can share. Hopefully, this article is useful and provides new insights for you. If you have constructive feedback or suggestions, feel free to leave a comment or contact us via email and Mangcoding’s social media.

Keep Learning ^_^ and Stay Motivated.