Learn

The forum of documents and methods for studying - Lượm lặt kiến thức


    Create a colored border around text with HTML and CSS

    QaniTri
    QaniTri
    Admin

    Nam Libra Monkey
    Tổng số bài gửi : 1568
    Tiền xu Ⓑ : 3891
    Được cảm ơn № : 6
    Ngày khởi sự Ngày khởi sự : 07/01/2013
    Đến từ Đến từ : HCMC
    Côngviệc / Sởthix Côngviệc / Sởthix : Languages, Softwares, Sciences, Martial arts

    Create a colored border around text with HTML and CSS Empty Create a colored border around text with HTML and CSS

    Bài gửi by QaniTri 5th March 2016, 03:05

    Create a colored border around text with HTML and CSS


    Create a colored border around text with HTML and CSS Box-border
    A border in your HTML pages can help bring attention to a section of text or surround any other HTML element.


    As can be seen below a border can be created around any text using HTML and CSS on your web page. In the example below we have surrounded a paragraph < p > < /p > with a red border.


    First example with text surrounded by a red border.
    This example also has multiple lines.



    To create the above example the below code was used.

    Code:
    <p style="border:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.<br>This example also has multiple lines.</p>



    In the above code, the style is defining the border size (px short for pixel), style type, and border color. The style of the border is how the border appears on screen. Other types of border styles include dotted, dashed, double, groove, ridge, inset, and outset. The border color defines the color you want to use for the border. In the above example, the color code #FF0000 was used, which is the color code for red.


    Defining style using CSS



    The style of how something appears on a web page can also be done with CSS code placed into the < head > < /head > section of your HTML page or in an external CSS file so it affects all pages using the CSS file. For example, with the below CSS code a new class called "borderexample" is being created that can be applied to any other HTML tag.


    Code:
    <style>
    .borderexample
    {
    border-style:solid;
    border-color:#287EC7;

    </style>



    Using the above code if you wanted to apply this border style to an HTML paragraph you could type something similar to the example below.


    Code:
    [size=13]<p class="borderexample">This is an example of a border created using CSS</p>[/size]


    Additional information




    • Additional help and information on HTML tables.

    • See our border definition for additional information related pages.



    computerhope.com


      Hôm nay: 19th April 2024, 12:07