Show List
Tutorials > CSS > CSS Styles

CSS Styles

Here are examples of some common styling using CSS

  • color - To set the font color. Color value can be color name, RGB, HEX, HSL, RGBA or HSLA. Example color: red;
  • background-color - Used to set the background color of an element. Example background-color: white;
  • background-image - Used to use image as background of an element. Example background-image: url('images/vertical.png');
  • background-repeat - Background image gets repeated horizontally and vertically if space is available. background-repeat is to control that behavior. Example background-repeat: no-repeat;
  • background-attachment - To specify if the background image is to be fixed or scroll with the page. Example background-attachment: scroll;
  • background-position - To set the starting position of the background image. Example background-position: left top;
  • background - Shorthand property can be used to set background color, image, repeat, attachment, position. Example background: white url('images/vertical.png') no-repeat scroll left top;
  • border - Shorthand to specify border-width, border-style and border-color in one statement. These properties can also be set individually. Example border: 2px solid #888; 
  • border-radius - To set the rounded border. Example border-radius: 10px;
  • margin - It is used to set space outside and around the element. This shorthand property is used to specify margin-top, margin-right, margin-bottom and margin-left in one statement. Example margin: 10px 20px 10px 20px;
  • padding - It is used to set space inside the element border and around the content. This shorthand property is used to specify padding-top, padding-right, padding-bottom and padding-left in one statement. Example padding: 20px 30px 20px 30px;
  • height - Used to set element height. Example height: 100px;
  • width - Used to set element width. Example width: 80%;
  • font-style - Used to set text font as normal, italic or oblique. Example font-style: italic;
  • font-weight - To set thickness of the font. Example font-weight: 900;
  • font-size - To set the font size. Example font-size: 18px;
  • font-family - To set the font family name. Example: font-family: Arial;
  • font - Shorthand property to set font-style, font-weight, font-size and font-family in one statement. Example font: italic 900 20px Arial; 

Code Example:

index.html
<!DOCTYPE html>
<html>

<head>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <div class="mainDiv" >Sample Text</div>
</body>

</html>
styles.css
div.mainDiv {
    color: blue;
    background-color: antiquewhite;
    border: 2px solid #888;
    border-radius: 5px;
    font-size: 18px;
    font-family: arial, 'Courier New', Courier, monospace;
    margin: auto;
    padding: 10px;
    box-shadow: 1px 1px 6px #222222;
    height: 100px;
    width: 60%;
    min-width: 300px;
    text-align: center;
}
Output:


Next: CSS Selectors

    Leave a Comment

  • captcha text