Looking for a good place to learn the CSS basics? Check out this article. CSS is very simple to use once you get it down. Becoming a master at CSS requires that you learn some basic structure. From there, all you have to do is remember certain codes.
CSS
CSS is actually one of the easiest coding languages to learn. CSS, or cascading style sheets, are what control the styling behind webpages. Below, you will learn about the basic structure of CSS and be able to view some working examples that will demonstrate the use of tags and attributes.
CSS Structure
Basic CSS code is implemented in one of two ways, directly or indirectly. Direct CSS implementation involves writing the CSS within the same page as the code (HTML ). Indirect or external CSS implementation involves writing the CSS on a separate style sheet and calling the style sheet to the code (HTML). Certain limited CSS styles can also be applied using tags around text. Below are some structure examples to give you a better understanding.
Direct CSS
Direct basic CSS code (CSS on the same page as HTML) looks like this:
This is sample paragraphThis is a Title headline
Notice how both the CSS and the HTML is contained within the div.
The first part,
The second part,
This is a Title headline
inserts the text “This is a Title headline”. But it also uses CSS to define the text color, line-height, and padding. <h1 style=" opens an element, and closes it.The 3rd part,
This is sample paragraph
Finally, at the very end, there is a
Indirect CSS
Indirect basic CSS code (calling the CSS style sheet to the HTML) looks like this:
This is the HTML:
this is just some text
This is the separate CSS
#brighthub {
color:#006699;
font-size:15px;
font-weight:bold;
}
Notice that the HTML and CSS are completely separate.The “#” is used to define the div. You can also use a “.” rather than the “#”. The brackets { } hold the actual styling elements. Note that each element, such as color:#006699; ends in a ; which is used to the different style attributes.
This style of CSS is common in many content management systems, such as WordPress .
Direct Limited CSS Tags
There are certain tags that can directly style any text, as long as it’s HTML enabled and writable. For example:
will directly underline a piece of text. is the opening tag, and is the closing tag.
Bla bla bla = Bla bla bla (Check Using CSS Underline for more on that)
will directly bold a piece of text. is the opening tag, and is the closing tag.
Bla bla bla = Bla bla bla
will directly italicize a piece of text. is the opening tag, and is the closing tag.
Bla bla bla = Bla bla bla
Stylings
Now that you know how to use the three basic structures of CSS implementation, you can start to memorize the attributes and stylings. You can find a complete list of them here . That’s all there is to learning basic CSS code. Again, once you have the three basic structures down, you have basic CSS down. You can always refer to the stylesheet for the actual styles, as remembering them all can be difficult.
