Style HTML with CSS

This guide covers style HTML with CSS with practical context and easy-to-follow details. Use it to understand the subject and apply the information confidently.

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.

• Inline - uses style properties (Style) in HTML elements
• 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 sectionOf 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

  • colorIn CSS determines the text color.
  • font-familyDetermines the font used.
  • font-sizeSpecifies thefont-sizeUsed.

   OCTYPE html> 
  
  
  
  
  
  
  

  Post Title

  Network administrator.

  CSS Border

  borderDefines the border around the HTML element.

   p  {
   border: 1px solid powderblue;
  }

  CSS Padding

  paddingDefines the space between text and border.

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

  CSS Margin

  marginDetermines the margin, ie the space outside the border.

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

  Id Attribute

  TheidAttribute is used to specify a specific style for a particular element.

  Network administration is a technology website

  Next, specify the style for this element withid

  #p01 {
   color: blue;
  }

  Note : TheidOf 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 theclass.Attributeclass.

  I differences.

  Next, 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.

  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