En Çok Kullanılan CSS Kodları ve İşlevleri

Cascading Style Sheets (CSS), translated into Turkish as "layered style templates" or "stepped style sheets," is indispensable in today's web design. CSS, which can be used to visually format a document prepared with HTML, allows you to control the appearance of websites and applications. CSS codes, well known to front-end web developers, are frequently used to create complex styles and address visual optimization issues due to their layered structure.

As a markup language, CSS, unlike other programming languages, does not alter the written source code; it only formats them through different templates. Therefore, the use of CSS does not affect the main skeleton of the website, the algorithm structure, and the general software logic. You can think of CSS usage as the touches of a master tailor on clothes. A programmer, who can use the CSS markup language like scissors, can also trim and correct discrepancies on the website or mobile application, adjusting page gaps and color tones as desired.

Frequently Used CSS Codes and Their Functions

There are numerous codes in CSS, each with its unique functions. Let's take a closer look at the 10 most popular CSS codes that are widely used.

1. Display

With the use of the Display property in CSS, it's possible to adjust an element's position within the page and its place in the flow. You can use the display property to determine the positioning of elements as block, inline, or inline-block, allowing you to place various objects on the page as desired. The most commonly used display options are as follows:

• block: Among the basic properties of display, block arranges text blocks like divs and paragraphs. By default, block-level elements cover the area they are in as much as possible. Other block elements placed next to a block element cannot stay on the same horizontal line and automatically move down.
• inline: Occupies space in the inline direction and takes up as much space as inline elements. Normal text flow is displayed inline. It is not possible to change the width and height of objects with inline property; these areas are automatically sized according to the properties of the font or inline objects.
• inline-block: A display property that combines the features of inline and block. With inline-block, you can adjust the width and align with other elements side by side.
• flex: Among the most modern features of CSS, flex allows you to arrange elements within a page in a more flexible, practical, and seamless manner.
• none: As the name suggests, the none property makes the element it's applied to not appear on the page.

Example: 

display: block;

display: inline;

display: inline-block;

display: flex;

display: none;

2. Position

Position, among the popular CSS codes, is used to determine the location of objects within a page. Front-end web designers can make significant changes to the user interface using the position property. By positioning an absolutely positioned element (position: absolute) within a relatively positioned one (position: relative), it becomes possible to place an object in the desired area. Options like fixed, static, or sticky help make pages more dynamic and functional. You can provide a versatile user experience within the flow by fixing the site's navigation bar or important information at the top of the page with sticky.

Example: 

position: relative;

position: absolute;

position: fixed;

position: static;

position: sticky;

3. Margin and Padding

Margin and padding are popular CSS properties used to adjust the spaces between objects you add to your website and to eliminate excess space. Structurally similar, padding and margin allow you to manipulate the spaces from the inside or outside. Both properties, by default, leave space from all four sides. It's also possible to leave space from a specific side with specific options like margin-bottom or padding-left.

Example: 

div {

  margin-top: 2rem;

  margin-bottom: 2rem;

  padding-right: 1rem;

  padding-left: 1rem;

}

4. Border

Known as a border line or frame, the border property helps you define the boundaries of objects within the box model and allows you to prepare flexible designs with frame lines. Like padding, which takes its volume from internal spaces, the border property by default appears as a plain black line with a width of 1px.

Thanks to border-color, the color of the frame can be easily determined. In addition to solid colors like blue, red, yellow, gray, orange, and green, the RGB color spectrum and textured color options can also be used. Border-style can be designed to create patterns such as solid, dashed line, double line, or dotted.

Example: 

div {

  border: 2px solid red;

  /* (çerçeve kalınlığı, stili ve rengi) */

}

5. Font

Font is an important CSS code that determines how the text on your website will appear. You can change the typefaces, style, and characteristics of text through the font code. The 5 different properties of the font code can be summarized as follows:

• font-style: This property allows you to set the style of the text in different forms, such as normal or italic.
• font-variant: Enables the use of different variants of a typeface.
• font-weight: Determines the thickness of the text.
• font-size: Represents the size of the font.
• font-family: Used to define the font family that makes up the style of the text.

Example: 

h2 {

font-style: italic;

font-variant: normal;

font-weight: bold;

font-size: 1.2rem;

font-family: sans-serif;

}

6. Color

The color property in CSS is primarily used to specify the color of the text. Like border colors, the color property can take #hex, rgb, or rgba values. The color property is very important for the overall design and thematic structure of the site since it determines the font color. How primary colors can be used in harmony with background colors and how to maintain contrast values can be managed through the color value. If the color property is not specified in the CSS file, the browser's current color settings will apply.

Example:

color: red;

color: rgb(210, 85, 84);

color: hsl(10deg 55% 17%);

7. Background

The CSS background property allows you to set the background color of an element. The background option used behind fonts enhances readability and creates an aesthetically pleasing style. You can use 5 different background properties on an HTML element.

• background-color: Changes the color of the background. Different color tones and visual effects can be included in the background.
• background-image: Instead of a plain color, different images can be used for the background. Various additional layers can be added over images in the form of photographs, pictures, or vectors.
• background-repeat: Used to indicate how and how many times the background image will repeat.
• background-attachment: Shows whether the background image will move with the page or not.
• background-position: Specifies the starting position of the background image.

Example:

h3 {

background-color: #b0e4fe;

background-image: url("photo.jpg");

background-repeat: round;

background-attachment: scroll;

background-position: top;

}

8. Width and Height

The Width and Height properties allow you to adjust the width and height of a CSS box model. When creating a website, you can manually or automatically set the width and height of HTML elements.

Example:

box {

height: 5rem;

width: 2rem;

}

9. Transform

The Transform property allows you to perform scaling operations such as rotating, enlarging, reducing, and stretching an object. With functions like scale, skew, translate, and rotate, you can position an object or image on the page as you wish.

Example:

transform: skew(20deg, 10deg);

transform: translate(5rem, 40%);

10. Hover

Among the most used CSS codes, hover allows the color and style of the element being pointed at on the screen to change.

Example:

a {

color: black;

background-color: yellow;

}

a:hover {

color: white;

background-color: blue;

}

Other Important Codes Used in CSS

Other commonly used CSS codes can be listed as follows:

• z-index: Used to specify the stacking order of elements.
• :after, :before: Play a significant role in modern design structures by adding extra features and functions to existing CSS codes.
• line-height: Used to adjust the line height.
• overflow: Helps manage content that doesn't fit within the page and organize it with different tools.
• float: Facilitates the formatting of columns and rows that form the basic skeleton of a website.
• clear: Used in conjunction with the float property to determine where another element in the current flow will be placed.

Advantages of Using CSS

For a website to function smoothly and for users to operate on a flawless interface, good preliminary work is needed. Just as the site map and the applications running in the background need to work correctly, the site design also needs to be organized according to the UI/UX layout. At this point, the use of CSS provides you with great flexibility. The fundamental advantages that CSS offers to website or mobile application developers are as follows:

High Website Speed

A website coded with pure CSS or a lightweight CSS library can achieve high loading speeds. The CSS structure positioned over a basic HTML template reduces preload times, making the website load much faster.

Consistent Design Schema

The CSS markup language, using the most modern design schemas, allows for the seamless design of different effects and visual elements. Its elegant, simple, and practical design structure also makes it easier to design user-friendly websites.

Practical Maintenance Process

Thanks to a systematically coded CSS file, it becomes possible to effortlessly update and change all design elements of a website or application, from font styles and background colors to banner plugins and navigation.

Full Compatibility with Different Devices

CSS, enabling responsive design, allows for coding specifically for various devices such as TVs, monitors, laptops, tablets, and smartphones. Being able to create designs fully compatible with all devices maximizes the efficiency and performance you get from your website.

Ease of Use

Like JavaScript, CSS allows for a detailed examination and optimization of all written codes through any browser.

You can also participate in Bootcamp training organized for free by Techcareer.net to specialize in CSS and become a versatile Front-End developer. Through Bootcamps opened according to candidates and areas of expertise, you can quickly climb the career ladder and enrich your CV for the most suitable job listings.

Frequently Asked Questions

Is learning CSS necessary?

If you want to pursue a career as a Front-End developer, you can learn HTML and CSS before a programming language like JavaScript or PHP, making for an easier entry into programming.

How does knowing CSS provide an advantage in job applications?

Specializing in HTML and CSS offers significant advantages in the web design process. It helps you think more versatilely about topics like responsive page design, traditional page layout, page animations, and modern UI/UX experience.

What are the participation requirements for Bootcamps?

On Techcareer.net, there is a Bootcamp training suitable for every level. You can explore the one that suits you by checking the participation requirements and apply for the training that will guide your career.

Are Bootcamp trainings charged?

All Bootcamp trainings on Techcareer.net are free of charge.

Can I apply for job postings as a junior candidate?

Yes, both junior and experienced candidates can apply.