5 CSS examples
In web design, there are several programming and tagging languages that help shape a template: that user interface that is seen through the web browser, and from where input data is sent to the server. Some of them are HTML, CSS, JavaScript, JQuery, among others.
What is CSS?
Cascade Style Sheet or cascading style sheets, is a design language used to define and establish the visual appearance of a web code written in a markup language, such as HTML or XHTML. It is a way of adding effects and ‘beauty’ to the designed elements.
To implement the CSS in some HTML page, we must write it inside the style element :
<style type = »text / css»>
// CSS style here
</style>
or through the class attribute of the HTML elements:
<p class = »css-style»> Test text </p>
CSS examples
- Place a background image:
<html>
<head>
<style type = »text / css»>
body {background-image: url (‘TU_IMAGEN.jpg’)}
</style>
</head>
<body>
</body>
</html>
With this code extract we add an image to the body element (body of the page), by means of the source URL of the image, which will appear as many times as we use the <body> tag in all web development.
- Change the color of various elements on the page:
<html>
<head>
<style type = »text / css»>
body {background-color: yellow}
h1 {background-color: # 00ff00}
h2 {background-color: transparent}
p {
background-color: rgb (250,0,255)
}
</style>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<p> Sample text. </p>
</body>
</html>
Here we will be changing the background color of the fonts used with the h1, h2, p tags. Then the body of the web document is created and the call is made to those tags that will already have the color attributes previously described in style .
- Highlight links with CSS:
Element ‘a’ is used to place a link. This element has three states:
- a: link , when the link has not been clicked
- a: hover, when we are on top of the link
- a: visited , when the link has been clicked
<html>
<head>
<style type = »text / css»>
a: hover {font-size: 20px; color: # 100;}
</style>
<body>
<a href = “https://www.example-of-link.com”> Keyword or link name </a>
</body>
</head>
</html>
Here certain characteristics are given to the link if we hover the mouse over it. The size and color are changed.
- Ordered lists:
The <ol> tag contains an ordered list, while <li> creates each of its elements.
<html>
<head>
<style type = »text / css»>
ol { styles are created here }
</style>
<body>
<ol>
<li> Element 1 </li>
<li> Element 2 </li>
<li> Element 3 </li>
</ol>
</body>
</head>
</html>
- Unordered lists:
The <ul> tag contains an unordered list, while <li> contains each of its elements.
<html>
<head>
<style type = »text / css»>
ul { styles are created here }
</style>
<body>
<ul>
<li> Photo portrait </li>
<li> Food photography </li>
<li> Wedding photography </li>
</ul>
</body>
</head>
</html>