For Beginners: What is CSS?
Thanks to CSS, we can determine the visual properties of the website we created with HTML codes. To learn CSS and use this knowledge, it is also necessary to learn HTML at least at a basic level. Because without HTML codes, CSS codes are meaningless.
What is CSS?
CSS controls how HTML codes are presented. It allows us to design all content in a functional and aesthetic way. We determine the features such as where the menu will be, fonts, placement of all items with CSS. The latest version of CSS, which has been constantly updated since its emergence, is CSS3.
CSS is an acronym for Cascading Style Sheets, which stands for Cascading Style Sheets. Actually, this name gives the necessary information about what CSS is. Cascading means that CSS codes are read step by step from top to bottom, while Style and CSS have a design function.
What is the CSS syntax like?
CSS codes consist of two main components, selector and declaration (definition). While the selector allows us to choose which of the HTML codes we point to, the definition is the part where we express the change we want to make on the selected item.
Examples of selectors: #pageheader, .comment div, li
Definition examples: {font-size: 10px; color: red;}, {width: 100%; background-color: grey;}
Selectors can point to many items, such as tag names, IDs, classes. Definitions contain the properties and values that we define for these items. As we have seen in the examples above, when choosing an ID, we call the ID that we specified in the HTML with a hashtag (#) in front of it, put the classes with a dot, and call the elements into the CSS file with their name only. While more than one of the same classes and elements can be used on a page, an ID can only appear once per page.
The most basic information about definitions is that each definition must be placed in curly brackets and a semicolon must be placed at the end of the property or values. A definition can contain more than one property and value.
The extension of the CSS file is .css and it is linked with the HTML file by giving a link before the . You can see the example in the photo.
Instead of opening a separate file, you can write the CSS codes inside each element by choosing the Inline Style method, or you can enter the codes inside the with the Internal Style Sheet method. However, we recommend the External Style Sheet method in the example, as these two methods will create confusion, especially when designing multi-line and multi-page sites.
Cascading in CSS
It may also be preferable to use different methods together while designing your website. In this case, the styles you specify will work in a certain order. Accordingly, the priority is in the codes you enter as inline style. Then Internal Style Sheet and External Style Sheet come into play. Browser's own style codes work for items for which no definition is entered.
What does it mean? For example, you set the font size of all paragraphs to 10 px in the .css file you created. But you want a paragraph to appear with smaller font size. In this case, it is sufficient to define CSS inline in the paragraph that will appear in small fonts, as it will take precedence over your .css file.
In this article, we have covered the most basic information about CSS. But to design a functional and professional website using CSS, you need to learn more than that. The HTML5 CSS3 book prepared by Ahmet Oğuz Mermerkaya is a great resource for accessing all the information that will help you determine your route in your web design journey.
