WE WILL BE USING CSS (CASCADING STYLE SHEETS)

NCPATS HTML THREAD: (https://www.nairaland.com/nigeria/topic-17942.0.html ) IS LIKE A PRE-REQUISUTE FOR THIS THREAD SO PLS PLS VIEW IT AND LEARN HOW TO:

~CREATE AND SAVE A WEBPAGE IN NOTEPAD
~ADD TITLE TO THE PAGE
~ADD A BACKGROUND COLOR
~ADD IMAGES ETC





INTRO
CASCADING STYLE SHEETS (CSS) IS A SIMPLE MECHANISM FOR ADDING STYLE (E.G. FONTS, COLORS, SPACING) TO WEB DOCUMENTS.

<!—ANY TIPS AND INSTRUCTIONS WRAPPED WITHIN THESE KEYS WILL BE VISIBLE IN YOUR NOTEPAD BUT NOT ON YOUR PAGE, SO DONT WORRY, YOU CAN COPY IT-->


HOW TO GRASP THE CSS CONCEPT

DESIGN IT ABOVE & CALL IT BELOW:
THIS IS A LIL SOMEHTING I MADE UP WHEN I WAS LEARNING CSS TO MAKE THE CONCEPT EASIER.


LETS SAY I WANT TO DESIGN A HEADER
WHOSE WIDTH WILL TAKE UP 50% (HALF) OF THE PAGE
HEIGHT WILL TAKE UP 20% OF THE PAGE
I WANT ITS BACKGROUND COLOR TO BE HOTPINK (NOT THE WHOLE PAGE BACKGROUND)
& I WANT IT TO HAVE A SOLID BLACK BORDER THAT IS 2 PIXELS THICK (2PX)

I SIMPLY DESIGN IT (COPY AND PASTE ALL CODES BELOW INTO YOUR NOTEPAD)
………………….

<!—DESIGN AREA BEGINS-->

<style type="text/css">

#header {
position:absolute;
width:50%;
height:20%;
background-color:hotpink;
border:2px solid black;
}

</style>

<!—DESIGN AREA ENDS-->
…………………….

WHEN YOU SAVE THIS NOTEPAD FILE AS A .HTM FILE AS TAUGHT IN (https://www.nairaland.com/nigeria/topic-17942.0.html ) DONT BE ALARMED IF NOTHING SHOWS UP BECAUSE YOU HAVE ONLY DESIGNED IT, NOW YOU HAVE TO CALL IT FOR IT TO SHOW UP!

PRESS ENTER 3 TIMES AND (COPY ALL CODES BELOW)
………………….


<!—CALLING AREA BEGINS-->


<div id="header">

THIS IS THE TEXT IN MY HEADER

</div>


<!—CALLING AREA ENDS-->
…………………….


CONGRATULATIONS
YAY!



NOW GO BACK TO YOUR DESIGN AREA AND FAMILIARIZE YOURSELF WITH YOUR WIDTH AND HEIGHT, CHANGE THEM TO ANY NUMBER UP TO 100% DEPENDING ON HOW LONG OR WIDE YOU WANT YOUR PAGE, CHANGE YOUR BACKGROUND-COLOR FROM HOTPINK TO RED, YELLOW BLUE OR ANY COLOR


END OF LESSON1

IF YOU ENCOUNTERED ANY PROBLEMS OR HAVE PROBLEMS WITH MY EXPLANATION PLS LET ME KNOW

Girl, you go t time, why not get a personal site like lissa or somthing
http://www.lissaexplains.com/

true lol but its much more rewarding if u know that ppl are using the tutorials/can ask questions etc
as opposed to just putting it out there and hoping ppl see it



plus this is exclusively for nairaland members

true talk

hi Eniola
is this the immediate continuation of the other thread?