How to use CSS style sheets

One of the most important things in the creation of a website is its design. The success of a website can often depend on how its content is laid out in space. Style sheets are a very good tool for web design. With simple commands we can achieve great results. Today we will show you some basic commands that you can use in your designs.

How to create web designs with CSS

To use a CSS style sheet, the first thing to do is to know how to implement it. To do this we must add to the HEAD of our website the following code:

<link rel=»stylesheet» href=»styles.css» />

The archive styles.css will be the one containing all our commands. Normally to apply a layout to our HTML code we will use the following tabs:

<div id ="»nombredelpaquete»"></div>

Once this is explained we can start creating our design. To do this we create a file called styles.css. This will contain the code that performs the layout of the website. CSS files have the following form:

PackageName{

Layout commands

}

PackageName{

Layout commands

}

We can add as many packages as we want as long as they have different names. We can also modify default HTML tags such as <h1> o <body> by writing in the name the content of the tag (h1 or body).

Regarding the layout commands we can use any of the following.

font-size:12px; -> Change the font size.

background-color:#F4F4F4F4; -> Change the background colour.

background:url('img/page_bg.jpg'); -> Change the background to an image.

font-family:Arial, Helvetica, sans-serif; -> Change the font style.

width:850px; -> Change the width of the block in which our content will be inserted.

border:1px; -> Creates a 1px border around our block.

In addition to these basic properties, you can find many more at this link.

As always, remember that you can resolve any doubts you may have through our forum.

2 thoughts on “Cómo utilizar hojas de estilo CSS”

  1. It is the best thing for web design. It saves an enormous amount of time in making design changes.

Leave a Comment

Your email address will not be published.

en_GBEnglish
Scroll to Top