CSS Fundamentals
Last updated
Last updated
In this lesson, we'll build on the basics we've learned. We'll learn to select elements based on HTML attributes, we'll learn to apply colors, and we'll learn how to comment our CSS.
Identify CSS syntax
Identify CSS use formats
Utilize various types of CSS selectors
Utilize various types of color values in CSS
Recognize and implement CSS comments
Before we turn to the various ways we can extend CSS rules, let's go over the foundational syntax CSS uses.
We create a CSS rule by defining the selector, which matches the HTML element we want to style. Inside the curly braces we declare the properties we want to change and, after the colon, we set the value we want to change that property to. Each property is written in the following form: property name, colon, the value for that property and a semicolon.
In the example above, we are selecting the p element and displaying its color as blue.
How do we "apply" CSS to an HTML page? By using one of three CSS use formats: inline, internal (or embedded) and external.
Inline includes the styles directly into the HTML element with the style attribute.
While you might see this sort of styling in something like the code for an HTML email, this is generally not best practice for two reasons. The primary reason is because it only affects that single element. If we want all paragraph elements on our page to appear blue, we would have to add that attribute to every element individually, which is inefficient and difficult to maintain into the future. That brings us to the second reason to avoid inline CSS: it breaks our principle of separation of content and presentation.
Internal CSS is inside of style tags in the HTML document's head section.
This rule will display all paragraphs in this document as blue, which is a step up in scope from the inline styles that only apply to single elements. But this CSS will only apply to the single document. Other paragraph elements on other pages in the same website will be unaffected.
If we want our CSS to carry across various pages, we can use an external stylesheet. This is a separate CSS file that we link in the head of HTML documents.
With the link tag, we can use the relation attribute to define the target as a stylesheet and the link source our CSS file that contains all the CSS we want to use on our site. This is by far the easiest way to link CSS to HTML and apply styles across all of our pages.
CSS gives us a wide range of ways that we can select elements on the page. Some of these you will use more than others, but it's a good idea to know them all so you can choose the right one when you need it.
ID selectors target all elements with a specific ID attribute value. The way we specify an ID selector in a CSS rule is to follow the element name with a hash tag and then the ID attribute value we want to match.
In this case, the browser will look for a p element with the ID attribute "introduction" and apply the CSS to that element. ID selectors are useful when you want to give a single element on the page a unique identity and set it apart from everything else.
Class selectors target all elements with a class attribute value matching the selector name. We specify a class selector using the period symbol followed by the name value.
The difference between IDs and classes is that IDs are meant for one element on the page that has unique identity where class selectors are meant to be spread throughout the page across multiple elements.
Compound selectors let us apply the same CSS rules to multiple elements at once. If we want to make both h1 and h2 elements display green, we use both as selectors, separated with a comma.
This eliminates the need to rewrite a new CSS rule containing the same styles for different elements.
Descendant selectors target elements that are descendants of the matching selector name. A descendant selector is indicated by a space in between one selector and another selector.
In this case, only p elements within the article element will receive the styling.
ID, class, compound and descendant selectors are the kind of selectors you will probably use in your CSS on a regular basis. From this point on, we get into more advanced selectors. They are often not as necessary as the previous ones, but they can accomplish some powerful operations.
The child selector targets all elements that are the immediate children of a specified element.
Only p tags one level down from article will display as blue. If there are p tags within an aside element within the article element, they will not receive the same instructions.
The adjacent sibling selector targets elements that appear directly after the matching selector name. We indicate it using a plus symbol.
Here the adjacent sibling selector will style the paragraph directly following an h3 element but not paragraphs that come after the first.
The general sibling selector (sometimes called the preceded selector) will style all matched elements after the preceeding selector name.
With this general sibling selector, all paragraph elements that come after the h3 will receive the styling.
The universal selector matches any elements and will apply to elements that are not targeted by other rules. It's indicated by the star symbol.
In this case this is going to set the color of the text yellow for any element that hasn't had its color property specified elsewhere.
The attribute selector can target elements with a particular attribute. We can also define exactly which attribute we want to match.
Here we want to find input elements, but only those with a type value that matches "text." For those elements that fit the requirements, the browswer will then apply the width we want. There are many different ways to use this type of selector with various combinations of operations and attribute values, so you can refer to the resources to explore them all.
Pseudo-class selectors target elements based on a particular state of an element or relationship to other elements. The way we signify a pseudo class selector is with the colon symbol.
These two link examples reflect the way links that are both unvisited and visited will be displayed differently. If the link is unvisited, it will show as blue. If it has been visited, it will show up purple. Psuedo-class selectors, like attribute selectors, have a lot of aspects, so you can explore them more in other resources.
We've been using color names in our examples to keep it simple, but only a handful of color names are recognized by all browsers. When writing CSS, we'll be better off to use different ways of defining our colors.
Most often developers use a set of numbers called hexadecimals, which represents a wide range of colors. Hex colors begin with # and are followed by, generally, 6 numbers, but some of these numbers are actually letters. The lowest single digit number in hex is 0 and the highest single digit number is f. This table might help to visualize what we mean by this.
Hex colors work by creating Red, Green, Blue (RGB) values. Traditional RGB colors are on a scale of 0 to 255 for each of the three colors in the spectrum. #000000 translates to black since 0 reds, 0 green, 0 blues represents the absence of all colors, and #ffffff makes white since 255 reds, 255 greens, and 255 blues equal the maximum of each of the colors.
Hex colors can be shortened to just three numbers when each RGB value is the same for each digit. So #111111 can be written as #111.
We can also work directly with RBG values.
Here we've set our p elements to the color white, the maximum of all RGB values (255).
You can also add an extra channel to your RGB color by setting an "a" value, which represents opacity.
This example will show up as blue, with 50% opacity, so the element will have a somewhat transparent color.
Sometimes developers want to put into their code information that helps other humans understand what the code is doing but without bothering the browser. We do this with comments, and CSS has its own way to mark up comments.
Everything in between the /* */ is a CSS comment. The browser will not pay attention to these comments, but they can be useful for us to add explanations or reminders along side our CSS code.
We reviewed the specifics of CSS syntax and covered the different ways we can connect CSS to HTML. We ran through the various types of CSS selectors, including IDs, classes, compound, child, adjacent sibling, general sibling, universal, attribute and psuedo-classes. We also took a look at the various ways to express colors, from standard color names to hexidecimal and RBG values. Lastly, we identified how to read and write CSS comments.
View on Learn.co and start learning to code for free.