CASCADIND STYLE SHEETS

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 [...]

CSS MEDIA QUERIES Multimedia queries in CSS3 have extended the idea of CSS2 media types. Instead of looking for a device type, they look at the capacity of the device. Multimedia queries can be used to verify many things, for example: window width and height width and height of the device orientation (is the tablet / phone in landscape or portrait mode?) resolution Using media queries is a popular technique for providing a custom style sheet to desktops, laptops, tablets, and mobile phones (such as iPhones and Android phones). SYNTAX A media query consists of a [...]

CSS FONTS Before introducing the topic "THE FONTS IN THE CASCADE STYLE SHEETS" let's say that choosing the right font has a huge impact on how readers experience a website. The right font can create a strong identity for your brand. It is important to use an easy-to-read font. The font adds value to the text. It is also important to choose the correct color and size of the text for the font. GENERIC FONT FAMILIES There are five generic font families in CSS FONTS: Serif fonts have a small stroke at the edges of each letter. They create [...]