Style HTML with CSS

CSS stands for Cascading Style Sheets , which describes how HTML elements display on screen, paper and other media. CSS can control the layout of multiple websites at once.

CSS is added to HTML elements in three ways:

  1. Inline - uses style properties (Style) in HTML elements
  2. Internal - use elements



    Title


    Network administrator.




    External CSS

    External CSS (external CSS) defines styles for multiple HTML pages with an external file (stylesheet). This way, you can change the look of the whole website, just a single CSS file.

    To use external CSS, just link a reference to the file in the section of the HTML page.

     OCTYPE html> 






    Title


    Network administrator.




    This stylesheet can be written on any text editor. The file must not contain any HTML code and must be saved with the .css extension. This is an example of a section in this CSS file.

     bod y { 
    background-color: powderblue;
    }
    h1 {
    color: blue;
    }
    p {
    color: red;
    }

    CSS Font

    1. color in CSS determines the text color.
    2. font-family determines the font used.
    3. font-size specifies the font-size used.
     OCTYPE html> 






    Post title


    Network administrator.




    CSS Border

    border defines the border around the HTML element.

     p  { 
    border: 1px solid powderblue;
    }

    CSS Padding

    padding defines the space between text and border.

     p  { 
    border: 1px solid powderblue;
    padding: 30px;
    }

    CSS Margin

    margin determines the margin, ie the space outside the border.

     p { 
    border: 1px solid powderblue;
    margin: 50px;
    }

    Id attribute

    The id attribute is used to specify a specific style for a particular element.

    Network administration is a technology website

    Then specify the style for this element with id

     #p01 { 
    color: blue;
    }

    Note : The id of an element must be unique within a page.

    Class properties

    When you need to define a certain style for a particular type of element, use the class. attribute class.

    I differences.

    then define the style for the element with its own class.

     p.error { 
    color: red;
    }

    External reference

    External stylesheet can be referenced by the HTML file by the URL or the path to the current web page. The following example uses the full path to a stylesheet.

     
    href="https://www.quantrimang.com/html/styles.css">

    The following example leads to a stylesheet located in an HTML folder on the current web page.

     

    The following example leads to a stylesheet located in the same directory in the current page.

     

    Last lesson: Colors in HTML

    The following article: Links in HTML

4 ★ | 1 Vote

May be interested

  • ID selector in CSSID selector in CSS
    in css, id is used to style the element with the specified id.
  • Paths in HTMLPaths in HTML
    you can find links (links) throughout the web. link allows clicking to switch to another page.
  • Why write neat and organized HTML?Why write neat and organized HTML?
    you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.
  • HTML formHTML form
    the form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
  • Text in HTMLText in HTML
    the element in html is used to define a paragraph of text.
  • Elements in HTMLElements in HTML
    the html element usually goes in pairs, including the opening tag, closing tag, and the content inside the two tags.
  • Symbol - Icon in HTMLSymbol - Icon in HTML
    html has many mathematical, technical and monetary symbols that cannot be used to write.
  • Common HTML mistakes that you should avoid for better web programmingCommon HTML mistakes that you should avoid for better web programming
    learning html is not difficult, but when running it in the browser, errors often occur. here are common html errors and how to handle them for better web development.
  • How to insert spaces in HTMLHow to insert spaces in HTML
    this tutorial explains how to insert spaces and line breaks in html. because no matter how many times you type a space, html will display a space so to insert more than one space, you will need to use the html tag.
  • Image img in HTMLImage img in HTML
    when you visit the website, you will often see images of all sizes and positions on the page. images in html web pages will help to enrich the content as well as increase the aesthetics of the page.