<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

Color property

<p>With the <strong><samp>color </samp></strong>property, developers can specify the text color or foreground color of an element.</p>

<p>CSS accepts various forms of color values, we will be getting to those color value types in the upcoming lessons.</p>

Write Missing

<p>Create a style rule in which the <strong><samp>color </samp></strong>is green.</p>

Color Values

You can indicate CSS colors with the RGB model (referring to RED/GREEN/BLUE and related tones). There are 3 value types for CSS colors:

<p><strong>color keyword</strong> like <strong><samp>red</samp></strong>, <strong><samp>green</samp></strong>, <strong><samp>blue</samp></strong>, etc.</p>

<p><strong>HEX value </strong>like <strong><samp>#ff0000</samp></strong>, <strong><samp>#00ff00</samp></strong>, etc.</p>

<p><strong>RGB value </strong>like<strong><samp> rgb(255, 0, 0)</samp></strong></p>

CSS3 has several other color formats such as HSL, HSLA, and RGBA that also support alpha transparency.

Color keywords

<p>The simplest method for setting colors in CSS and HTML is to use color names. All you need to do is choose a<strong> styling property </strong>and then assign a color name which acts as a <strong>value</strong>.</p>

<p>There is a list of keywords referring to available color names. These basic color keywords are: <samp><strong>aqua</strong></samp>, <samp><strong>black</strong></samp>, <samp><strong>blue</strong></samp>, <samp><strong>fuchsia</strong></samp>, <samp><strong>gray</strong></samp>, <samp><strong>green</strong></samp>, <samp><strong>lime</strong></samp>, <samp><strong>maroon</strong></samp>, <samp><strong>navy</strong></samp>, <samp><strong>olive</strong></samp>, <samp><strong>purple</strong></samp>, <samp><strong>red</strong></samp>, <samp><strong>silver</strong></samp>, <samp><strong>teal</strong></samp>, <samp><strong>white</strong></samp></p>

Fill Missing

<p>Declare a style rule in which color is <strong><samp>aqua</samp></strong>.</p>

HEX color values

<p>By far the most commonly used method of defining color is the <strong>Hex </strong>(short for Hexadecimal) color declaration.</p>

<p>The <strong>hexadecimal </strong>format for colors uses hexadecimal digits for indicating <strong>components </strong>of red, green, and blue.</p>

<p>Hex represent colors using a six-digit code, preceded by a hash character, like<strong> #rrggbb</strong>, in which <strong>rr</strong>, <strong>gg</strong>, and <strong>bb </strong>represents the red, green and blue component of the color respectively.</p>

<p>The value of each component can vary from <strong>00 </strong>(no color) and <strong>FF </strong>(full color) in hexadecimal notation, or 0 and 255 in decimal equivalent notation. Thus<strong><samp> #ffffff</samp></strong> represents white color and<strong><samp> #000000 </samp></strong>represents black color.</p>

Select Correct Answer

<p>Which <strong>Hex </strong>value represents white color?</p>

RGB Color values

<p>Colors can also be defined in the RGB model (<strong>Red</strong>, <strong>Green</strong>, and <strong>Blue</strong>) using the<strong><samp> rgb()</samp></strong> declaration. The <strong><samp>rgb()</samp></strong> function accepts 3 values, which specify the amount of red, green, and blue components of the color.</p>

These values are can range from 0 to 255, where 0 represents no color and 255 represent full or maximum color.

<p>If all values are 255<strong><samp> rgb(255, 255, 255)</samp></strong> the color will be white. Likewise, if all values are set to 0 the color will be black.</p>

<p>Create a paragraph style rule in which the color is <strong>red</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

HEX color values

Learn programming and get hired