Basic CSS Attributes

Within CSS there are many different things that can changed, you can effectively change everything about an element including it’s position on the webpage. There are a few css properties that can be good to get started with css, and changing the style of webpages.

You can change the text colour of an element using the ‘color’ attribute or you can change the background colour of an element using the ‘background-color’ property. There are some built in colours when using css, that you can use the names of the colour to apply. These colours include: black, white, red, blue, green, yellow, etc.

color: black;
background-color: white;

The ‘text-align’ property can be used to change where text appears within an element. The value can be ‘left’, ‘center’, or ‘right’. This property only works for block level elements, such as the ‘p’ or ‘div’ tags that add a line break after the element.

text-align: center;

The way in which text looks within html can be change using css too. You can change it’s font-size, it’s typeface, and if it’s bold. The ‘font-size’ property can take a numeric pixel value, using the ‘px’ suffix. There are other way to measure and set a font size such as ‘vh’, ‘vw’, ’em’, etc. The ‘font-family’ value is the typeface in which you want the text to be, it can also take a list of typefaces to use as a fallback incase the font specified cannot be loaded. The ‘front-weight’ property can either take the word ‘normal’, ‘bold’, ‘bolder’, ‘lighter’, or hundred values from 100 to 900.

font-size: 21px;
font-family: Arial;
font-weight: bold;

The border of a html element can be changed using css too. You can change the style of the border; ‘solid’, ‘dashed’, ‘dotted’, ‘double’, ‘inset’, etc. You can also change the width of the border using a numeric value (px, em, etc) or a preset value such as: thin, medium, or thick.

border-style: solid;
border-width: medium;

These are just a few of the properties you can change with css or cascading style sheets. There are lots more, and when used in conjunction can create an entire theme of a website or webpage.

Leave a Reply