HTML Styles — CSS

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS = Styles and Colors

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to «blue», all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline — by using the style attribute inside HTML elements
• Internal — by using a element in the section
• External — by using a element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the element to blue, and the text color of the

element to red:

Example

A Blue Heading

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the section of an HTML page, within a element.

The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the

elements to red. In addition, the page will be displayed with a «powderblue» background color:

Example

This is a heading

This is a paragraph.

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

This is a heading

This is a paragraph.

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the «styles.css» file looks like:

«styles.css»:

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

This is a heading

This is a paragraph.

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

Example

This example links to a style sheet located in the html folder on the current web site:

Example

This example links to a style sheet located in the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary

• Use the HTML style attribute for inline styling
• Use the HTML element to define internal CSS
• Use the HTML element to refer to an external CSS file
• Use the HTML element to store and elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Exercises

HTML Style Tags

Tag	Description
	Defines style information for an HTML document
	Defines a link between a document and an external resource

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

CSS Selector Types – How to Select Elements to Style in CSS

Dillion Megida

When you want to style an element with CSS, you first have to «select» it. In this article, I’ll show you seven (7) ways in which you can do that.

Here’s the syntax for styling elements in CSS:

You have the selector that «targets» the element(s) you want to style, then you have an open curly brace. After the brace, you have your styles using different CSS properties, and you close it with a closing curly brace.

There are numerous ways to target elements. You can call these methods Selector Types.

Here is a video with examples on Ways to Select Elements to Style in CSS if you prefer that.

Here are seven selector types in CSS.

1. How to Use the Universal Selector (*) in CSS

The Universal Selector, asterisk (*), allows you to select ALL elements of any type for styling. Here is an example:

Let’s say we use this style for the following HTML:

 
CSS styles
 
How to apply styles
 
 
  

You can see that the body , h1 , p , div , and img elements all have the border of 1px solid black because we used the universal selector.

2. How to Style Elements by Tag Name in CSS

You can also select elements for styling by using their tag names. Here’s an example:

These style declarations applies a color of red to all p elements and a width and height of 200px to all img elements.

Here’s how the style above works with this HTML:

I am a span 
There is a span above me
 

You can see that the span is not styled – only the img and the p are.

3. How to Style Classes in CSS

Elements accept different attributes (also called properties), including classes. You can target an element based on the class you have specified on it. Here is an example:

There are two div s here, but only one has a class attribute with the container value. You can style the one with the class using a period (.) then the class like this:

From the CSS, we specified that all div elements should have a border of 1px solid purple. But for the element with a container class , you can see from the result that it has a border-width of 20px.

4. How to Style Ids in CSS

Similar to the class attribute, you can specify an id on an element which you can target from CSS for styling.

You can target the id element here by using a hash (#) and then the id like this:

Using the element (whether it’s a div , p , or any type) with the container id , we applied styles to only the second div element.

Unlike classes, however, id s must be unique. Two or more elements cannot have the same id as that would cause unexpected behaviors.

5. How to Style Other Attributes in CSS

We’ve seen how to target class and id attributes. What if you wanted to target other attributes? Well you can; using square brackets ([attr]). How does that work?

In this example, we have two elements: an a tag and a p tag. To style both elements, you can use their tag names directly:

The comma allows you to apply styles to multiple selectors at once.

But another way you can style both elements is using their attributes. They both have a href attribute.

Just keep in mind that the href attribute is not supported in p tags though. I’m just using it to illustrate an example.

Here’s how you can use the href attribute to style both elements:

This CSS will match all elements with the href attribute.

Both elements have the href attribute and so they are selected for our styles. Here, we used the href attribute without a value. You can also specify a value to be specific about your target like this:

Only the a tag has the href attribute with the # value so that is the only element that matches our styles, as you can see from the image above.

6. How to Use Pseudo-Classes in CSS

Pseudo-classes are selector types that allow you to select elements in a particular state. To name a few, here are some supported states:

• hover (when the mouse floats over an element)
• disabled (when an element such as an input or button is disabled)
• required (when a form element is required)

And many more you can find in the Pseudo-classes MDN Documentation.

You can apply styles when elements are in these states. You select the state by using a colon (:) followed by the state. Here is an example:

The line is important to specify that it is HTML5 so the pseudo classes can work.

This CSS would apply these styles to any element you hover over. Here’s the result»:

The image on the left is without the hover state. On the right, you can see the styles applied to the body and the button because we’re hovering over them.

By hovering over the button , you are also hovering over the body because the button is a child of the body .

7. How to Use the Pseudo Element Selector in CSS

Pseudo-elements (different from Pseudo Classes) are used to select a «specific part of an element». Not the whole element – just a part. And you can also use them to add pseudo (artificial) elements to an existing element.

Here are some supported pseudo-element selectors:

• selection : the highlighted part of an element
• first-line : the first line of a paragraph
• placeholder : the placeholder text of an input element

And many more you can find in the MDN Pseudo Elements Documentation.

To apply styles using a pseudo-element selector, you use double colons (::) followed by the pseudo-element. Here’s an example:

And here’s the CSS for this HTML:

The ::placeholder pseudo-element selector styles the «placeholder part» of all form elements. As you can see in the example above, the input element itself has a color style of blue but the placeholder part has different styling.

Wrapping up

In this article, I’ve shown you seven ways in which you can target elements you want to style. We’ve seen:

• the universal selector, for selecting all elements
• tag names for selecting elements that match a tag name
• classes for selecting elements with a class attribute
• ids for selecting an element with an id attribute
• attributes for selecting elements that have an attribute with or without a specified value
• pseudo-classes for selecting elements in a specific state
• pseudo-elements for selecting specific parts of an element

You can also combine these selectors to be more specific about the element you want to target. You do this using Combinators.

Combinators allow you to use multiple selectors to target elements based on the relationship between the elements that match the selectors. Here’s an article I wrote about combinators if you want to learn more.

To give you a quick preview – combinators are used between multiple selector types, and they allow you to style elements based on the relationship they have with other elements.

Источник