Cascading style sheet properties and their functions
As a web designer, It is better you know CSS properties and their functions, making it easy for you to write your style sheet file. In this article, we’ll cover as much as possible here. You will learn how to use them and when to use them while designing your web pages.
If you’re
just starting your web design journey, you might need a little bit of
introduction. So you might ask what is css?
What is CSS?
CSS is an
abbreviation of Cascading Style Sheet. It is used as a styling language that
enables web designers and developers to style website to look attractive for
end users. Before one can start learning css, it is better the person start
from HTML, because you are going to style html document with it, so without
first learning html, it is impossible to really understand the styling
language.
Now that you
know what css is, it is time we move into the next step, which is learning
about the properties of css. Remember, we are going practice a lot with
examples.
Hopefully
you’re fully ready for this article, because it will be a bit lengthy. Never
mind how long it will take you to read through, you’ll definitely learn some
new stuff.
Related articles:
how to create a blog using blogger
how to connect namecheap domain name to blogger
In our
previous article, we’ve talked about the methods in which one can use in
styling a web page. It can be inline, internal and external. So you need to
check our previous post to learn about it.
Now that you
know styling also has methods, let’s dive into it.
CSS coloring properties
Coloring is
the primary step in making a website look beautiful. One important thing is,
coloring separated in two ways, the coloring of html element or coloring a
text.
In default,
the element coloring is white, while the text coloring is black, but it is the
choice of the developer to change element or text to what will fit the website.
Let’s try
some coloring example.
Element
coloring example;
.div{
Background-color:skyblue;
}
You specify
background, instructing that you’re applying a color to the background of the
element, then you give color name or the code.
Text
coloring example;
.div{
text-color:white;
}
You have
just applied a skyblue background color to your div element and give a white
text color.
Css font property
Our next css
property we will look at is the font property. Aside coloring the text on your
web page, you can actually make the text either bold or bigger in size.
CSS font
size property example;
P{
Font-size:15px;
}
Explanation;
What I just
did is giving all paragraphs a text size of 15px. Any text inside a paragraph
on this same web page will automatically have text size of 15px.
Aside size,
inside the font family, we also have font weight. This property make the text
have bold look.
CSS font
weight property example;
P{
Font-weight:bold;
}
To make you
more serious about your coding skill, I will explain everything to you. Now go
find some of the font properties yourself.
CSS height and width
properties
When
designing a website, you can never run away from the height and weight
properties because these properties gives your website the really shape it
desire.
CSS height property
The css
height property is used to give any element a height.
Css height
example;
Div{
Height:250px;
}
Basically,
the height width css properties enable developers to set the size of any html
element. Be it <div>, <p>, <h1> and more. You can also give
your designing elements another color different from the one you give your page
background.
Css @media property
This is
another powerful css property that web developers can’t do without. This
property gives the developers the ability to design user friendly web pages. With
@media, you can build a website that can fit into every device screen size.
All you have
to do, is to know the sizes of the device screens you want the site to fit in
and set the @media specification to it.
Css @media
example;
@media(min-width:1000px)
{
.page-header
{
width:100%;
height:55px;
background-color:lightblue;
text-align:center;
margin-top:-0px;
}
}
Explanation:
In the above
css @media property, I specified that all the styles written should have effect
when the device screen is up to 1000 width. Remembered, width is css property
using to specify width of any element.
Css display property
This is
another css wonderful property. The works of this property is hiding and show
any element. For instant, if you to show a particular html element, you can set
it to hidden and when the given time is reached, the hidden element will show
up.
Css display
property example;
@media(min-width:1000px)
{
.page-header
{
display:
none;
}
}
Explanation:
Once the
device screen width minimum is at 1000 let the header is hidden. This explanation
is a great start to what you can build with css display property. You can also
use this property to build a drop down menu list.
Css float property
Float is
another amazing css property. What this property does is to float html element
to either the right hand side or center. By default, it is set to left. So with
this property, feel free to shift any element to wherever you want.
Related articles:
how to create a blog using blogger
how to connect namecheap domain name to blogger
Note: you
can’t move element to the top and bottom using float. You either move it the right,
left and center.
Css float
property example;
p
{
float:right;
}
Above code
explanation:
I set the html
paragraph elements to right. This will make all the <p></p>
elements to right because I did not specify it for just one paragraph element. If
you want to know how to give one particular another style, then go read about “how
to use css to style a web page using inline, internal and external”
Css text decoration
property
This will be
the last css property I will teach in this very article. We’ll more as we move
from here.
So what can
the text decoration property do for us? Very good question, this property helps
developers to decorate link display text. By default, if you add an html link
to your web page, it shows blue text color, and underline, so to customize it,
you use text decoration property to remove the underlining.
Css text decoration
property example;
a{
text-decoration:none;
}
Above code
explanation:
As you can
read from the example code above, I set the text decoration to none, meaning it
will remove the underlining from the link display text.
I hope you’ve
learn something new that will help improve your web design skill.
Continue learning
as you visit other of our articles.
Comments
Post a Comment