Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

The CSS syntax writes somewhat similar to JavaScript objects. It is important to understand where to properly set properties, selectors, and values within your CSS. In this lesson we’ll talk about this syntax and work an example. 


https://app.egghead.io/api/v1/lessons/css-set-css-properties-and-values-syntax/subtitles

Instructor: [00:00] CSS is a language that controls how documents are presented on the Web to users. This means it controls how text, images, and other elements lay out on a page, how they respond to different devices, and so much more.

[00:14] We can write a quick example of CSS by styling some specific content to appear as the color red on the page. CSS has two main components. First, the selector and its corresponding block. This first statement is called a selector. This is how we tell the browser which elements of HTML we want to apply the defined styles to.

[00:35] Everything defined inside of these curly braces will apply to this selector only. These are also called CSS declaration blocks. Inside of these blocks are the CSS declarations.

[00:48] On the left-hand side of the colon, these are called properties. Properties are the feature of the page we want to style. In our case, we want to change the color feature of our h1 selector to be the color red.

[01:01] On the right side of our colon, these are called values. Each property has a specific set of valid values that can be chosen to implement on a website. This is the how we want to change the defined feature.

[01:15] We end each CSS declaration with a semicolon. This is required, or the browser will not render the style correctly.

Set CSS Properties and Values (syntax)

Share this video with your friends

Course

CSS Fundamentals