HTML Styles

HTML (Hypertext Markup Language) is a markup language used to structure content on the web. CSS (Cascading Style Sheets) is a language used to style and format HTML documents.

CSS allows web developers to control the visual appearance of their web pages, including layout, color, typography, and other design elements. With CSS, you can define styles for HTML elements and apply those styles consistently across your entire website.

CSS has a variety of selectors that allow you to target specific HTML elements and apply styles to them. These selectors include element selectors, class selectors, ID selectors, attribute selectors, and more.

CSS also has a wide range of properties that can be used to control the appearance of HTML elements. These properties include font-size, color, margin, padding, border, background, and many others.

There are several ways to add CSS styles to an HTML document. You can include styles directly in an HTML document using the <style> tag, you can link to an external CSS file using the <link> tag, or you can use inline styles by applying styles directly to HTML elements using the style attribute.

CSS also allows you to create responsive designs that adapt to different screen sizes and devices. This is accomplished through the use of media queries, which allow you to define different styles for different screen sizes.

Overall, CSS is a powerful tool for creating beautiful and functional web pages. By learning CSS, you can take your web development skills to the next level and create engaging, visually appealing websites that stand out from the crowd.

What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS is used to define styles for web pages, including layout, colors, fonts, and other design elements. It allows developers to separate the content of a web page from its presentation, making it easier to manage and maintain the code.

With CSS, you can control the appearance of individual HTML elements, groups of elements, or entire web pages. CSS works by associating styles with HTML elements. For example, you can use CSS to specify that all headings on a page should be in a certain font, or that all links should be underlined and displayed in a specific color.

CSS works by using selectors to identify the HTML elements to which styles should be applied. Selectors can be based on element type, class, ID, or other attributes. CSS also uses properties to specify the styles to be applied, such as font size, color, margin, padding, and border.

CSS styles can be defined inline within HTML elements, in an external style sheet file, or within a <style> element within an HTML document. External style sheets are commonly used, as they allow developers to define styles once and apply them to multiple web pages.

CSS has many advanced features, including media queries, which allow developers to create responsive designs that adapt to different screen sizes, and animations and transitions, which allow developers to create dynamic and engaging user experiences. With CSS, developers have a powerful tool for creating beautiful and functional websites.

Using CSS
CSS can be added to HTML documents in 3 ways:

Inline CSS: You can apply CSS styles directly to an HTML element using the "style" attribute. Inline styles take precedence over styles defined in external style sheets or in the <style> element.

Internal CSS: You can define CSS styles within an HTML document using the <style> element. The <style> element should be placed in the head section of the HTML document, and the styles defined within it will apply to the entire document.

External CSS: You can define CSS styles in an external style sheet file and link to it from an HTML document using the <link> element. External style sheets can be reused across multiple web pages, making them an efficient way to manage and update the visual presentation of a website.

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
Inline CSS is a way to add styles to individual HTML elements by using the "style" attribute. When you add inline CSS, you are defining the styles for that particular element only. This is in contrast to external and internal CSS, where you define styles for multiple elements or the entire HTML document.

Inline CSS is written as a series of property-value pairs enclosed in curly braces, like this: style="property: value;". The property specifies the visual style to be applied, such as font-size or background-color, and the value defines the specific value for that property, such as "14px" or "#ffffff".

One advantage of using inline CSS is that it allows you to quickly apply styles to individual elements without having to define a separate class or ID. This can be useful in situations where you need to make a quick change to a specific element, such as changing the color of a heading or the size of an image.

However, inline CSS has some disadvantages as well. It can make your HTML code more difficult to read and maintain, especially if you have a lot of inline styles on a page. It can also make it more difficult to reuse styles across multiple web pages, since you are defining styles for individual elements rather than classes or IDs.

Overall, inline CSS can be a useful tool for making quick style changes to individual elements, but it is generally recommended to use external or internal CSS for more complex styling needs.

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 <h1> element to blue, and the text color of the <p> element to red:

Internal CSS
Internal CSS is a method of adding styles to an HTML document by defining them within the <style> element, which is placed in the head section of the HTML document. Unlike inline CSS, which applies styles to individual elements, internal CSS allows you to define styles for multiple elements or the entire document.

To use internal CSS, you first need to define the styles you want to apply using CSS syntax, such as selector { property: value; }. Once you have defined your styles, you can add them to the HTML document by enclosing them within a <style> element in the head section.

Internal CSS has several advantages over inline CSS. First, it makes it easier to apply styles consistently across multiple elements or pages, since you can define the styles in one place and they will apply to all elements that match the specified selector. Additionally, internal CSS helps keep your HTML code cleaner and more maintainable by separating the content from the presentation.

However, like all methods of adding CSS, internal CSS has its limitations. For example, if you want to reuse the same styles across multiple pages, you will need to copy and paste the CSS code into each document. For this reason, many web developers prefer to use external CSS files, which can be linked to from multiple HTML documents.

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

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

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

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 <head> section of each HTML page:

External CSS is a powerful way of adding styles to HTML documents by linking to an external stylesheet file, which contains all the CSS rules and styles that apply to your web page. This method of adding styles is more efficient than inline and internal CSS because it allows you to separate the content of your HTML document from its presentation.

To use external CSS, you first need to create a separate stylesheet file with a .css extension, such as styles.css. This file will contain all the CSS rules and styles that you want to apply to your HTML document. Once you have created the stylesheet file, you need to link to it from your HTML document using the <link> element in the head section of your document.

The <link> element specifies the location of the external CSS file, as well as some additional attributes such as rel, type, and media. For example, you might use the following code to link to an external stylesheet file:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

External CSS has several advantages over other methods of adding styles to your web pages. First, it allows you to reuse the same styles across multiple web pages, which makes it easier to maintain consistency across your entire website. Second, external CSS is more efficient because it allows the browser to cache the stylesheet file, which means that subsequent pages can load faster. Finally, external CSS makes it easier to separate the content and presentation of your web pages, which makes them easier to read and maintain.

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 <head> section of each HTML page:

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:

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.