Set CSS Properties and Values (syntax)

Tyler Clark
InstructorTyler Clark
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today