ADDING BORDER TO A TEXT

ADDING BORDER TO A TEXT

start

INDEX

prayer

SOLID BORDER

INSET BORDER

GREETINGS

DASHED BORDER

OUTSET BORDER

OBJECTIVES

DOTTED BORDER

CONCLUSION

SELS ACTIVITY

DOUBLE BORDER

ACTIVITY

REVIEW

GROOVE BORDER

INTRODUCTION

RIDGE BORDER

PRAYER

GREETINGS

OBJECTIVES

Explain the CSS properties and syntax required to add a border to text in HTML using CSS.

Develop an appreciation for the aesthetic value of adding a border to text in CSS and recognize the impact it can have on the overall visual appeal of the webpage.

Demonstrate the ability to add a border to text in HTML using CSS, including selecting appropriate CSS properties, adjusting border width and style, and applying the border to the desired text elements on the webpage.

SOCIO-EMOTIONAL ACTIVITY

Express your thoughts and desires into reality through your tweets.

Directions:Assuming you are tweeting on Twitter using the provided template, use 140-280 characters to summarize what you hope your day will be like.

REVIEW

Number the Images

Directions: : Assume that you are going to write code using the background property, rearrange the numbers in the correct sequence by dragging and dropping them. Verify if your arrangement is correct in the 'Solution' section.

https://view.genial.ly/6406cd3b2fff0b00121ee083/interactive-content-number-the-images

NOTE:Please remember to submit your completed response on Google Classroom once you have finished.

INTRODUCTION

The way text is formatted is crucial to the overall look of a webpage and can greatly impact its success or failure. It also has the potential to capture or lose the interest of viewers. In order to enhance the appearance of a webpage, useful techniques include adding background to text.

SOLID BORDER

In CSS, a solid border is a border style that creates a continuous, solid line around an HTML element. It is one of the most commonly used border styles in web design, and it can be customized by setting the border's width, color, and other properties.

The syntax for creating a solid border in CSS is as follows:

Here, border-width refers to the width of the border, which can be specified in pixels, ems, or other units, while border-color refers to the color of the border, which can be specified using color keywords, RGB values, or hexadecimal color codes.

Adding Border to a Text

You can also use the CSS border property to add borders around a single text or a group of text. You can adjust the thickness of the border by using the keywords "thin", "medium", or "thick". There are various border styles available as well, such as "solid", "double", "groove", "ridge", "inset", "outset", "dotted", or "dashed", which can be applied according to your preference.

SOLID BORDER

SOLID BORDER

In this code, there are two CSS classes .border-example-1 and .border-example-2 that apply different border styles to the h1 and p elements respectively. The border styles are defined using the border property with the syntax border: [border-width] solid [border-color];. The h1 element has a 2-pixel wide solid red border, while the p element has a 3-pixel wide solid blue border.

SOLID BORDER

SOLID BORDER

In this example, the p element (paragraph) has been targeted in the CSS, and the border property has been set to 1px solid black. This means that a black border with a width of 1 pixel will be applied around the paragraph text. You can adjust the border color, width, and style to your liking using CSS.

DASHED BORDER

A border style that creates a series of dashed lines around an HTML element. It can be customized by setting the border's width, color, and other properties.

DASHED BORDER

The CSS style applied to the h1 element is a border with a 2px width, a dashed style, and a green color. This means that a border will be drawn around the h1 element with the specified width, style, and color. The code also includes a p element that contains the text "This is a paragraph." This element does not have any CSS styles applied to it, so it will not have a border. When this code is loaded in a web browser, it will display the h1 and p elements on the page with the specified text and formatting.

DOTTED BORDER

A border style that creates a series of dots along the edge of an element, which gives the appearance of a dotted line.

DOTTED BORDER

The CSS style applied to the h1 element is a border with a 2px width, a dotted style, and a blue color. This means that a border will be drawn around the h1 element with a dotted style and a blue color. The h1 element itself contains the text "DOTTED BLUE" which will be displayed on the webpage along with the border applied to it.

DOUBLE BORDER

A double border is a border style that creates two parallel lines around an HTML element. It can be customized by setting the border's width, color, and other properties.

DOUBLE BORDER

When this code is loaded in a web browser, it will display the h1 element with the red double border and the text "DOUBLE RED". The border will have a width of 3px, a double style, and a red color. The p element will be displayed on the page below the h1 element without a border.

GROOVE BORDER

A groove border is a border style that gives the impression of a 3D groove, as if the border is inset into the page. It can be customized by setting the border's width, color, and other properties.

GROOVE BORDER

When this code is loaded in a web browser, it will display the h1 element with the purple groove border and the text "GROOVE PINK". The border will have a width of 3px, a groove style, and a purple color. The p element will be displayed on the page below the h1 element without a border.

RIDGE BORDER

A ridge border is a border style that gives the impression of a 3D ridge, as if the border is raised out of the page.

RIDGE BORDER

The CSS code sets the border width to 3 pixels and the border style to "ridge", which creates a 3D raised border effect. The border color is set to orange. The h1 element within the body section contains the text "RIDGE ORANGE", which will have the defined border applied to it.

INSET BORDER

An inset border is a border style that gives the impression of being pressed into the page, as if the border is sunken or inset.

INSET BORDER

This is a HTML and CSS code that creates a border around the heading using the h1 tag. The border has a width of 3px and a style of inset. The border color is set to brown.

OUTSET BORDER

A border style that gives the impression of being lifted out of the page, as if the border is raised or outset.

OUTSET BORDER

This code creates a HTML document with a heading (<h1>) element that has a border of 3 pixels with an outset style and color of grey. The style and color of the border is defined in the CSS using the border property with values of 3px for the width, outset for the style, and grey for the color.

CONCLUSION

Adding borders to text using CSS can be an effective way to enhance the appearance and readability of text content on a webpage. Borders can be customized to match the overall design of the website and can provide visual cues that draw attention to important text elements. There are various types of border styles available in CSS, such as solid, dotted, dashed, double, groove, ridge, inset, and outset, each with its own unique appearance. By using borders wisely, web developers can create visually appealing and easily scannable content that improves the user experience on their website.

ACTIVITY

INTO THE FUTURE

Create a code in which it has a design that includes a border and fill it with your aspirations for the future or what you desire to bring into reality.