Style with HTML CSS
In this article, we’ll take a closer look at HTML CSS, what they do, and how they work together to bring your web pages to life.
HTML and CSS are two of the core technologies for building web pages.
Together, they form the backbone of the modern web, providing developers with the tools to create visually appealing, interactive, and dynamic websites.
CSS or Cascading Style Sheets are used in HTML.
The CSS language saves a great deal of time and effort. Multiple web pages can be laid out simultaneously with it.
CSS = Styles and Colors
Using Text MANUPLATION
Boxes
CSS: What is it?
Cascading Style Sheets (CSS) is a language that is used to format the layout of a webpage.
Using CSS, you have the ability to alter many aspects of your website design, including color, font, font size, the spacing between elements, how elements are positioned and laid out, what background images or background colors should be used, how elements will display on different devices and screen sizes, and that’s just the beginning.
An element’s style will cascade down to all its children when it is applied to its parent element. For example, if you set the body text’s color to “blue”, all headings, paragraphs, and other text elements within the body will also be the same color (unless you specify otherwise).
Here’s a simple stylesheet
To illustrate HTML CSS, we apply a very simple stylesheet to a document as follows:
Example:
Multiple styles
Notice how, in this example of HTML CSS, the conflicting declarations in the following <style> element override those in the preceding one, if they have equal precision.
Example:
Making Use of CSS
There are three ways to add CSS to HTML documents:
Internal – Inserting a <style> element in the <head> section
External – Insert a
<link>element to link to an external CSS fileInline – using a style attribute within an HTML element
It is most common to keep CSS styles in external files. It is however our intention to use inline and internal styles in this tutorial. This will allow us to demonstrate how to use them more easily and get you to be able to try them out more easily.
Inline CSS
When an inline CSS style sheet is used, it is used to apply a unique style sheet to just one element of an HTML document.
Inline CSS is used on HTML elements using the style attribute.
This example sets the green text color of the <h1> element to orange, and the red text color of the <p> element:
Example
Internal CSS
An internal CSS file is used for a single HTML page.
Internal CSS is defined within an HTML page’s “head” section, within a “style” element.
As you can see in the following example, the text color of ALL the h1 elements (on that page) is green, and the text color of ALL the <p> elements is red.
A powdergreen background will also be displayed on the page.
Example
External CSS
The style of many HTML pages is defined by an external style sheet.
The header section of each HTML page should contain a link to the external style sheet:
Example
Any text editor can be used to write the external style sheet. You must save the file as a .css file without any HTML code.
An example of “styles.css” can be found here:
background-color: lightgreen;
}
h1 {
color: black;
}
p {
color: pink;
}
CSS color scheme, fonts, and sizes
Our goal here is to demonstrate some CSS properties that are commonly used. We’ll discuss them in more detail later.
The CSS color property specifies the color of the text.
The CSS font-family property specifies which font to use.
The CSS font-size property determines what font size to use.
Example: How to use the color, font-family, and font-size properties in CSS.
Example:
CSS Border
HTML elements are surrounded by borders defined by CSS border.
For nearly all HTML elements, you can define a border.
The CSS border property can be used in the following ways:
Example:
CSS Padding
Text and border padding are defined by the CSS padding property.
Here is an example of how CSS border and padding properties can be used:
Example:
CSS Margin
CSS margins define how much space should be left outside of borders.
The following example illustrates the use of CSS border and margin properties:
Example:
CSS Text Decoration
CSS text decoration defines the text decor that how it should be displayed.
The following example illustrates the use of CSS text decoration properties:
Example:
External CSS link
You can reference an external style sheet with either its full URL or a path relative to the current web page.
An example of linking to a style sheet with a full URL is as follows:
Example:
The following example shows how to connect a Css external file to a HTML document:
Example:
Chapter Summary
- Utilize the HTML
styleattribute for inline styling. - Utilize the HTML
<style>element to specify internal CSS. - Utilize the HTML
<link>element to guide to an external CSS file. - Utilize the HTML
<head>element to store <style> and <link> elements. - Utilize the CSS
colorproperty for text colors. - Utilize the CSS
font-familyproperty for text fonts. - Utilize the CSS
font-sizeproperty for text sizes. - Utilize the CSS
borderproperty for borders. - Utilize the CSS
paddingproperty for space inside the border. - Utilize the CSS
marginproperty for space outside the border. - Utilize the CSS
text-decorationproperty for decoration the text.
Tip: The CSS Tutorial contains much more information about CSS.
HTML Style Tags
| Tag | Overview |
|---|---|
| <style> | Specifies style statement for an HTML document |
| <link> | Describes a link between a document and an external resource |
Visit our HTML Tag Reference to see a list of all available HTML tags.
Advantages of using Style with HTML CSS
CSS offers several benefits when it comes to styling HTML web pages:
- Separation of Concerns: CSS lets you separate your web page’s content and structure (defined in HTML) from its visual presentation (defined in CSS). In this way, you can maintain and update your code more easily, since changes to one aspect don’t necessarily affect the others.
- Consistency and Reusability: CSS defines styles that are applied consistently across multiple web pages, making it easier for your website to maintain a consistent look and feel. Additionally, you can reuse styles for similar elements on different pages, resulting in less code.
- Flexibility and Control: CSS gives you fine-grained control over the visual presentation of your website. Creating unique and customized designs is made easy by adjusting the size, position, color, and other visual properties of individual elements.
- Accessibility: CSS simplifies the process of creating accessible web pages by separating content from presentation. Using CSS, you can adjust font size and spacing for improved readability or define high-contrast color schemes.
- Faster Load Times: CSS allows you to define the visual presentation of your web page globally, reducing the amount of code required. As a result, loading times can be shortened and performance can be improved, especially on mobile devices with slower internet connections.
Conclusion:
As a web developer, you and others can benefit from CSS’s benefits when styling HTML pages. Using CSS allows you to separate content from presentation, allowing you to design your web pages with greater flexibility, control, and consistency.
Furthermore, CSS can speed up loading times, improve accessibility, and simplify maintenance and updating. It is possible to create visually stunning, responsive, and accessible web pages that are optimized for performance across various devices and platforms when you master HTML and CSS.
