Home > Developer > Web Develop
CSS (cascading style Sheets) The style used to render HTML element tags:
<!DOCTYPE HTML><HTML><Body><Divstyle= "Opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color: #40B3DF"></Div><Divstyle= "font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"><Divstyle= "Opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color: #8AC007"></Div><H3>look! Styles and Colors</H3><Divstyle= "LETTER-SPACING:12PX;">Manipulate Text</Div><Divstyle= "color: #40B3DF;">Colors<spanstyle= "Background-color: #B4009E; color: #ffffff;">Boxes</span></Div><Divstyle= "color: #000000;">And more ...</Div></Div></Body></HTML>
Effect:
CSS can be added to HTML in the following ways:
Inline style-Use the Style property in HTML elements
1. Instance background color:
<!DOCTYPE HTML><HTML><Bodystyle= "Background-color:yellow;"><H2style= "background-color:red;">This is a heading</H2><Pstyle= "Background-color:green;">This is a paragraph.</P></Body></HTML>
Effect:
2, font size, color (using font-family (font), color (colors), and font-size (font size) properties to define the style of the font)
<!DOCTYPE HTML><HTML><Body><H1style= "Font-family:verdana;">A Heading</H1><Pstyle= "font-family:arial;color:red;font-size:20px;">A paragraph.</P></Body></HTML>
Effect:
3, text alignment (use the text-align (text alignment) property to specify the horizontal and vertical alignment of the text);
<!DOCTYPE HTML><HTML><Body><H1style= "Text-align:center;">center-aligned Heading</H1><P>This is a paragraph.</P></Body></HTML>
Effect:
Use <style> elements to include CSS in the header
Internal style sheets (you can use an internal style sheet when a particular style is required for a single file.) You can define an internal style sheet in the
<Head><styletype= "Text/css">Body{Background-color:Yellow;}P{Color:Blue;}</style></Head>
External references (external style sheets are the ideal choice when styles need to be applied to many pages.) Using an external style sheet, you can change the appearance of the entire site by changing a file-using an external CSS file
< Head > < rel= "stylesheet" type= "text/css" href= " Mystyle.css "></head>
HTML Style-CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
