<h2>Introduction to the course</h2><p>Cascading Style Sheets (CSS) is a style sheet language that holds website presentations on their shoulders by completing HTML with a wide range of styling options. CSS is considered a rule-based language. But what does that mean? It means you&#x27;re in charge of making that will be applied to elements on your web page.</p><h2>Who is this course for?</h2><p>CSS described Web Page presentation. Most, ending towards all, websites use CSS, so if you&#x27;re an aspiring web designer or web developer then you&#x27;re exactly where you need to be.</p>

<h2>What does this lesson cover?</h2><p>In CSS developers will bump into the term &quot;viewport&quot;, which indicates the part of the website, which is visible in the browser window.</p><p>In this lesson, we&#x27;ll be covering the term viewpoint thoroughly, with theoretical examples paired with practice-oriented lessons that will lead to lesson quizzes that aim at putting the developers&#x27; knowledge to practice.</p>

Viewport

<h2>What does this lesson cover?</h2><p>The CSS specification defines the default display value for all the elements. This lesson covers the display property. and its values.</p><p>In this lesson, we&#x27;ll be going over those values, such as the block value, the inline value, the inline-block value, and the none value.</p><p>Each of these values will be depicted in code examples all throughout the lesson with their corresponding lesson quizzes to help developers but theory into practice.</p>

Display

<h2>What does this lesson cover?</h2><p>Oppacity in CSS allows elements to become see-through. Elements such as texts and images.</p><p>In this lesson we&#x27;ll be defining how to add opacity with the opacity property, the property takes on a specific value, but those details will be revealed in the lesson.</p><p>Additonally, we&#x27;ll be dealing with terms such as &quot;transparent colors&quot; and codce snippets that will support them.</p>

Opacity

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be referencing the term box model. Every HTML element is a box. The CSS box model describes how rectangular boxes are laid out on a web page.</p><p>The box model consists of a wide range of components that we will e getting into in this lesson.</p>

Box Model

<h2>What does this lesson cover?</h2><p>In CSS we use the color property to identify the color of a given text. This lesson expands om the syntax of the said property with supported code examples to depict the property in use.</p><p>We&#x27;ll also talk about color values, HEX color values and RGB color values. Each of the specified sections will be given their individual definitions with supported code examples.</p>

Colors

<h2>What does this lesson cover?</h2><p>We&#x27;ll be scratching the surface of CSS, by defining its usage, the main advantages that CSS offers your web application, and other surface-level characteristics.</p><p>Then we&#x27;ll move on to introduce the new CSS3 version, compare and contrast the said version with CSS, assess the pros and cons, etc. </p><p>The provided lesson quizzes will help in digesting the knowledge you just took in to a higher degree.</p>

Introduction

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be associating with CSS grid layouts.</p><p>The CSS grid layout is a technique for creating a responsive website by dividing its layout into columns and rows.</p><p>We&#x27;ll be expanding on the further identification of CSS grid layouts paired with their usage and behavior in code.</p><p>Additionally, we&#x27;ll cover the topic of the grid system, and thus, create a grid system with CSS.</p>

Grid Layout

<h2>What does this lesson cover?</h2><p>Positioning elements appropriately on the web pages is a necessity for a good layout design. CSS offers a wide range of methods that are used for positioning elements.</p><p>In this lesson, we will be referencing those methods with their corresponding properties.</p><p>There&#x27;s static positioning, relative positioning, absolute positioning, and fixed positioning.</p>

Position

<h2>What does this lesson cover?</h2><p>The newer version of CSS: CCS3 has the ability to add drop shadow effects to the elements. </p><p>In this lesson, we&#x27;ll be getting used to adding box shadow and text shadow with their corresponding properties.</p><p>This will be clearly depicted in various code examples and we&#x27;ll return to their syntax specifications in lesson quizzes to test your knowledge.</p>

Shadows

<h2>What does this lesson cover?</h2><p>CSS offers a wide range of properties that come in handy for setting dimensions.</p><p>This lesson will be covering the main and most used of the bunch. The properties are the width and height, maximum and minimum sizes.</p><p>The four will be separated into two groups as depicted and we&#x27;ll be referencing the syntax and structural differences amongst them.</p>

Dimensions

<h2>What does the lesson cover?</h2><p>CSS background is a shorthand CSS property letting you indicate multiple styles for the element background.</p><p>In this lesson, we&#x27;ll expand on all the various properties CSS proposes for background styling. </p><p>Background Styling indicates background colors, images set in the background, etc.</p>

Background

<h2>What does this lesson cover?</h2><p>It&#x27;s time to include CSS into HTML, but how? There is no one solution that works for all HTML documents, in this lesson we&#x27;ll be contrasting three methods in depth, and they are Inline Styles, Embedded Style Sheets, and External Style Sheets.</p><p>As the name entails, External Style Sheets require importing from an external source, so we&#x27;ll dedicate a separate lesson to explaining how and when to do so.</p>

Style Sheets

<h2>What does this lesson cover?</h2><p>The term &quot;Media Queries&quot; is widely used in CSS for web page development.</p><p>Media queries allow you to customize the presentation of your web pages. This lesson aims at expanding the definition of media queries and put them into use.</p><p>By &quot;putting them into use&quot; we mean implementing them in code and reviewing their behavior.</p>

Media Queries

<h2>What does this lesson cover?</h2><p>The CSS float property specifies whether a box should float or not. Elements that come after the floating element will flow around it. The clear property specifies which sides of an element&#x27;s box other floating elements are not allowed.</p><p>In this lesson, we&#x27;ll be referencing how and what it takes for elements to float and the clear property</p>

Float

<h2>What does this lesson cover?</h2><p>CSS transitions allow animate a property from the old value to the new value smoothly over time.</p><p>In this lesson, we expand on how exactly transitions are added with supporting code examples that depict them in a more understanding way.</p><p>We&#x27;ll also be referencing keywords such as Multiple Transitions, and Additional Transitions.</p>

Transitions

<h2>What does this lesson cover?</h2><p>The word &quot;padding&quot; can be defined as the space between the border and the element content.</p><p>CSS generates padding with the help of the background color of the element in question. This lesson depicts how that takes place with supporting properties that are clearly depicted in code examples for better understanding.</p>

Paddings

<h2>What does this lesson cover?</h2><p>The newer version of CSS– CSS3, allows developers to create color gradients.</p><p>Gradients are a smooth transition between two or more colors. There are two ways to style CSS Gradients and expanding on those methods is the focal point of this lesson. We&#x27;ll define them separately, nd include in-depth information on each of them with the added help of code examples and lesson quizzes to support their main idea.</p>

Gradients

<h2>What does this lesson cover?</h2><p>As all programming languages have their own syntax, CSS is no different. The two main parts of CSS syntax/structure are one or more than one declarations and a single selector.</p><p>This lesson will expand on the usage of the two, and thus move onto a whole other concept that is apart of CSS syntax and the syntax of many other programming languages called comments.</p>

Syntax

Lesson Challenge

<h2>What does this lesson cover?</h2><p>CSS offers a wide range of properties that are typically used to align elements on a given web page.</p><p>For example, a given text inside the block-level elements can be aligned by initiating the text-align property.</p><p>Additionally, we&#x27;ll be working towards Center Alignment, Aligning with Position, and Left and Right alignments.</p>

Alignment

<h2>What does this lesson cover?</h2><p>The newer version of CSS: CSS3, allows transitions to be in control of how animations work and offers time with keyframe-based animations that allow developers to specify the changes in CSS properties over time as a set of keyframes, like flash animations.</p><p>In this lesson, we&#x27;ll learn how to create animations, the concept of keyframes, and additional properties.</p>

Animations

<h2>What does this lesson cover?</h2><p>The border properties allow you to define the border area of an element&#x27;s box. CSS offers various properties to style borders that you can bump into on many web pages.</p><p>We&#x27;ll expand on the border-style property that sets the style of a box&#x27;s border, the border-width property to specify the width of the border area, and finally the border-color property that sets the border color.</p><p>This lesson will expand on all the mentioned properties with syntax and structure definitions.</p>

Borders

<h2>What does this lesson cover?</h2><p>The newer version of CSS– CSS3, provides several properties for styling the font of the text.</p><p>We&#x27;ll be employing the font-family property to take full advantage of those methods.</p><p>We&#x27;ll get into all the specifics of fonts including Font Size, Font Wright, and Font Style.</p>

Fonts

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be going over one of the two core aspects of CSS syntax– selectors.</p><p>We&#x27;ve referred to selectors in the past lesson, however, the importance of selectors entails an additional reference. </p><p>We&#x27;ll further expand on the types of selectors, they are the Universal Selector, the Type Selector, the Id Selector, and the Class Selector. We&#x27;ll thus compare and contrast the types.</p>

Selectors

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be referencing the last component of the Box Model: Margins.</p><p>The margin properties allow you to set the spacing around the border of an element&#x27;s box. This lesson expands on their syntax and behavior in code.</p><p>Developers can additionally specify the margins for the individual sides of an element, this is another topic of this lesson.</p>

Margins

<h2>What does this lesson cover?</h2><p>The newer version of CSS– CSS3, allows developers to define of various text styles such as alignment, spacing, decoration, transformation, and others.</p><p>We&#x27;ll be referencing and putting to use the main text properties in this lesson.</p><p>The properties that we&#x27;ll be expanding on the furthest are the text-decoration property, the text-alignment property, and the text-transformation property. </p>

Text

<h2>What does this lesson cover?</h2><p>This lesson introduces another CSS concept called CSS units. CSS units refer to values that properties accept. </p><p>This lesson opens up the brackets of Units in CSS by expanding on Relative Length Units and Absolute Length Units.  These keywords will also be equipt with their definitions.</p>

Units

<h2>What does this lesson cover?</h2><p>The newer version of CSS– CSS3, allows developers to style links in each state.</p><p>Styling links indicates the modification of its color, and the removal of the default underline. </p><p>Both of the mentioned actions will be referenced in this lesson with their corresponding and supporting properties. We&#x27;ll depict the usage of the syntax of the said properties in code and provide lesson quizzes to test your knowledge on the manner,</p>

Links

Positioning

<p>Positioning elements appropriately on a web page is a necessity for a good layout design. There are several methods in CSS that you can use for positioning elements in addition to placing certain elements in front of or behind others which come in handy for certain animation effects.</p>

<p>Positioning elements can be accomplished by using the following methods:</p>

<p><strong>▸ Static Positioning</strong></p><p><strong>▸ Relative Positioning</strong></p><p><strong>▸ Absolute Positioning</strong></p><p><strong>▸ Fixed Positioning</strong></p>

Static Positioning

<p>A <strong>statically positioned </strong>element is always positioned according to the normal flow of the page. HTML elements are positioned staticly by default.</p>

<p>Statically positioned elements are not affected by the <samp><strong>top</strong></samp>, <samp><strong>bottom</strong></samp>, <samp><strong>left</strong></samp>, <samp><strong>right</strong></samp>, and <samp><strong>z-index </strong></samp>properties. Refer to the code example below:</p>

Relative Positioning

<p>An element with relative positioning is positioned relative to its normal position.</p>

<p>In the relative positioning scheme, the element&#x27;s box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties <strong><samp>top </samp></strong>or <strong><samp>bottom </samp></strong>and/or <strong><samp>left </samp></strong>or <strong><samp>right</samp></strong>.</p>

<p>A relatively positioned element can be moved and overlap other elements, but it keeps the space originally reserved for it in the normal flow.</p>

Write Missing

<p>Declare a style rule that is shifted to the <strong>right </strong>by <strong>80px</strong>.</p>

Absolute Positioning

An absolutely positioned element is positioned relative to the first parent element that has a position other than static.

<p>If no such element is found, it will be positioned on a page relative to the &#x27;top-left corner of the browser window. The box&#x27;s offsets further can be specified using one or more of the properties <samp><strong>top</strong></samp>, <samp><strong>right</strong></samp>, <samp><strong>bottom</strong></samp>, and <samp><strong>left</strong></samp>, like so:</p>

<p>Declare a style rule that <strong>position </strong>is <strong>absolute</strong>.</p>

Fixed Positioning

<p><strong>Fixed Positioning </strong>is a subcategory of <strong>Absolute Positioning</strong>.</p>

<p>The only difference is, a fixed positioned element is fixed with respect to the browser&#x27;s viewport and does not move when scrolled. Its purpose is to help to put the text fixed on the browser. It&#x27;s structure in code is given below:</p>

Fill Missing

<p>Declare a style rule where the <strong>position </strong>is <strong>fixed</strong>.</p>

<h2>What does this section cover?</h2><p>This section expands on the basic concepts of CSS. This in now way indicates that the lesson is easy to cover. The fact of the matter is that some surface-level concepts correspond with the fundamentals of CSS.</p><p>We&#x27;ll be covering concepts like Style Sheets, Selectors, Units, etc. So the focus will be on the overall syntax of CSS.</p>

Basics

<h2>What does this section cover?</h2><p>Styling in CSS indicates the use of a wide range of methods for each little incling of your web page. What is that limited to? It&#x27;s difficult to even pinpoint the limit, however, this section tries its best.</p><p>We&#x27;ll reference Color Properties, Background Properties, Gradient Properties, Font Properties, Link Properties and Text Properties.</p>

Styling

<h2>What does this section cover?</h2><p>The Box Model in CSS The consists of a box that serves as a wrap on every element in HTML. The wrap consists of paddings, borders, and margins paired with content.</p><p>This section expands on each element of the Box Model and defines that with the help of properties, as each method has more than one property.</p>

<h2>What does this section cover?</h2><p>Creating effects with CSS entails the usage of the following: Opacity, Shadows, Transitions, and Animations.</p><p>Each of these concepts in CSS have supporting properties that help in implementing the specified effect.</p><p>The focal point of this section is learning how to add the effect related proerties and initiate them properly while taking advantage of all they have to offer.</p>

Effects

<h2>What does this section cover?</h2><p>CSS page layout strategies allow developers to take elements incorporated in a web page and control where they&#x27;re positioned.</p><p>These techniques comprise the display, position, float, and alignment.</p><p>Each of the above-mentioned keywords presents its very own properties that help the development of the page layout.</p><p>This section focuses on addressing those properties (the properties are not limited to one per keyword, some keywords may have multiple properties), their usage, and behavior in code.</p>

Layout

<h2>What does this section cover?</h2><p>Responsive web design in CSS indicates resizing, hiding, or changing the location of the content to make it look more flattering on the user&#x27;s screen (on the web page).</p><p>This section covers every property, and technique that&#x27;s needed to achieve responsiveness.</p><p>We&#x27;ll be addressing terms and keywords like viewport, grid layout, and media queries.</p>

CSS

Achievements

Fixed Positioning

Learn programming and get hired