Monthly Archives: December 2021

CSS INTRODUCTION Before talking about the post "Simple Selectors in CSS" let's give the definition of CSS. CSS stands for Cascading Style Sheets, with CSS we describe how we want the elements of our HTML pages to appear, we customize for example fonts, colors, backgrounds etc. Created by the World Wide Web Consortium (W3C) as a "complementary" to HTML. THE RULE OF CSS For each selector we have a key-value pair called a declaration. We will talk about selectors in detail later. HOW TO ADD CSS TO OUR HTML PAGES There are three ways to insert [...]

CSS COMBINATORS SELECTORS There are four different combinator selectors in CSS: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) DESCENDANT SELECTOR The descendant selector matches all elements that are descendants of a specified element. The figure shows the paragraphs that are the children of a div element. The descendant selector - typically represented by a single space character () - combines two selectors such that elements corresponding to the second selector are selected if they have an ancestor element (parent, parent of parent, parent of parent of parent, etc.) which corresponds [...]

COLORS IN CSS Colors are specified using predefined color names or RGB, HEX, HSL, RGBA, HSLA values. NAMES OF THE CSS COLORS In CSS, a color can be specified using a predefined color name. CSS/HTML supports 140 standard color names. Another valuable resource where you can find and choose from thousands of colors is the following website: https://coolors.co/ select explore and then the desired palette. CSS BACKGROUND COLOR Set the background color for HTML elements. CSS TEXT COLOR Set the text color. CSS BORDER COLOR Set the border color. VALUES OF THE CSS COLORS In CSS, [...]

BOX MODEL We introduce the topic "The box model in CSS" by saying that everything in CSS is surrounded by a box and understanding these boxes is the key to being able to create layouts with CSS or to align elements with other elements. In this lesson we will take a proper look at the CSS Box Model so that you can create more complex layout tasks with an understanding of how it works and the terminology related to it. EXPLANATION OF THE BOX MODEL Explanation of the different parts: Content - The content of the [...]

POSITIONING WITH CSS In the normal flow, the elements are positioned starting from the top left and following one another down to the right, until they occupy all the available space. Elements spread out across the edges. One of the systems used to vary this scheme is positioning, through which, by acting on the position property, the position of an element can be varied with respect to its original position in the document and also with respect to the other elements that surround it. Another method to vary the default schema is the floating, with which you can create [...]

CSS FLEXBOX Before Flexbox Layout, there were four layout modes: Block, by sections on a web page Inline, for the text Table, for two-dimensional table data Positioned, for the explicit position of an element The CSS Flexbox Layout makes it easy to design flexible and responsive layout structures without using floats or positioning. To start using the Flexbox model, you must first define a flex container. The Flexible Box Module, usually referred to as a flexbox, was designed as a one-dimensional layout model and as a method that offers space distribution between elements in an interface and powerful alignment [...]